DropZone File Uploader

Anyone done any additions to the DropZone File Uploader component ?

Id like to be able to use more than one on a page for example but when I do - the second (or more) just wont not trigger events (although they do work in terms of actual uploading) - I assume its to do to the way event handlers are bound in each.

I’m also probably going to property the targeted event so that could be configured per instance.

Just wanted to see if anyone had tackled anything like this before I get my fingers dirty :wink:


Hi @Haydn.Haynes ,

The event refresh is handled in frontend.js with the following:

Dropzone.forElement(“.file_upload”).on(“successmultiple”, function(files) {

You could add an additional setting in main.js to give you a choice over events and use that as a variable in frontend so you can pick per widget the event you fire instead of duplicating the code and fixing directly.

I have personally used multiple on a page before but they have all fed refreshing the same list and only upload into different relationships so I haven’t seen the behaviour you describe. I can speak to some of our project teams and find any examples of some other modifications to the widget as I believe there have been a couple if it helps?


@carl.robinson thanks for the reply - actually I’ve already done the selectable event trigger part so I’m all good there.

Since you say you have used multiples instances on a page - I will have a further “play” as this is exactly what I want to do and seem (so far) to have no joy in achieving.

It does “work” in so much I can upload files but I just cannot get subsequent page instances to actually trigger events (even the out of the box netcall version - so its not something I have broken in my version).

Morning Haydn, this is likely because the widget isn’t being given a unique id and as such the events will be firing twice against the first instance. Let me review and I’ll come back to you.

@adam.mills no problem - much appreciated.

No rush - I haven’t had a chance to circle back to it yet :wink:

Morning Haydn,

I have a new version that will now support both Event Action Selection (E1 - E10) and Support Multiple page instances. It was, as I suspected, the action was being called against the class name rather than a unique id. I’ve used the unique widget.cell_id to add a unique ID to the widget and hang the event from that.

I will have it uploaded to the AppShare before the end of the day.

OK excellent - saves me a job then :wink:

Thanks very much.

New version looks good - so thanks for that. Took a little while to fold in our UI changes (minor ish) but now works great and as expected.

Thank you for the update Haydn,

Are they UI changes that would benefit the main release, if so please share via email and we can review.

Many Thanks

An updated version of the DropZone widget is now available on AppShare.

  • Set Event Action to be called on upload success. (Default E1)
    Can be used to automatically refresh a list or list/edit widget with related files.
  • Now supports multiple instances on one page.
  • Create 22.3 compatible.
  • Set custom font awesome icon. (Default: Cloud Upload Icon)
  • Optional rounded corners. (Default: Off)
  • Change background colour. (Default: White)

1 Like