Storing/Retrieving html 5 File object for resuming a broken file upload

Question

I am trying to build a file upload browser client using javascript and HTML 5. From file input form (input type "file") in webpage, browser provides a file handle with the html 5 File Object (http://www.w3.org/TR/FileAPI/) . Upload is done using this file object. But I want a file upload to be resumed if the upload is not complete. For, this to work I need the File object with me while trying to resume upload. cookies and html 5 localstorage store only primitive data types and not objects. Is there a way to store/retrieve the file object, or, extract the actual file handle from the object, store it and make the File object using its constructor function.

Server will maintain the upload states, only thing the client needs to do is store and retrieve this file object. Any suggestions/ workarounds for the client code?

score 2 · Accepted Answer · edited May 23 '17 at 10:30

Data stored in locastorage needs to be of primitive data types and you need to serialize any data before saving it here. As File object is not one of primitive data type so you can not save it to your localstorage. Not to forget that their is a limit(5MB) on maximum data that can be saved in localstorage and for cookies it is even less. Thus this is NOT POSSIBLE using above mentioned options.

However using HTML5 File API's can be an option or may be you can look into indexedDB. I have not tried them and you may discover their own limitations while using them.

Found two similar questions here, you can have a look

Is it possible to save a File object in LocalStorage and then reload a File via FileReader when a user comes back to a page?

How do I save and restore a File object in local storage

score 0 · Answer 2 · answered Nov 11 '13 at 22:04

It is easily possible to store a file in indexedDB. indexedDB is useful for big databases and such, but it would still work even if you are just putting in one file. I know @Gaurav said something about indexedDB, but I'll give you an example of how to store it:

var indexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB;

function storeFile(fileObj,callback){
    var openReq=indexedDB.open('upload-resume',1);
    openReq.onerror=function(e){
        console.error(e);
    }
    openReq.onupgradeneeded=function(e){
        var db=openReq.result;
        db.createObjectStore('upload-resume-store',{keyPath:'blah'});
    }
    openReq.onsuccess=function(e){
        var db=openReq.result;
        var req=db.transaction(['upload-resume-store'],'readwrite').objectStore('upload-resume-store').add({blah:'main',file:fileObj});
        req.onerror=function(e){
            console.error(e);
        }
        req.onsuccess=function(e){callback();}
    }
}

function getFile(callback){
    var openReq=indexedDB.open('upload-resume',1);
    openReq.onerror=function(e){
        console.error(e);
    }
    openReq.onupgradeneeded=function(e){
        //this should have already been called before...so if this is here that means that the file was never stored
        openReq.onsuccess=null;
        callback(false);
    }
    openReq.onsuccess=function(e){
        var req=db.transaction(['upload-resume-store'],'readonly').objectStore('upload-resume-store').get('blah');
        req.onerror=function(e){
            console.error(e);
        }
        req.onsuccess=function(e){
            callback(req.result);
        }
    }
}

I've had issues with indexedDB before, tell me if it doesn't work right.

Storing/Retrieving html 5 File object for resuming a broken file upload

2 Answers2