How to preserve old files after new file browse click in multiple file uploader?

Question

I've made a file upload with file previews using html5+file reader and it works fine except that old files the user selected gets destroyed from input file field and if the user select in a new single browse click.

Here's the js fiddle https://jsfiddle.net/sco3pq3b/

html

<p> UPLOAD  </p>
<input type="file" multiple="yes" name="photo[]" id="photos">
<div id="preview"></div>

js

$("#photos").change(function(){

    var fileList = this.files;
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;

    for(var i = 0; i < fileList.length; i++){
        if (regex.test(fileList[0].name.toLowerCase())) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#preview').append('<div class="imgLinkWrap"><a class="fancybox" href="' + e.target.result +'">'+fileList[0].name.toLowerCase()+'</a></div>');
            }
            console.log(fileList[i]);
            reader.readAsDataURL(fileList[i]);

        } else {
            alert(file[0].name + " is not a valid image file.");
            $('#preview').html("");
            return false;
        }
    }
});

Is there anyway to preserve the old files after a new browse file click without using any plugin or ajax?

Ahmed Abdelraouf · Answer 1 · 2015-12-31T17:59:02.127

You want to preserve old files , add them in global variable

  var fileList //here
    $("#photos").change(function(){
 alert(fileList); //use them 
         fileList = this.files;
         alert(fileList);

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;

        for(var i = 0; i < fileList.length; i++){
            if (regex.test(fileList[0].name.toLowerCase())) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#preview').append('<div class="imgLinkWrap"><a class="fancybox" href="' + e.target.result +'">'+fileList[0].name.toLowerCase()+'</a></div>');
                }
                console.log(fileList[i]);
                reader.readAsDataURL(fileList[i]);

            } else {
                alert(file[0].name + " is not a valid image file.");
                $('#preview').html("");
                return false;
            }
        }
    });

Edit :

As you need them after the form submitting you can use HTML5 Local Storage it stores the data with no expiration date

  // Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

If you want to store the data for only one session. The data is deleted when the user closes the specific browser tab use The sessionStorage Object

more about HTML5 Local Storage and sessionStorage and here :http://www.w3schools.com/html/html5_webstorage.asp

it didn't work. After submitting the form It only sent me the last select files. — user3407278, Dec 31 '15 at 11:49
try local strage http://www.w3schools.com/html/html5_webstorage.asp // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); store the files list and retrieve them when ever you want — Ahmed Abdelraouf, Dec 31 '15 at 12:01

score 0 · Answer 2 · answered Dec 31 '15 at 11:36

You can store the files uploaded in a local array of files that will be preserved. This is how I modified your js and this seems to work fine.

var fileList=[];
$("#photos").change(function(){
    fileList.push.apply(fileList,this.files); // appends files objects to local array
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;

   for(var i = 0; i < fileList.length; i++){
       if (regex.test(fileList[0].name.toLowerCase())) {
           var reader = new FileReader();

           reader.onload = function (e) {
               $('#preview').append('<div class="imgLinkWrap"><a class="fancybox" href="' + e.target.result +'">'+fileList[0].name.toLowerCase()+'</a></div>');
           }
           console.log(fileList[i]);
           reader.readAsDataURL(fileList[i]);

       } else {
           alert(file[0].name + " is not a valid image file.");
           $('#preview').html("");
           return false;
       }
   }
});

it didn't work. After submitting the form It only sent me the last select files. — user3407278, Dec 31 '15 at 11:49

How to preserve old files after new file browse click in multiple file uploader?

2 Answers2