Javascript Add multiple file inputs

Question

I have a form and file input. I want to select images from another folder.

echo '<pre>';
var_dump($_FILES);
echo '</pre>';

When I send my form I need to see all selected images but I see only the last selected.

For example, the first time I select 2 files. After selecting 5 files and submitting my form I see only the last selected files, but I need to send all 7 files. Is it possible??

<form action="" method="POST" enctype="multipart/form-data">
    <input type="file" id="sell-images" name="images[]" multiple>

    <input type="submit" value="submit">
</form>

I have this function for file counter:

    $.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
    var fileIdCounter = 0;

    this.closest("#sell-images").change(function (evt) {
        var output = [];
        for (var i = 0; i < evt.target.files.length; i++) {
            fileIdCounter++;
            var file = evt.target.files[i];
            var fileId = sectionIdentifier + fileIdCounter;

            filesToUpload.push({
                id: fileId,
                file: file
            });
        };

        for(var z = 0; z < filesToUpload.length; z++)
        {
            evt.target.files[z] = filesToUpload[z]['file'];
        }
        console.log(evt.target.files)
    });

    return this;
};

Here is my onchange function:

$(document).ready(function() {
  var filesToUpload = [];
  var files1Uploader = $("#sell-images").fileUploader(filesToUpload, "images[]");

  $("#sell-images").on('change',function(e) {
    e.preventDefault();

Here I see in console all selected files from another folder

    console.log($("#sell-images")[0].files);

    var formData = new FormData();

    for (var i = 0, len = filesToUpload.length; i < len; i++) {
      formData.append("files", filesToUpload[i].file);
    }
  });
});

Here I have all selected files, but when I want to select a new file and send post in my PHP file, the global variable $_FILES shows me only the last selected files.

How can I send my all selected files?

I can do it with another technique every time when selecting a file with JavaScript hide that input and create new but I don't want that.

Possible duplicate of [Uploading multiple files using formData()](http://stackoverflow.com/questions/12989442/uploading-multiple-files-using-formdata) — Sᴀᴍ Onᴇᴌᴀ, Mar 20 '17 at 15:27
I'm not sure of your exact HTML layout and I don't how many items with the same `sell-images` ID you have but, in general terms, you cannot normally push stuff into file upload controls. I believe old Opera browser would allow it (after showing a prompt) but it isn't something you can rely on. — Álvaro González, Mar 20 '17 at 15:27

Sᴀᴍ Onᴇᴌᴀ · Answer 1 · 2017-04-07T16:13:20.997

0

..., but I need to send all 7 files. Is it possible??

Yes it is possible.

How can I send my all selected files?

Use the array syntax for multiple files. With the current implementation, the last file overwrites all previous entries in the formData object. So update this line:

formData.append("files", filesToUpload[i].file);

To this:

formData.append("files[]", filesToUpload[i].file);

That way all the files in the array filesToUpload will be sent, instead of just the last one.

See this demonstrated in this plunker.

edited Apr 07 '17 at 16:13

answered Mar 20 '17 at 16:53

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

In your example when i send post with my form in $_FILES show 1 array me need show all but i read about it and i think what i want do now impossible – Aram Mnatsakanyan Mar 21 '17 at 08:54
What do you want to do? – Sᴀᴍ Onᴇᴌᴀ Mar 21 '17 at 14:12

Javascript Add multiple file inputs

1 Answers1