Converting File Input to Dropzone

You can convert any file field (single AND multi) in a Bootstrap 4 Form to a Dropzone.

Open the page containing your Bootsrap 4 Form with a File Field:

Select the file input, then click the Make Dropzone button:

And you are done. Your file input has been converted to Dropzone:

You don’t need to change anything in the Server Action, attached to this form. It will work with the settings applied for the file input :slight_smile:


Love this new dropzone component

You knew the would be a BUT didn’t you :grinning:

Using the old file upload it was possible to paste the web location of an image into the path and it would be uploaded. (doesn’t work in chrome due to a chrome problem, fine in all other browsers)

With the dropzone component you can still do this by clicking to uplood as with the old component but would it be possible to add the ‘drop from web address’ ability to dropzone?
That would take it from great to awesome!

You can still do this by clicking the upload area rather than dragging the images into the area.

Edit: It (Wappler) is awesome.


I guess its for single File Upload!?

Freddy, you can convert single and multi upload file inputs to dropzone…

1 Like

Thanks @ben , I know it can be done by clicking, just thought it would be nice to also work by dragging.

The project I have just finished requires that addition of several thousand images via the customers admin panel. As no API is available for the images they have to be taken from the suppliers websites manually which is done via a standard file selector and using the address link to save having to download the images.
Being able to also drop an image directly from another site would be a massive time saver.
Guess I am being a bit selfish with that one, i have no expectation for it happening but still think it would be awesome if it could be done