How to load assets with AssetServer in WASM (from binary data?)

[nablabla]

I compile my code as WASM. I try to load it like that:
let texture = asset_server.load("baer.png");
It works for normal builds, but under WASM, it makes this:
GET http://127.0.0.1:8081/assets/baer.png [HTTP/1.1 404 Not Found 2ms]

So instead of file it goes HTTP GET. But I don't want it to do that, instead I want to provide the file myself. Is that possible?
Either I want to give it a path or binary data to draw from, or another URL

[nicopap]

What do you mean by "provide the file yourself"? You mean prompt the players with a upload dialog when they run the game? Or bundle the asset with the binary so that there isn't additional network traffic when loading assets?

Is this what you want? There is a very good reason that by default on the web bevy fetches assets as URLs. It's because it's much faster for the user, and much more convenient for you as a dev. Make sure to run the wasm file with a web browser. Typically, you'd start a file server (for example with cp wasm_binary.wasm . && python -m http.server --directory . 8080) then open a web browser at URL http://127.0.0.1:8080. Then the file server will serve the files from your project in the web browser when bevy requests http://127.0.0.1:8080/assets/baer.png)

If you want to prompt the player for each asset you use, you could implement your own AssetIo that interacts with js through js-sys crate.

If you want to bundle the assets, you can use load_internal_binary_asset! macro, or bevy_embeded_assets

[nablabla]

I want to load them via javascript and store it in the browser cache, that it our best idea, if it is possible.
I have yet to find a way to transfer files from js to wasm/rust. I am thinking u8 vector/array. Then I don't know how to pass it into the asset server. virtual file?. It sounds like load_internal_binary_asset! is the best option, am I right?
The assets I have are not know at compile time, that might be an important fact.

[nicopap]

So in this case, you should define your own AssetIo.

AssetIo allows you to use any arbitrary logic to load assets. In your AssetIo implementation, you could use the js-sys crate to interact directly with javascript from rust. Including what you are trying to accomplish, which seems to do asset management on the javascript side.

To pass arbitrary data to rust from javascript, check out this page: https://rustwasm.github.io/docs/wasm-bindgen/reference/arbitrary-data-with-serde.html

[nablabla]

Yes! That is actually it. The example really helped.
I am now trying to pass an array or any data into the webasm/rust without success, i found several examples, but can't get any of it to work, unfortunately they do not have explainations. It always creates error messages in jibberish, like "Uncaught (in promise) TypeError: getObject(...) is undefined" followed by a wicket stack trace.

I want to get data like this:

#[link(wasm_import_module = "../modules/assetServer.js")]
extern "C" { fn getAsset(path: &str) -> Uint8Array; }

and js:

export function getAsset(path) {
    return new Uint8Array([1, 2, 3, 4, 5]);
}

once it gave me a giant array of 0 and crashed my browser

[nablabla]

sorry, that I did not answer for so long, my collegue and I are still trying to find out a way how to include a java script module in the modules generated by bindgen

[nablabla]

okay we figured out how to reference the modules correctly and we now have a working JS implementation that provides assets.
However it is of course an async function, which opens a new box of problems.
export async function getAssetBytes(id: string): Promise<ArrayBuffer | undefined>
This page (https://rustwasm.github.io/wasm-bindgen/reference/js-promises-and-rust-futures.html) basically says that it is possible to call async JS functions but does not explain how.
Especially the load_path function is not async, so I don't know how to call it. I adjusted the import to return a promise

#[wasm_bindgen(module = "@/utils/wasmApi")]
extern "C" {	
	#[wasm_bindgen(js_name = getAssetBinary)]
	fn get_asset(id: &str) -> Promise;
}
fn load_path<'a>(&'a self, path: &'a Path) -> BoxedFuture<'a, Result<Vec<u8>, AssetIoError>>
{
  // I am LOST here... :(
}

I have to convert that to a BoxedFuture, however what exactly even is a BoxedFuture? And how do I do that?
50 querries with chatGPT lead me to this:

return Box::pin(async move {
			// Call the asynchronous function directly
			let result = process_asset(path.to_str().unwrap()).await;
			result.map(|data| data.unwrap_or_else(|| Vec::new())) // Handle None case if needed
				 .map_err(|error| AssetIoError::NotFound)
		});

but I do not understand it and it is not the correct type
note: expected enum Result<_, bevy::asset::AssetIoError>
found enum Result<_, fn(PathBuf) -> bevy::asset::AssetIoError {bevy::asset::AssetIoError::NotFound}>

[nablabla]

Well now I have, seems somewhat similar, but is totally different.
My problem basically is how to convert a Promise coming from an async JS function into a BoxedFuture to be returned by the (not async) fn AssetIo::load_path<'a>(&'a self, path: &'a Path) -> BoxedFuture<'a, Result<Vec, AssetIoError>>
Btw I found no documentation on what a BoxedFuture is whantsoever, so that's tough

[nablabla]

Or maybe the return type of the imported fn must be JsValue and the fn must be async. I have no idea

[linonetwo]

That is a problem, luckily I haven't go this far, I already have all assets in JS memory, then I start the game.

Have you try something like this in the doc

    let promise = some_async_js_function(); // js_sys::Promise::resolve(&42.into());
    let result = wasm_bindgen_futures::JsFuture::from(promise).await?;

[nablabla]

yes I have, it causes this err:
error[E0277]: the trait bound JsFuture: From<impl Future<Output = Result<JsValue, JsValue>>> is not satisfied
the trait From<impl Future<Output = Result<JsValue, JsValue>>> is not implemented for JsFuture

[nablabla]

#[wasm_bindgen(module = "@/utils/wasmApi")]
extern "C" {
	// #[wasm_bindgen(catch)]
	#[wasm_bindgen(js_name = getAsset)]
	fn get_asset(id: &str) -> JsValue;	// Result<JsValue, JsValue>;
}
async fn process_asset(id: &str) -> Result<Option<Vec<u8>>, JsValue>
{
	let js_value = get_asset(id);
	let promise = js_sys::Promise::resolve(&js_value);
	let result = JsFuture::from(promise).await?;

	if result.is_undefined() {
        Ok(None)
    } else {
        let array_buffer = js_sys::Uint8Array::new(&result).to_vec();
        Ok(Some(array_buffer))
    }
}
mpl AssetIo for AssetServerIo
{
	fn load_path<'a>(&'a self, path: &'a Path) -> BoxedFuture<'a, Result<Vec<u8>, AssetIoError>>
	{
		let result = process_asset(path);
		let res = Box::pin(async move {
			let result = result.await;
			result
				.map(|data| data.unwrap_or_else(|| Vec::<u8>::new())) // Handle None case if needed
				.map_err(|error| AssetIoError::NotFound)
		});

		return res;
	}
}

This is the farthest to compiling I got over the last few hours. It does not use the async keyword in the extern declaration (which the docs say it needs). It also does a weired mix of result error types.
And at the end it is not happy with my result:

error[E0271]: expected `[async block@src\asset_server_plugin.rs:61:22: 67:4]` to be a future that resolves to `Result<Vec<u8>, AssetIoError>`, but it resolves to `Result<Vec<u8>, fn(PathBuf) -> AssetIoError {bevy::asset::AssetIoError::NotFound}>`
  --> src\asset_server_plugin.rs:69:10
   |
69 |         return res;
   |                ^^^ expected `Result<Vec<u8>, AssetIoError>`, found `Result<Vec<u8>, ...>`
   |
   = note: expected enum `Result<_, bevy::asset::AssetIoError>`
              found enum `Result<_, fn(PathBuf) -> bevy::asset::AssetIoError {bevy::asset::AssetIoError::NotFound}>`
   = note: required for the cast from `[async block@src\asset_server_plugin.rs:61:22: 67:4]` to the object type `dyn Future<Output = Result<Vec<u8>, bevy::asset::AssetIoError>> + Send`

I am totally out of clue what is wrong, i don't even understand any of the syntax ```Box::pin(async move``