Multi file uploader file type rstrictions

Questions
1

I cannot see a way to use a multi file uploader tò allow user tò upload only videos, Is there any way or Plan to add allowed mine type on multi file uploader?

2

Maybe this helps: Restrict upload file extensions - Need help - Bubble Forum

3

Thank you very much. Unfortunately, I’ve already seen that solution, but it doesn’t quite fit my needs. It requires uploading files and then verifying their validity, which can be frustrating for large files. I’m surprised that there isn’t a way to filter files before uploading, similar to using <input type="file" accept="video/mp4"> in HTML, so that users can select the right files before uploading them.

4

I have a solution for file uploader (not tested on multi):

  1. Put an id on your file uploader (in this example is “restrictedInput”)
  2. Put a html element on your page
    3)put this script on html element:
<script>
let intervalId = setInterval(function() {
const acceptedTypes = ".pdf"; 
  const inputElement = document.getElementById("restrictedInput").querySelector("input");
  if (!inputElement.getAttribute("accept") || inputElement.getAttribute("accept") !== acceptedTypes) {
    inputElement.setAttribute("accept", acceptedTypes);
  } else {
    clearInterval(intervalId);
  }
}, 200);
</script>

If you use it for more than one file uploader in your project you have to create one html element for each file uploader and put this function on each. You also have to change the interval variable name, in this example is “intervalId” that is at start “let intervalId = setInterval” and at the end “clearInterval(intervalId);” you should have one html element for each input you want to restrict and each html element with this function must have a different interval variable name.

Note that this function is executed each 200ms (the time at the end) until the input has changed value, so if you have the fileuploader hidden or in a popup it will be no able to change nothing until the popup/file uploader show up and will continue running each 200ms, in that case you might want to increase this value to 1000 (1s).

Here is the editor sample:

and here the preview:

5

I found a simple solution to set file types for the Dropzone uploader.

After trying several approaches, this one finally worked for me. Here’s a custom code snippet that works for the Multi-FileUploader - Dropzone.

Simply add this to your HTML element:

<script>
  document.addEventListener('click', function (event) {
    // Check if the clicked element is the uploader
    if (event.target.matches('.dz-hidden-input')) {
      // Reapply the 'accept' attribute each time the uploader is clicked
      event.target.setAttribute('accept', '.pdf,.docx');
    }
  });
</script>