Is it possible to get the file size from a MultiFileUploader (or from a custom state)?

Questions
2

I had this exact issue pretty recently, and I did not have any luck using the MultiFileUploader.

Instead, I ended up creating my own file uploader by using an HTML element and adding the following to create a multi file input:
<input type="file" id="input-id" multiple>

Adding “multiple” inside the element tags is what makes the input allow multiple files. You can then enforce a max amount of files and a max file size using JS inside of script tags in the same HTML. The tricky part is getting the files to Bubble storage though. I recommend using the fileupload API which you can see in this forum post. The HTML element could look something like this:

<input id="uploader" type="file" multiple>

<script>
    const FILEUPLOAD_URL = "https://your-app.bubbleapps.io/version-test/fileupload";
    const MAX_FILE_COUNT = 5;
    const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 MB

    const fileInput = document.getElementById("uploader");

    fileInput.onchange = () => {
        const validFiles = [...fileInput.files]
            .slice(0, MAX_FILE_COUNT)
            .filter(file => file.size <= MAX_FILE_SIZE);

        validFiles.forEach(file => {
            const reader = new FileReader();

            reader.onload = e => {
                const base64Content = e.target.result.split(",")[1];

                fetch(FILEUPLOAD_URL, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        name: file.name,
                        contents: base64Content,
                        private: true,
                        attach_to: "THING_UNIQUE_ID"
                    })
                })
                    .then(res => res.text())
                    .then(url => console.log("Uploaded:", url));
            };

            reader.readAsDataURL(file);
        });
    };
</script>

The file will only be private if you set private to true and provide a unique ID of a record to attach the file to.

Hope this helps!

2 Likes