Saving FileList to $.cookies

Question

I have a FileList like this:

FileList {0: File, 1: File, 2: File, File…}

I need to remember these files after pages has been refreshed. How can I save them to cookies? (or is there some better methods?) Right now I'm doing it like this $.cookie("result", files); files = $.cookie("result"); but this gets me [object FileList] which I can't parse. Turning files into JSON didn't work either.

Any ideas how can I save the FileList so that I can loop it after page refresh?

EDIT: Maybe I should note that I get the FileList from user input e.g. "Choose files".

Assigning files:

HTML part:

<input type="file" id="files" name="file" multiple />

JS part:

$('#files').on('change', readFiles);
function readFiles(event) {
     var files = event.target.files; //has FileList {0: File, 1: File, 2: File, File…}
     $.cookie.json = true; //converts FileList to json (is correct).
     $.cookie("result", files); //cookie registering also works (atleas with strings) 
     files = $.cookie("result"); //get undefined as a result
     for (var i = 0, f; f = files[i]; i++) {
       var reader = new FileReader();
       reader.readAsText(f, 'utf-8');
     }
}

Please show some actual code. Your `FileList` example is not javascript. — Jonathan M, Dec 09 '14 at 20:45
@JonathanM: Yes, it is. That is how a DOM `FileList` object appears in the console. — SLaks, Dec 09 '14 at 20:48
@user3960875, when you say you can't "parse" the object FileList, you shouldn't be parsing it. Instead you should just be referencing it, a la `myFileName=files[2];` — Jonathan M, Dec 09 '14 at 20:52
@JonathanM when accessing it as `myFileName=files[2];` I get it in wrong form (as single chars) e.g. `myFileName=files[0];` is `[` not the first file. — user3960875, Dec 09 '14 at 21:38
Please update the post to show the code where `files` is getting assigned before the cookie is created. — Jonathan M, Dec 09 '14 at 21:53
I suspect the problem is you're passing `files` to `$.cookie()` as if `files` were a string. It's not. It's an object. Before the first `$.cookie()` call, try encoding `files` as JSON. Throw it up in an alert or to the console and look at the structure to make sure it's what you think it is. — Jonathan M, Dec 09 '14 at 22:22
This page says there's an option to automatically convert objects to JSON strings. It's turned on by doing `$.cookie.json=true;`. If you do that, you shouldn't have to json encode before and decode after. It should handle it all for you. — Jonathan M, Dec 09 '14 at 22:26
Sorry, forgot the link: https://github.com/carhartl/jquery-cookie/tree/v1.4.1#json — Jonathan M, Dec 09 '14 at 22:34
@JonathanM I tried this before, it encodes to JSON as `{"0":{"webkitRelativePath":"","lastModified":1411305080000,"lastModifiedDate":"2014-09-21T13:11:20.000Z","name":"file2.html","type":"text/html","size":32966}}` but requesting it as `files = $.cookie("result");` gives `undefined` with both suggested methods. — user3960875, Dec 09 '14 at 22:34

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

In your original code, in place of:

reader.readAsText(f, 'utf-8');

you want:

reader.readAsText(f.name, 'utf-8');

and if you haven't already turned it on, you may need the JSON option, which auto-converts object to JSON strings on storage, and then back to objects on retrieval. It looks like:

$.cookie.json=true;

Here's the doc: https://github.com/carhartl/jquery-cookie/tree/v1.4.1#json

NOTE: While the maximum size for each cookie is unlimited according to the spec, in reality it varies from browser to browser. With 150 files in your list, you're probably hitting the limit, and the $.cookie object is rejecting the value. For more info on max sizes, see here: What is the maximum size of a web browser's cookie's key?

To avoid this limitation, either divide your list, or use webstorage.

A better solution would be to store the file list on the server via GET or POST and have the server provide a session cookie that allows retrieval. If using PHP, see PHP Sessions.

edited May 23 '17 at 10:33

Community

1
1

answered Dec 09 '14 at 22:37

Jonathan M

17,145
9
58
91

When doing `files = event.target.files; $.cookie.json=true; $.cookie("result", files); files = $.cookie("result");` last time I assign `files` from cookies it evaluates to undefined... but when i do `$.cookie("res", "hello"); str = $.cookie("res");` it evaluates correct e.g prints hello. So there's somekind of problem with FileList... is there a limit maybe how long can it be? – user3960875 Dec 09 '14 at 22:47
Is the JSON in your comment at the top the exact representation of your FileList? That is, does your list only contain one file? If so, I'm going to run some tests using `{"0":{"webkitRelativePath":"","lastModified":1411305080000,"lastModifiedDate":"‌2014-09-21T13:11:20.000Z","name":"file2.html","type":"text/html","size":32966}}` as the object. – Jonathan M Dec 09 '14 at 22:53
This is the exact representation but I have close to 150 files (all lightweight html files <35KB) I get this when I do `var json =JSON.stringify(files);console.log(json);` I expect that `$.cookie.json=true` does the same thing. – user3960875 Dec 09 '14 at 22:55
Yes, the cookie does the same thing. What is the length of the json string resulting from this `stringify`? Per this answer, the maximum length of the whole cookie is around 4Kb. http://stackoverflow.com/questions/640938/what-is-the-maximum-size-of-a-web-browsers-cookies-key – Jonathan M Dec 09 '14 at 23:01
Correct it was too big for cookies (32KB). Any other ideas how to remember 32KB JSON after refresh :D? – user3960875 Dec 09 '14 at 23:27

Saving FileList to $.cookies

1 Answers1