"Downloading" data in the filesystem

[rapt...@gmail.com]

Hi all,

My emscripten project is an entertainment app that allows the user to create things in an editor.  I'm storing the data using the filesystem API, and it all works fine.  But I want to provide some additional functionality.

I would like to let the user click a button, zip up all their data, and offer it for download (so they can make backups in case of clearing browser data, etc.  Similarly, I'd like to provide a reverse process where they can drop a zip onto the browser and take control of it with emscripten so that I can unzip it and put it into the filesystem.

Is this possible?  And if so, can anyone give me a direction to look in for implementing it?  When I try to google it, there is so much noise that I can't find any answers.

Thanks!

[Floh]

I have implemented very simple versions of this functionality (no zip compression, and no emscripten filesystem API, which I think doesn't help much for this stuff) in some of my WASM apps and demos.

This one can load and save ASM text files via the HTML5 file dialog interface (look under the "File" menu):

https://floooh.github.io/visual6502remix/

And here's a demo to load data via drag and drop:

https://floooh.github.io/sokol-html5/droptest-sapp.html

Unfortunately this kind of stuff isn't doable via emscripten APIs alone, you'll have to use a mix of C and Javascript (mostly Javascript), and move the data in and out of the WASM heap.

The core of the drag'n'drop code is here:

https://github.com/floooh/sokol/blob/5894182dddc2e0fd6531e5a2deb5d9cf7662ea2a/sokol_app.h#L3907-L3978

Basically the "usual" HTML5 drag'n'drop event handlers as embedded Javascript, listening for dropped-events, and copying the "payload" into the WASM heap. Due to the asynchronous nature of Javascript APIs this is a quite confusing mess of calling back and forth between the JS and C side unfortunately.

The code to load and save data via the file dialog is here:

https://github.com/floooh/v6502r/blob/d7f113e0d3e0bcb2fb283acab9a86c257c5d4ca7/src/util.c#L28-L94

...but this stuff is even more confusing and only makes sense after you know how the Javascript APIs work (TBH looking at this stuff after a year I have no idea anymore how it actually works, I only remember that I had a lot of trouble getting it to work across all browsers, and that I had to use outdated and deprecated techniques to get cross-browser compatibility (at least for the "download data to the user machine" stuff).

https://github.com/floooh/v6502r/blob/d7f113e0d3e0bcb2fb283acab9a86c257c5d4ca7/src/util.c#L28-L94

This is a great example of how convoluted and overall terrible web development is, what's a single call in a "native" operating system is usually a jenga tower of hacks and outdated APIs in the web world (...and don't get me started on clipboard support) :/

But I hope this still helps a bit!

[Александр Гурьянов]

Hi I have the implementation for zip/unzip in js-dos. I used libzip,
you can check it here:
https://github.com/caiiiycuk/js-dos/tree/emulators/native/libzip


WASM module exports 2 functions in js:
* zip_to_fs(data, len) - zip archive will be extracted into emscripten FS
* zip_from_fs() - emscripten FS will be packed back to zip (compression is -9)

Alternatively you can use zip.js, it works totally fine and its pure js.
https://gildas-lormeau.github.io/zip.js/

вт, 5 янв. 2021 г. в 19:50, Floh <flo...@gmail.com>:

> --
> You received this message because you are subscribed to the Google Groups "emscripten-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to emscripten-disc...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/838c6f50-e115-463f-8688-2de901992ce6n%40googlegroups.com.