All geek questions in one place

Chrome Apps: how to save blob content in file system in background?

In Chrome applications, I download blob content from the server using JavaScript XHR (Angular $ http GET, specifically with the "blob" response type)

How to save this in the file system of a Chrome application?

Currently using the Angular shell for the HTML5 file system API https://github.com/maciel310/angular-filesystem

I do not want to show the user a popup (therefore, I cannot use chrome.fileSystem. chooseEntry )

The chrome.fileSystem.requestFileSystem API chrome.fileSystem.requestFileSystem supported only by Kiosk applications. Therefore, I use the HTML5 FileSystem API instead of chrome.

I use the following code so that XHR retrieves blob.

  $http({ url: SERVER_URL+"/someVideo.mp4", method: "GET", responseType: "blob" }).then(function(response) { console.log(response); fileSystem.writeBlob(response.name, response).then(function() { console.log("file saved"); }, function(err) { console.log(err); }); }, function (response) { });

This is my writeBlob method

 writeBlob: function(fileName, blob, append) { append = (typeof append == 'undefined' ? false : append); var def = $q.defer(); fsDefer.promise.then(function(fs) { fs.root.getFile(fileName, {create: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { if(append) { fileWriter.seek(fileWriter.length); } var truncated = false; fileWriter.onwriteend = function(e) { //truncate all data after current position if (!truncated) { truncated = true; this.truncate(this.position); return; } safeResolve(def, ""); }; fileWriter.onerror = function(e) { safeReject(def, {text: 'Write failed', obj: e}); }; fileWriter.write(blob); }, function(e) { safeReject(def, {text: "Error creating file", obj: e}); }); }, function(e) { safeReject(def, {text: "Error getting file", obj: e}); }); }, function(err) { def.reject(err); }); return def.promise; },

This shows SECURITY_ERR as It was determined that certain files are unsafe for access within a Web application, or that too many calls are being made on file resources.

What is the solution for this?

I tried using the --allow-file-access-from-files flag while running the application. It does not help.

+5
source share
2 answers

Sandboxing the Chrome app does not allow storing files in the root directory (i.e. / )

Modify the code to save it in a specific subdirectory in it. For instance -

 fileSystem.writeBlob("/new"+response.name, response).then(function() { console.log("file saved"); }, function(err) { console.log(err); });

This will successfully save the file in the /new/ directory.

+2
source

To deploy this, here is a detailed sample application on how to download a file and save the blob and display it back to the user.

https://github.com/PierBover/chrome-os-app-download-example

0
source

Source: https://habr.com/ru/post/1239497/

More articles:


All Articles