How to upload multiple WAV files simultaneously using drag and drop with file type and size restrictions? Answered

• 

  A J

  • November 28, 2024 00:05

  Hey Boggan null, yes I believe both of the use-case is possible.

  • You can accept multiple files by adding a line of code in #38 script.

  fileInput.multiple = true;

  • I have shown the placement of the above line in the body section for reference (screenshot #1) and the result is shown in (screenshot #2)
  • And I believe if you are facing issue to view the drag and drop interface on the site, make sure you also include this line of code in the head section of the page, doing this should solve that issue as well.

  <link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />

  Hope this helps.

  

  Hey Boggan null, it took time to pull this off with the drag and drop builder. But finally I think, I have cracked both the use-cases.

  After the accept multiple file code that I gave you above in #38 memberscript, you can add this line.

  fileInput.accept = 'audio/mpeg';

  And you can replace the entire #40 memberscript with the following code.

  <!-- 💙 MEMBERSCRIPT #40 v0.1 💙 DRAG AND DROP FILE UPLOADER --> 
  <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script> 
  <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script> <script src="https://unpkg.com/filepond/dist/filepond.js"></script> 
  
  <script> FilePond.registerPlugin(FilePondPluginFileValidateSize); FilePond.registerPlugin(FilePondPluginFileValidateType); document.addEventListener('DOMContentLoaded', function() { 
  const inputElement = document.querySelector('input[type="file"]'); 
  const pond = FilePond.create(inputElement, { 
  credits: false, 
  name: 'fileToUpload', 
  storeAsFile: true, 
  allowFileSizeValidation: true, 
  maxTotalFileSize: '5MB', 
  labelMaxTotalFileSizeExceeded: 'Total File Size exceeds 5MB', 
  allowFileTypeValidation: true, 
  labelFileTypeNotAllowed: 'File must be of MP3 type' 
  }); 
  }); 
  </script>

  In my example, I have set the file type acceptable to be MP3 (audio/mpeg) and the file size to be at max 5MB. Feel free to change the type or size as per your requirement.

  After I set this up, this is how it works on the front-end.

  0
• 

  Boggan null

  • November 28, 2024 01:10

  Works bro!!!!! Awesome! 🥊🥊🥊

  0
• 

  Manuel Ogomigo

  • November 28, 2024 01:11

  have you tried tryflowdrive.com
  You can do all of that with no code 👀

  0

Please sign in to leave a comment.