I have some java-script functions. I am using input type file for selecting multiple files. In the on-change event I am getting a list files objects which were uploaded and then I am storing those objects in a hidden field. I want to retrieve those objects as file objects only. How can i acplish that?

The code I am using is as follows:-

<input type="file" multiple onchange="ehDisplayFileNames(event);" />

function ehDisplayFileNames(event) {
    myFilesList = $('#' + event.target.id)[0]; // $('#chooseFiles')[0] gives the DOM element of the HTML Element as opposed to $('#store-input') which gives the jQuery object

    $("#FilesToUpload").val(JSON.stringify(filesToUpload));
}

function getAllFiles(){
    var filesToUpload = [];
    filesToUpload = $.parseJSON($("#FilesToUpload").val()); // returns json objects instead i need file objects
}

Thank you for the help.

I have some java-script functions. I am using input type file for selecting multiple files. In the on-change event I am getting a list files objects which were uploaded and then I am storing those objects in a hidden field. I want to retrieve those objects as file objects only. How can i acplish that?

The code I am using is as follows:-

<input type="file" multiple onchange="ehDisplayFileNames(event);" />

function ehDisplayFileNames(event) {
    myFilesList = $('#' + event.target.id)[0]; // $('#chooseFiles')[0] gives the DOM element of the HTML Element as opposed to $('#store-input') which gives the jQuery object

    $("#FilesToUpload").val(JSON.stringify(filesToUpload));
}

function getAllFiles(){
    var filesToUpload = [];
    filesToUpload = $.parseJSON($("#FilesToUpload").val()); // returns json objects instead i need file objects
}

Thank you for the help.

• javascript
• jquery
• json

Share Improve this question Follow asked Feb 19, 2014 at 14:04 user3328402user3328402 4722 gold badges44 silver badges1212 bronze badges 4

• 1 whats a file Object? You mean JSON string to JS Object? If yes just use: var myObject = jQuery.parseJSON( jsonString ) ; and it will be a object – Pian0_M4n Commented Feb 19, 2014 at 14:07
• Do you know developer.mozilla/en-US/docs/Web/API/FileReader? – Bergi Commented Feb 19, 2014 at 14:09
• @user3328402: Do you mean an <input> element? – Bergi Commented Feb 19, 2014 at 14:10
• yes input element of type file – user3328402 Commented Feb 19, 2014 at 14:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I was looking for a similar thing.. I ended up using the solution provided here as there is no way to serialize API object... https://stackoverflow./a/20535454/606810

Here is another source i found useful for image/file storage: https://hacks.mozilla/2012/02/saving-images-and-files-in-localstorage/

Hope it helps!

whats a file Object? You mean JSON string to JS Object?

If yes just use:

var myObject = jQuery.parseJSON( jsonString ) ;

and it will be a object

REWRITE::

<input type="file" multiple onchange="ehDisplayFileNames(event);" />

add ID to it

<input type="file" id="myFile" multiple onchange="ehDisplayFileNames(event);" />

then you have your object:

$("#myFile")

Here is the solution you are looking for. :-)

I assume what you are ultimately trying to do is to store the values (of which there may be multiples). In addition, you may be trying to display them to the user instead of showing the default text that says "4 files selected" for example. And also, as you had indicated, you want to be able to programmatically manipulate the list of selected files.

The problem is that can't be done in the way you are approaching it. That's because the <input type="file" /> element is protected, and the full file path will never be accessible. Therefore, when you attempt to grab the values, they would only be the filenames themselves but not the full file path. For example, if you selected a file called dog.jpg from your desktop, the browser knows the path is "file:\c:\windows\users\someuser\desktop\dog.jpg" but when you programmatically try to retrieve it - you will only get the value "dog.jpg". With just the filename, you can not reconstruct the full file paths and so you can't do anything meaningful with them in regards to eventually sending them to be processed by the server.

Therefore, I have crafted a solution for you which uses a single file upload button. When a user selects a file, it will add another as needed. In addition, when there are more than one files selected, the user can choose to remove any of them as needed.

You would process the selected files on your server in the following way... When the form data is sent to the form action (in this case "/sendfiles"), your server side code would process the ining data for each form element. In the example below, the input elements of type files (having the name attribute "myFiles") would be sent as an array, where each array element would contain the file data of each one that was specified by the user.

jQuery code:

var getUploadFragment = function(){return $('<div class="files-cont"><input type="file" name="myfiles" class="files" /></div>')};   
$(document).ready(function(){
    $("#my_form")
        .append(getUploadFragment())
        .on("change", "input[name=myfiles]:last", function(){
            var lastFileContainer = $(".files-cont:last");
            lastFileContainer.after(getUploadFragment());
            if($(".files-cont").length > 1){
                lastFileContainer.append('[<a href="#" class="remove">Remove</a>]');
            }
        })
        .on("click", ".remove", function(){
            if($(".files-cont").length > 1){
                $(this).parent().remove();
            }else{
                $(this).remove();
            }
        });
    });

with the following form defined in the body:

<form id="my_form" action="/sendfiles" method="post"></form>