Search code examples
javascriptangularjsgoogle-chromegoogle-chrome-apphtml5-filesystem

How to save video downloaded from server?


I'm downloading a video from a server using JavaScript XHR (Angular $http GET in particular, with response type 'blob')

How should I save this to chrome application's local storage?

Currently using an Angular wrapper on HTML5 filesystem API https://github.com/maciel310/angular-filesystem

writeFileInput: function(filename, file, mimeString) {
        var def = $q.defer();

        var reader = new FileReader();

        reader.onload = function(e) {
            var buf = e.target.result;

            $timeout(function() {
                fileSystem.writeArrayBuffer(filename, buf, mimeString).then(function() {
                    safeResolve(def, "");
                }, function(e) {
                    safeReject(def, e);
                });
            });
        };

        reader.readAsArrayBuffer(file);

        return def.promise;
    }

This is the code which saves files. But this is designed when the file is received from an input. Since I'm not receiving this file from input, this is not working (specifically readAsArrayBuffer().

It is showing error as TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.


Solution

  • I just want through something like this with localStorage

    You are going to want to use File System Api

    I know you say you want localStorage but most likely you don't have enough space if you're trying to store videos.

    This answer relates this this problem

    Please see This Answer

    You said, "It's around 15 MB".
    

    That is way to big to be storing to local storage.