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?

Answer: 
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?](https://stackoverflow.com/questions/6158829/is-it-possible-to-save-a-file-object-in-localstorage-and-then-reload-a-file-via)

[How do I save and restore a File object in local storage](https://stackoverflow.com/questions/19119040/how-do-i-save-and-restore-a-file-object-in-local-storage)
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.