0

I want to ask a question regarding <input type="file" multiple>. For example a user selects 3 images at one time and if he wishes to select 2 more images before upload to add with last 3 images but it is not happening when a user selects last 2 images before upload the first 3 images gets removed from the file list and when user will upload images only last 2 images will be uploaded why is this happening. please help me. how to solve this problem.

Rahil Wazir
  • 10,007
  • 11
  • 42
  • 64
Aisha
  • 257
  • 1
  • 8
  • 24
  • 1
    That's the browser-set behaviour and there's nothing you can do about it. If you have a dynamic number of uploads, perhaps you should make dynamic number of input fields, each for one image. – Shomz Mar 31 '14 at 10:04
  • may be something in your code. – bansi Mar 31 '14 at 10:04
  • 3
    You could use a HTML5 uploader and "stash" the images already selected, like in [this example](https://yuilibrary.com/yui/docs/uploader/uploader-multiple.html). – Daniel W. Mar 31 '14 at 10:06
  • You could instantly upload the selected files via ajax. – René Roth Mar 31 '14 at 10:06
  • @bansi u are asking for my code? – Aisha Mar 31 '14 at 10:07
  • @RenéRoth how is it possible thru ajax? – Aisha Mar 31 '14 at 10:10
  • Check out the Link @DanFromGermany provided! – René Roth Mar 31 '14 at 10:11
  • @DanFromGermany can u please give me some other example for stash? – Aisha Mar 31 '14 at 10:11
  • @user here: https://yuilibrary.com/yui/docs/uploader/uploader-multiple.html and here: https://www.google.com/search?q=multiple+file+upload+example+ajax – Daniel W. Mar 31 '14 at 10:13
  • ok thanks alot @DanFromGermany for your help. i will check your given link. i hope it will work. is it necessary to use flash or ajax to keep file list history before upload? – Aisha Mar 31 '14 at 10:16
  • @user3456241 flash is not necessary but HTML5/Javascript/Ajax must be available/enabled – Daniel W. Mar 31 '14 at 10:31
  • ok thats great i am using html5 and jquery i have to use only javascript and ajax. thanks alot @DanFromGermany for your help. i have decided to pass an array thru ajax. – Aisha Mar 31 '14 at 10:42
  • @DanFromGermany i used ajax and formdata to upload files but its still not working my problem is still there. – Aisha Apr 03 '14 at 17:06

2 Answers2

1

It is the default behavior of the html file input tag. It will replace the previous selected files every time on every selection. Either you can use the formdata into the html and store the files into the form data on .onchange event of browse

Alok Nath
  • 141
  • 1
  • 6
  • u mean to say that ajax is not the solution of this problem? can u please provide me any link for this formdata solution? – Aisha Mar 31 '14 at 16:37
  • i used ajax on .onChange event but its not working the default behavior its still there. – Aisha Apr 03 '14 at 17:07
0

I have face same problem like you

now i have found solution for that

 <input type="file" id="attachfile" name="replyFiles" multiple> <!--File Element for multiple intput-->
 <div id="#filelist"></div>
 <script>
    var selDiv = "";
    var storedFiles = []; //store the object of the all files

    document.addEventListener("DOMContentLoaded", init, false); 

    function init() {
       //To add the change listener on over file element
       document.querySelector('#attachfile').addEventListener('change', handleFileSelect, false);
       //allocate division where you want to print file name
       selDiv = document.querySelector("#filelist");
    }

    //function to handle the file select listenere
    function handleFileSelect(e) {
       //to check that even single file is selected or not
       if(!e.target.files) return;      

       //for clear the value of the selDiv
       selDiv.innerHTML = "";

       //get the array of file object in files variable
       var files = e.target.files;
       var filesArr = Array.prototype.slice.call(files);

       //print if any file is selected previosly 
       for(var i=0;i<storedFiles.length;i++)
       {
           selDiv.innerHTML += "<div class='filename'> <span> " + storedFiles[i].name + "</span></div>";
       }
       filesArr.forEach(function(f) {
           //add new selected files into the array list
           storedFiles.push(f);
           //print new selected files into the given division
           selDiv.innerHTML += "<div class='filename'> <span> " + f.name + "</span></div>";
       });

       //store the array of file in our element this is send to other page by form submit
       $("input[name=replyfiles]").val(storedFiles);
 }
 </script>
Uday A. Navapara
  • 1,237
  • 5
  • 20
  • 40