Skip to content Skip to sidebar Skip to footer
Home / Forms / Html / Javascript / Jquery / Submit

How To Enable Submit Button Until Condition In A Multiple File Uploader?

Post a Comment
I'm doing a WebApp where people will upload 2 images which I need to pass through a python code. For this reason, I only want to let them send it when 2 images are uploaded. I've b

Solution 1:

You can hook into the upload.cachedFileArray from the upload object to check the array length to verify if 2 files have been selected for upload. This is checked via a toggle() function that is bound by the window event listenersfileUploadWithPreview:imageSelected and fileUploadWithPreview:imageDelete, so if an image is removed after being selected, you can still enforce the rule of 2:

$(document).ready(function() {

});

var toggle = function() {
  //console.log(upload.cachedFileArray.length);if (upload.cachedFileArray.length == 2) {
    $('input:submit').attr('disabled', false);
  } else {
    $('input:submit').attr('disabled', true);
  }
};

window.addEventListener('fileUploadWithPreview:imageSelected', function(e) {
  // optionally you could pass the length into the toggle function as a param// console.log(e.detail.cachedFileArray.length);toggle();
});

window.addEventListener('fileUploadWithPreview:imageDeleted', function(e) {
  // optionally you could pass the length into the toggle function as a param// console.log(e.detail.cachedFileArray.length);toggle();
});
<!DOCTYPE html><html><head><linkrel="stylesheet"type="text/css"href="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.css"></head><body><!-- Uploader --><divclass="custom-file-container"data-upload-id="myImage"><label>Upload your images <ahref="javascript:void(0)"class="custom-file-container__image-clear"title="Clear Image">&times;</a></label><labelclass="custom-file-container__custom-file"><formid="upload-form"action="{{url_for('upload')}}"method="POST"enctype="multipart/form-data"><inputtype="file"class="custom-file-container__custom-file__custom-file-input"accept="image/*"aria-label="Choose File"multiple><inputtype="hidden"name="MAX_FILE_SIZE"value="10485760" /><spanclass="custom-file-container__custom-file__custom-file-control"></span></label><divclass="custom-file-container__image-preview"></div></div><inputtype="submit"name="send"disabled/></div><scriptsrc="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.js"></script><script>var upload = newFileUploadWithPreview('myImage', {
      showDeleteButtonOnImages: true,
      text: {
        chooseFile: 'Nom del fitxer',
        browse: 'Examina'
      }
    });
  </script><scriptsrc="https://code.jquery.com/jquery-1.9.1.min.js"></script></body></html>

Post a Comment for "How To Enable Submit Button Until Condition In A Multiple File Uploader?"