Common Use Cases

This section showcases real-world examples where the Powerful File Uploader with Dropzone becomes a critical part of the app experience. Each scenario includes context, recommended settings, and UI logic ideas to help you implement the component effectively.

🧾 Use Case 1: Identity verification in a registration flow

App Type: Government services, fintech, or transportation apps.

Goal: Users must upload a photo of their ID and their driver’s license during account registration or profile verification.

Setup:

  • Set maximum number of files to 2.

  • Limit file size to 500 KB per file.

  • Use accepted extensions like .jpg, .jpeg, .png, .pdf.

  • In the mainColor parameter, add a conditional: If the number of items in receivedFilesInfo is equal to 2 then use grey color else use the brand color

    This visually disables the dropzone once the user has uploaded the 2 required documents.

Why it helps: Prevents users from uploading more than needed, keeps file size in check, and maintains a smooth UI while waiting for file review.

🎓 Use Case 2: Homework submission in an e-learning app

App Type: Education platforms or virtual classrooms.

Goal: Allow students to upload 1–3 files (documents, presentations, or videos) as their assignment submission.

Recommended Setup:

  • Maximum files: 3

  • Accepted file types: .pdf, .mp4, .jpg, .png

  • Max file size: up to 10 MB per file.

  • Files are stored as metadata (fileInfo) in an AppState list.

  • You can style the uploader to match the course's brand colors.

📺 Real-time file preview before confirmation

To enhance usability and reduce accidental uploads, you can allow students to preview each file after uploading but before confirming submission.

How to implement:

  1. onFileReceivedCustomAction When the file is dropped or selected:

    • Open a Custom Dialog and pass the fileInfo as a parameter.

  2. Inside the custom dialog:

    • The modal should be Non Dismissible (can't be closed by clicking outside).

    • Add a conditional builder inside the custom dialog:

      • If fileInfo > data structure field > mimeType includes "image/", show the image using an photo widget with the tempUrl.

      • If mimeType includes "video/", use a video player widget with the tempUrl.

      • If mimeType includes "pdf", use a PDF viewer widget (or link to open in new tab).

    • Show basic file metadata: name, size, extension.

    • Include two buttons:

      • Cancel → remove this file from the AppState list ( remove from list > fileInfo passed as parameter to the custom dialog )

      • Confirm → close the modal without changing the list.

  3. Final Submission Button:

    • On tap, run a Loop over the list of fileInfo.

      • Use getActualFileFromTempUrl to get each file in bytes.

      • Upload to storage (Firebase, Supabase, etc.).

    • After all uploads, show a success message and clear the list.

Why it helps:

  • Prevents users from submitting incorrect files.

  • Keeps the UI light by delaying actual file loading until needed.

  • Provides a professional experience with visual confirmation.

🏥 Use Case 3: Medical report upload in a health portal

App Type: Health record apps or patient portals.

Goal: Patients can upload lab results, prescriptions, or scans for review by a doctor.

Setup:

  • Accepted extensions: pdf

  • Limit: up to 5 files, each up to 3 MB.

  • Use tempUrl to preview the file inside a PDF Viewer widget, but make sure the widget is only visible when AppState > Powerful file uploader with dropzone > receivedFilesInfo is not empty. This conditional visibility is required—otherwise, your app may crash if the widget tries to load a file before the user uploads anything.

Why it helps: Reduces backend storage and processing if the user uploads the wrong file, and gives a fast preview experience without draining memory.

📦 Use Case 4: Image upload grid for a virtual store (custom layout preview)

This is a common scenario for apps that allow users to upload multiple images, such as virtual stores or marketplaces where users must upload product photos. In this case, the goal is to create a custom image grid preview instead of using the built-in list component provided by the uploader.

🔧 Configuration:

  • Set the fileInListComponent parameter to empty. This will hide the default list UI of uploaded files, but files will still be stored in the AppState (receivedFilesInfo).

  • Configure the uploader to accept only JPG and PNG files.

  • Use a Wrap or Staggered View layout to display a custom image grid.

  • Inside the layout, use Generate Children From Variable and select:

    AppState > Powerful file uploader with dropzone > receivedFilesInfo

This will create a dynamic image preview grid as the user uploads files.

🧱 Each image item should:

  • Be a Stack widget.

  • Show the uploaded image using its tempUrl as the background image.

  • Include a delete icon positioned over the image, which when pressed:

    • Removes the image from the list in AppState using "Remove item from list".

    • The UI updates immediately, giving the user full control over image management.

⚠️ Important Platform Limitation:

This preview method does not work on iOS due to how iOS restricts access to temporary file locations. On iOS, the tempUrl cannot be used to render images or files. To support iOS users, you have two options:

  1. Use Conditional Visibility:

    • If the user is on iOS, show the default uploader UI with fileInListComponent set.

    • If not, show your custom preview layout.

  2. Alternative for iOS with external file handling:

    • Set userHandleUploadExternally to true.

    • In the onFileReceivedCustomAction callback, use the uploadedFile parameter (actual file in bytes).

    • Manually store each uploaded image in a Page State List of uploaded files.

    • Use that list to render your custom image grid.

    • However, be cautious: storing large images in memory may slow down your app. Keep the image size very small (e.g., <200KB) to avoid performance issues.

✅ Benefits:

  • Full control over how uploaded images are presented.

  • Ideal for marketplaces, e-commerce, real estate, or any product gallery workflow.

  • Seamless user experience when implemented in web or Android environments.

📁 Use Case 5: Internal document upload in a team management app

App Type: HR or intranet systems.

Goal: Employees can attach PDF contracts, NDAs, or timesheets.

Setup:

  • Only accept PDFs.

  • Set file size limit to 2 MB.

  • Show a “Successfully attached” toast after each upload.

Why it helps: Simplifies secure doc handling while keeping the interface snappy.

PreviousgetActualFileFromTempUrl error codesNextFAQs

Last updated