Installation

🎉 Thanks for Getting the Powerful File Uploader with Dropzone!

Ready to make it truly yours? Let’s customize it to fit your exact needs, fast, flexible, and fully under your control.

First things first!

📦 Insert the Component

Once the library is added to your project, you'll find a new section inside FlutterFlow when you try to insert a new widget/component:

Components and custom widgets imported from library projects

Here, you’ll see multiple widgets and components listed. From this list, the only one you need to insert into your canvas is:

🔹 fileUploaderMainComponent (It usually appears first in the list)

Make sure the initial expansion is compatible with your layout

⚠️ Heads up! The component auto-expands to fit its container. In some layouts, this might cause a blank screen. If that happens, just switch to the default expansion mode.

🔧 After Inserting the Widget

Once you’ve placed the fileUploaderMainComponent on your canvas, you might notice… nothing shows up. No dropzone label, no file list, nothing.

But don’t worry, that’s totally normal!

🧩 Modular and Fully Customizable

The Powerful File Uploader is built with a modular structure. This means you can design and insert your own components on top of the dropzone and file list, so the uploader looks and feels exactly how you want.

That flexibility allows you to reuse the same core component in multiple scenarios, with completely different layouts. A true all-in-one solution! 💪

🎁 Ready-Made Components Included

Of course, we understand that not everyone wants to build UI from scratch, don't worry, we’ve got you covered. We’ve included pre-designed, customizable widgets for:

• DropzoneContent

• fileInList

All you need to do is connect them!

🧩 Connecting the Dropzone Content

• Select the dropzoneContent parameter on the main uploader widget.

• A list of available components will appear.

• In the search bar, type: Powerful File Uploader

• You’ll see a few components with the label Power File Uploader with Dropzone.

• Choose the one called dropzoneContent to use the included UI for the dropzone area.

⚙️ It needs a bit of extra help

Once connected, this component will ask for two required sub-arguments. Don’t worry, they’re already available:

• dropzoneIsActive: lets the component react when the user hovers or drags files over it

• fileIsLoading: shows a loading animation while a file is being uploaded

You just have to connect each one by picking them from the Widget Builder Parameters list. They’ll have the exact same name, so it’s super easy!

🧩 How to connect the file list component

1. Select the fileInListComponent argument on the main uploader widget.

2. In the list of available components, search for: Powerful File Uploader

3. Look for the one named fileInList — you’ll recognize it by the label (Power File Uploader with Dropzone)

4. Select it to use the default UI for each uploaded file in the list.

⚙️ It needs one input: fileInfo

Once you connect the fileInList component, you’ll see it requires a single argument called fileInfo.

This is a special data type already included with the library. It contains everything you need to show each file properly:

• File name

• File size

• MIME type

• File extension

• A temporary local URL or reference — this is what allows the file to be previewed and later uploaded to a storage

You’ll find fileInfo in the Widget Builder Parameters list when connecting the component. Just select it and you’re good to go!