Multi-Filr Uploader

Demo Link: https://chakor-demo-4.bubbleapps.io/version-test/multi-file_uploader

Editor Link: https://bubble.io/page?id=chakor-demo-4&test_plugin=1731399581613x633402689464565800_current&tab=Data&name=multi-file_uploader&type=page&subtab=Data+Types&type_id=memory_card

This plugin allows users to upload multiple files with real-time progress tracking and state management. It's designed to handle files of various types and sizes efficiently while providing granular feedback during the upload process. The plugin includes states to monitor file upload progress, errors, and file details, making it versatile and user-friendly for applications requiring robust file upload capabilities.

1. bubble (List of Text):
   Stores the URLs of successfully uploaded files in the Bubble database.

2. names (List of Text):
   Contains the names of the files being uploaded.

3. size (List of Text):
   Tracks files that exceeded the allowed size limit.

4. size_type (List of Text):
   Tracks files that exceeded both size and type constraints.

5. type (List of Text):
   Tracks files that are of unsupported extensions.

6. limit (List of Text):
   Tracks files that exceed the maximum allowed number of uploads.

7. dragover (Yes/No):
   Indicates whether a file is being dragged over the drop zone.

8. uploaded (Yes/No):
   Indicates whether all files have been successfully uploaded.

9. after_size (List of Numbers):
   Stores the sizes of uploaded files in kilobytes.

10. progress (Number):
    Reflects the overall progress of the file uploads as a percentage.

    Key Features:
    • Real-time upload progress tracking.
    • Supports multiple file uploads with size and type validation.
    • Granular state updates for better file management and error handling.
    • Drag-and-drop support with the dragover state.
    • Sequential upload ensures stable performance for large files.

    This plugin is ideal for applications that require robust file upload functionality with dynamic feedback, making it a reliable solution for modern web applications.

Instructions

• Drag and drop the Multi File Uploader element onto your Bubble page from the plugin elements tab.
• Configure its appearance and placement as desired.

In the property editor of the Multi File Uploader element, set the following options:

• Allowed File Types: Specify the extensions you want to allow (e.g., .jpg, .png, .pdf).
• Maximum File Size: Define the maximum allowed size for each file (in MB).
• Maximum Number of Files: Set the maximum number of files that can be uploaded in one go.

The plugin provides states to track the progress, validate uploads, and handle errors:

• Progress Tracking:
  Bind the progress state to a text element or progress bar to display the overall upload progress.
• Uploaded Files:
  Use the bubble state to access the URLs of the successfully uploaded files.
• Error States:
  Use the size, type, size_type, and limit states to show feedback for any files that failed validation.

The plugin comes with the saved event that triggers when all files are successfully uploaded:

1. Go to the Workflow Editor.
2. Create a new workflow: When Multi File Uploader's saved event is triggered.
3. Use the bubble state to perform actions like saving file URLs to your database, sending notifications, or updating UI components.

Enable the drag-and-drop feature by customizing the Dropzone UI of the uploader. Use the dragover state to indicate when a file is dragged over the drop zone.

• Use the names state to display the names of the uploaded files.
• Use the after_size state to show the size of each file in KB after upload.

• Display messages for unsupported files using the type state.
• Inform users of exceeded size or count limits using the size and limit states.

The plugin automatically updates the progress state during uploads. Link this state to visual elements like progress bars or percentage indicators to provide feedback to users.

1. Start File Upload:
   Trigger the file upload process when a button is clicked.
2. Display Progress:
   Bind the progress state to show real-time updates.
3. Handle Completion:
   After the saved event is triggered, use the bubble state to process uploaded files.

• Test the uploader with various file types and sizes to ensure proper validation.
• Use the error states to display helpful messages for a smooth user experience.
• If large files are used, ensure your app's database can handle the storage needs.

The plugin is now ready to use, providing seamless file uploads with granular progress and state management.