CODEWITHSUNDEEP
reactjsfileblobsingle-page-applicationclient-side
foxtrotuniform6969
foxtrotuniform6969

Reputation: 4125

Client side JS: Persist blob to disk before saving/prompting user for save location

1. The setup

I'm currently initiating a GET request to an S3 bucket (not important) to download a very large file using the browser fetch(). This file is, in it's stored form, raw and unusable binary data, not structured.

2. The task and problem

There are a few things I want to do on the client-side with this data:

  1. I need to process this data as it streams into the client to perform transformations on it (decryption, for example).
  2. Once the data is processed and downloaded, it might still not be of any immediate use to the user outside the context of the web UI. Maybe the data should stay stored within the web app's sandbox disk space unless a user explicitly exports it?

3. The question

Where can I store this blob of unstructured data in both or either of the use cases listed above? There appear to be many options but none that fit this use case precisely. Any thoughts?

EDIT: I feel like an idiot. I totally forgot about the FileSystem API. I'll take a look and answer my own question with a pseudo-implementation of this works.

EDIT 2: I feel the need to reiterate what I stated in 2.2 above:

within the web app's sandbox disk space

I don't care about accessing the user's whole file system. I just want a space I can work with large files in on disk, similar to the app space directories provided to mobile applications by Android and iOS.

Upvotes: 0

Views: 520

Answers (1)

Emanuele Scarabattoli
Emanuele Scarabattoli

Reputation: 4469

If you want to save and process a file at client level, and Blob is not an option, you may consider File System Access API (https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API#writing_to_files), even if this will introduce an interaction with the user.

Another option would be to take the advantages of PWAs client-side storage (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage), this is also about your application architecture.

Before to check if to process your file at client level can be done as you need with the existing technologies, check if you really need to do that because it is only option, or, instead, if you are able to move such logic at server level, depending on your use cases.

Upvotes: 1

Related Questions