Question

I have a form that is using .change() and .submit() to upload a photo as soon as a user selects one. I’m now trying to implement a disabled on the input file after the submit() has started to avoid multiple uploads at the same time.

HTML:

  <form action="includes/photos.php" id="joinPhotoUploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="file"><br>
  </form>

JQUERY:

$('input#file').change(function() {
    $('form#joinPhotoUploadForm').submit();
    $('input#file').prop('disabled', true);     // Prevent Multiple Files Uploads
  }
});

The catch is under IE only the input#file is disabled before the .submit() starts on the second upload onwards.

Is there a way to prevent the disabled from occuring until the .submit() has started?

Is there another way to achieve this? something else I could disable? Could I unbind the .change()? Note: the disable is enabled later (after ajax return successfully).

thankyou

Answer 1

You need to prevent the form from submitting again if the file input is disabled. the second eventListener will do that for you.

$('input#file').change(function() {
    $('form#joinPhotoUploadForm').submit();
    $('input#file').prop('disabled', true);     // Disable to Prevent Multiple Files Uploads
});

$("#joinPhotoUploadForm").submit(function(e) {
  if ($(this).find("#file").is(":disabled")) {
    e.preventDefault();
  }
});