How to Use the Multi-File Uploader Plugin
Demo Backend:
https://bubble.io/page?name=index&id=file-upload-by-type&test_plugin=1718792911239x174076142080753660_current&tab=tabs-1

Demo Frontend:
https://file-upload-by-type.bubbleapps.io/version-test

Add the Element to Your Page:

In the Bubble editor, drag the Multi-File Uploader element from the plugin panel to your desired location on the page.

Customize the Element:

Button Text:
Set the text that will appear on the upload button (e.g., “Upload Files”).

Drag Text:
Set the text that will appear when files are dragged over the upload button (e.g., “Drop files here”).

Allowed Extensions:
Specify the file extensions that are allowed for upload (e.g., “.jpg, .png, .pdf”).

User ID:
If needed, specify a user ID to associate with the uploaded files to make them private.

Styling Options:

Customize the appearance of the upload button using Bubble’s standard properties for background, dimensions, borders, font, etc.

Ensure the button fits well within your design by adjusting padding, margins, and other properties.

Uploading Files:

Click to Upload:
Click the upload button to open the file selection dialog.

Drag & Drop:
Drag files from your computer and drop them onto the upload button.

Monitor Upload Progress:

The plugin provides real-time updates on the upload progress, including the number of files uploaded and any errors encountered.

States and Their Information

The Multi-File Uploader plugin uses several states to provide real-time information about the upload process.

These states can be accessed and used within your Bubble workflows and elements.

isUploading (Boolean):

Description: Indicates whether files are currently being uploaded.
Usage: Use this state to show a loading spinner or disable other actions while files are being uploaded.
Example: When isUploading is true, show loading spinner.

isUploaded (Boolean):

Description: Indicates whether all selected files have been successfully uploaded.
Usage: Use this state to trigger actions or notifications once the upload is complete.
Example: When isUploaded is true, show success message.

errorMessages (List of Texts):

Description: Contains error messages for any files that failed to upload.
Usage: Display these messages to inform users about upload issues.
Example: Show errorMessages in a repeating group to list all errors.

uploadedFileNames (List of Texts):

Description: Contains the names of the files that have been successfully uploaded.
Usage: Display the names of uploaded files or use them in subsequent workflows.
Example: Show uploadedFileNames in a repeating group to list all uploaded files.

fileURLs (List of Texts):

Description: Contains the URLs of the files that have been successfully uploaded.
Usage: Use these URLs to display or link to the uploaded files.
Example: Show fileURLs in a repeating group to provide links to uploaded files.

uploadedFileCount (Text):

Description: Provides a count of the files that have been uploaded, formatted as “X of Y”.
Usage: Display the upload progress to users.
Example: Show uploadedFileCount to indicate progress like "3 of 5 files uploaded".

uploadedFileName (Text):

Description: Contains the name of the most recently uploaded file.
Usage: Display the name of the most recently uploaded file or use it in subsequent workflows.
Example: Show uploadedFileName to indicate the latest file uploaded.

Example Workflow

Trigger an Upload:

Add a workflow action to trigger the file input when the upload button is clicked.

Display Upload Progress:

Use the isUploading state to show a loading spinner while files are being uploaded.

Use the uploadedFileCount state to display the number of files uploaded.

Handle Upload Completion:

Use the isUploaded state to trigger actions or notifications once all files are uploaded.

Use the uploadedFileNames and fileURLs states to display or link to the uploaded files.

Display Errors:

Use the errorMessages state to show any errors encountered during the upload process.