0

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 accomplish 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.

user3328402
  • 47
  • 2
  • 3
  • 12

3 Answers3

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

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")
Pian0_M4n
  • 2,505
  • 31
  • 35
  • yes i know this method. But i am altering this file object and then saving that altered part to a hidden filed. How can i retrieve it back as a file object? – user3328402 Feb 19 '14 at 14:16
  • just get it again, after you do whatever it is you do to it. you can't save an object to a hidden field. you save it in a variable and use it as you wish – Pian0_M4n Feb 19 '14 at 14:17
  • This is a read only property and cannot be altered. As the scope is changing i cannot get it again once it is altered. – user3328402 Feb 19 '14 at 14:21
  • what exactly is changing? the value of the file input? do another hidden var and send it there: `` and do: `$('#storeHere').val($('#myFile').val());` – Pian0_M4n Feb 19 '14 at 14:25
  • But when i would retrieve that i would get a json object instead of a file object – user3328402 Feb 19 '14 at 14:41
  • `File object` = a JS or Jquery Object `$('#storeHere').val(JSON.stringify($('#myFile').val()));` Like this you store it as a JSON object, and you are free to recover it and do whatever with it – Pian0_M4n Feb 19 '14 at 14:43
  • 1
    I want to recover it as a file object. Because one of my methods needs this as a file object. – user3328402 Feb 19 '14 at 14:49
  • I have no idea what you are talking about. jQuery object you mean. You already have everything you need in the commands – Pian0_M4n Feb 19 '14 at 15:05
1

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 incoming 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>
Nate
  • 322
  • 2
  • 4
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.com/a/20535454/606810

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

Hope it helps!

Community
  • 1
  • 1
Codedroid
  • 518
  • 7
  • 16