webassembly/app.html: Fetch mesh from search-query url-param #1596
Conversation
Add extension to filename, whether passed as url-param, or from response header `content-disposition`
|
Just tried a local build and opening
Any idea? |
|
True, CORS blocking is a standard error when fetching content that resides on a server, from an app that lives on another domain. You either need: |
|
Using Using
|
|
How do we feel about using the hash part of the URL ( const mesh_url = window.location.hash.substring(1);
const j = mesh_url.lastIndexOf('/');
const mesh_name = (j>0? mesh_url.substring(j+1):mesh_url);
const sanitized_mesh_name = mesh_name.replace(/[^a-zA-Z0-9._-]/,'_');
// ...
Module.FS.writeFile(sanitized_mesh_name, new Uint8Array(buffer));
openFile(sanitized_mesh_name);
|
|
Thanks for the feedback. I just found a way to test my changes using the existing Hash part of the url vs search query can probably be done as soon as the POC works ok. Regarding the sanitization, it can probably also rely on existing encodeURI browser APIs. Will report if I find anything! The error I'm getting at the moment: |
|
Finally got it to work! 🚀 Tested with
Note if the window location hash is used instead of a search query, it might be more difficult to allow the user to pass both a mesh url and an extension in case the extension is not included within the url or returned as response header content-disposition, or hashes are present in the url. A way to circumvent this would be to encodeURI the mesh-url passed as a hash, and decode it before fetching the request. One could then simply define the url formatting as a search query where the question mark is replaced by a hash, something like |
Following direction by f3d team, see PR discussion thread
|
Final edit: 🚀 Last commit replaces the search-query with a hash as requested by @snoyer URLs are parsed exactly like search queries, but with a Final format looks like this:
|
|
Alright, just did include the suggested changes, thanks for the feedback! |
|
Nice feature! Here's a few improvements: It'd be nice to clarify the order of priority used to get the filename between the download URL, response header, and Using the hash is nice and local, it doesn't get sent to the server and doesn't refresh the page when changed, but it therefore needs a listener to work on subsequent changes. I'd say overall it would need to look something like: function load_from_url(){
const params = new URLSearchParams(window.location.hash.replace('#', '?'));
// ...
fetch(model_url).then((response) => {
// ...
const filename = filename_for_model_url(model_url, extension, response.headers.get("content-disposition")
// ...
openFile(filename);
}
}
addEventListener("hashchange", (event) => {load_from_url()}); // do it whenever the hash changes
load_from_url(); // do it the first time when page is loaded |
|
Thanks, just refactored per your instructions, should be good to go!
This is how it works at the moment - rephrased, if extension provided, enforce it, otherwise, get type from header if available, otherwise from url. if (extension_parsed) {
filename = `model.${extension_parsed}`;
} else {
// If extension is not provided by user, try to get it auto from content-disposition header of url extension
if (contentDisposition) {
filename = contentDisposition.split('filename=')[1].split(';')[0];
} else {
try {
filename = model_url.split('/').pop(); |
|
Thanks for the last suggestions, I included them and just pushed the final commit! |
see f3d.app PR merged for parsing model url and extension: f3d-app/f3d#1596 `https://f3d.app/web/#model=${modelUrl}`
PR Following feature request thread here #1595