CODEWITHSUNDEEP
javascriptjquery
Peter
Peter

Reputation: 804

upload and preview file before uploading replacing last image issue

I am trying to upload image and previewing it one by one but it replace last image. I want to keep adding up more and more images but only last image is showing in received $_FILES array

Keep all upload images in form and keep them previewing.

my code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="index.php" method="post" enctype="multipart/form-data">
    <input type="file" id="add-gallary" name="filecollections[]">
        <input type="submit" value="Submit">
        
    <div class="gallery"></div>

</form> 
<script>
$(function() {
var upload_count = 0;
    
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                // input.files.append(input.files[i]);


                reader.readAsDataURL(input.files[i]);
                upload_count++;
            }
        }

    };

    $('#add-gallary').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});
</script>

Upvotes: 0

Views: 77

Answers (1)

Always Helping
Always Helping

Reputation: 14570

The reason why only last images is getting uploaded is that you are storing the images in an array because you have single file upload input.

If you want upload multiple images you have previewer on form submit you would need to store them in array i have named imagesToUpload

Once you have all the images previwed and ready to submit the form with images you have selected and previewed you have loop forEach through that array imagesToUpload and append those file data to formData.

You will then this formData to your backend and upload all the images on backend using ajax request.

Run snippet below to see that array is using .push function to store all your images you have previewed.

$(function() {
  var upload_count = 0;

  //Store images in array
  var imagesToUpload = []

  var imagesPreview = function(input, placeToInsertImagePreview) {

    if (input.files) {
      var filesAmount = input.files.length;

      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();

        reader.onload = function(event) {
          $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
        }

        // input.files.append(input.files[i]);

        //Push images to array on preview                
        imagesToUpload.push(input.files[i])


        reader.readAsDataURL(input.files[i]);
        upload_count++;
      }
    }

  };

  $('#add-gallary').on('change', function() {
    imagesPreview(this, 'div.gallery');
    console.log(imagesToUpload)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="index.php" method="post" enctype="multipart/form-data">
  <input type="file" id="add-gallary" name="filecollections[]">
  <input type="submit" value="Submit">

  <div class="gallery"></div>

</form>

Upvotes: 1

Related Questions