Upload image ajax duplicate the uploaded images unless the page is reloaded

Question

I am having a strange issue with ajax upload script part of a form loaded in a modal. Here is the example of the behavior:

Upload image 1

Things are OK

Upload image 2

Not OK. Uploads image 2 and 2 (duplicate image 2)

Upload image 3

Not OK. Uploads image 3 and 3 and 3 (duplicate image 3 twice)

An so on...

This is the HTML

<div class="col-md-6">
  <div class="form-group">
    <span class="input-group-btn">
    <span class="btn btn-info" onclick="$(this).parent().find('input[type=file]').click();" id="btn_face">Select Image</span>
    <input name="file" id="file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file"></span>
  </div>
</div>

And this is the script

$(document).ready(function(){
 $(document).on('change', '#file', function(){
  var name = document.getElementById("file").files[0].name;
  var form_data = new FormData();
  var ext = name.split('.').pop().toLowerCase();
  if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1) 
  {
   alert("Invalid Image File");
  }
  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("file").files[0]);
  var f = document.getElementById("file").files[0];
  var fsize = f.size||f.fileSize;
  if(fsize > 2000000)
  {
      $("#upload_msg").fadeTo(2000, 500).slideUp(500, function(){
            $("#upload_msg").alert('close');
        });
      $('#upload_msg').html('<div class="alert alert-danger">Image File Size is very big. Max size 1MB</div>');

  }
  else
  {
   form_data.append("file", document.getElementById('file').files[0]);
   $.ajax({
    url:"upload_image.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend:function(){
     $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
    },   
    success:function(data)
    {
     $('#uploaded_image').html(data);
     $("#file").attr("disabled", true);
     $('#btn_face').removeClass('btn btn-info').addClass('btn btn-default');
     $('#btn_face').html('Image Uploaded');
    }
   });
  }
 });
});

I have tried to disable the upload button after the first upload which worked, but as the upload itself is opened in a modal, as soon as I close the modal and open it again, the button becomes active.

I have also tried to assign onclick="javascript:window.location.reload()" to the close button of the modal, which works fine, but if the user before that actually submitted the form, on the reload it inserts the last record in the MySQL db.

I have tried to search for some information about similar behavior but with no luck.

Any help is appreciated.

Think you gotta clear your file input, please [check these answers](https://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery). Or maybe just remove the `multiple` attribute? — skobaljic, Mar 18 '20 at 08:58
try create a click handler for `Select Image'` button click and reset file input at using `$("#file").val('');` before `$(this).parent().find('input[type=file]').click();` — Muhammad Murad Haider, Mar 18 '20 at 09:10
@Shree, when I change it to ````$(document).off().on('change', '#file', function(){```` and if the use click close then the popup wouldn't show again — lStoilov, Mar 18 '20 at 09:38
@MuhammadMuradHaider, I have tried that, but it didn't work either. Still getting the images multiplied — lStoilov, Mar 18 '20 at 10:03
On ajax success just do: `$("#file").wrap('
').closest('form').get(0).reset(); $("#file").unwrap();` — skobaljic, Mar 18 '20 at 10:47
ok can be the issue with parallel async ajax calls. trying using `async:false` inside your ajax call and on ajax success just clear the file input control — Muhammad Murad Haider, Mar 18 '20 at 11:04

score 1 · Accepted Answer · answered Mar 18 '20 at 12:25

The solution

Thanks to Muhammad Murad Haider.

Setting the async:false in the Ajax call and cleaning the file input after success did the trick.

Here is the updated code

$.ajax({
    async:false,
    url:"upload_image.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend:function(){
     $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
    },   
    success:function(data)
    {

     $("#file").val('');
     $('#uploaded_image').html(data);
     $("#file").attr("disabled", true);
     $('#btn_face').removeClass('btn btn-info').addClass('btn btn-default');
     $('#btn_face').html('Image Uploaded');
    }
   });

Upload image ajax duplicate the uploaded images unless the page is reloaded

1 Answers1