Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Save to Local File from Blob

I have a difficult question to you, which i'm struggling on for some time now.

I'm looking for a solution, where i can save a file to the users computer, without the local storage, because local storage has 5MB limit. I want the "Save to file"-dialog, but the data i want to save is only available in javascript and i would like to prevent sending the data back to the server and then send it again.

The use-case is, that the service im working on is saving compressed and encrypted chunks of the users data, so the server has no knowledge whats in those chunks and by sending the data back to the server, this would cause 4 times traffic and the server is receiving the unencrypted data, which would render the whole encryption useless.

I found a javascript function to save the data to the users computer with the "Save to file"-dialog, but the work on this has been discontinued and isnt fully supported. It's this: http://www.w3.org/TR/file-writer-api/

So since i have no window.saveAs, what is the way to save data from a Blob-object without sending everything to the server?

Would be great if i could get a hint, what to search for.

I know that this works, because MEGA is doing it, but i want my own solution :)

like image 676
fsx_steven Avatar asked Aug 28 '14 11:08

fsx_steven


People also ask

How do you save a blob File?

Saving BLOB as File using JavaScript Then inside the onload event handler, the received Byte Array (Binary Data) is converted to BLOB object and the File is downloaded in Browser. //Set the File URL. var url = "Files/" + fileName; //Create XMLHTTP Request.

How do I download blob responses?

Creating the download link Create an object URL for the blob object. Create an anchor element ( <a></a> ) Set the href attribute of the anchor element to the created object URL. Set the download attribute to the filename of the file to be downloaded.


1 Answers

Your best option is to use a blob url (which is a special url that points to an object in the browser's memory) :

var myBlob = ...; var blobUrl = URL.createObjectURL(myBlob); 

Now you have the choice to simply redirect to this url (window.location.replace(blobUrl)), or to create a link to it. The second solution allows you to specify a default file name :

var link = document.createElement("a"); // Or maybe get it from the current document link.href = blobUrl; link.download = "aDefaultFileName.txt"; link.innerHTML = "Click here to download the file"; document.body.appendChild(link); // Or append it whereever you want 
like image 65
Sebastien C. Avatar answered Sep 20 '22 15:09

Sebastien C.