Create DropzoneJS field widget for file/image fields

Nice to see here progress also.

Again i read file WIDGET (a new one) and i'm asking myself how we can combine multiple features like dropzone, cropping, inline metadata editing, browser and more together easily. I think we really should discuss because the current approach does not scale.

Media was about making it easy to have multiple media related modules integrate accross each other. The current widget situation is not satisfying.

Quick update here for anyone following along.

Entity browser + file entity now provides a entity browser widget that you can combine with a dropzone in an entity browser. As Miro said, when you start combining all the tools, you can't have a separate widget for everything, that doesn't really work.

It's a few more clicks but I think the UX is quite acceptable, and image cropping works through the edit browser, in case we can also go through the file add/edit forms after uploading, we could also make it part of the initial upload process.

Just taking ownership of this.

So, can I use dropzonejs and EB to upload several images and documents, then save them with required caption & name (image media bundle) and document title, number of pages and description (document bundle). This isn't clear if this is a WIP or if that functionality already exists and some assembly is required.

DropzoneJS provides a form element and two entity browser implementations for now. None of this provide the functionality you mentioned. I think that our best bet is to provide some kind of framework for that on Entity Browser side first.

Also, there is a similar discussion going on over #2635736: The entity browser widget generates media entities w/o required fields

There is an example in File entity browser, which implements something similar that @Berdir described in #6. It is using different (but very similar) formatter.

Should we call this "Won't fix" and suggest using EB + Dropzone instead?

The issue with EB + DZ as I see it and the reason I went want this functionality is because #2635736: The entity browser widget generates media entities w/o required fields hasn't landed.

Fixing tags.

Seems like this is moving forward in core, referencing #2115469

Sorry if this is off-topic, but I'm really confused. I installed the module following the procedure in the module description, but can't see how to use it on a node creation/edition form containing an image field.

The module description reads: "This module currently provide an element that can be used in forms", so I was assuming either the input file elements would be replaced by the dropzone UI, or there would be a choice to select another widget than Image on the Manage form display screen for my content type.

I tried to use entity browser and file entity but I drowned into dependencies problems (chaos tool suite to create/edit entity browsers or imagesLoaded / Masonry libraries for file entity) and am not even sure this is how this apparently simple use case should be addressed. Then I discovered this issue, implying that a widget has not been developed at this alpha stage...

I'd very much appreciate if someone can share the next step after installation, and maybe even include that on the module home page or start a documentation page!

You are right, there is no field widget implementation. The way to go is using entity browser. Documentation for that can be found here: https://drupal-media.gitbooks.io/drupal8-guide/ Hope this helps.

Thanks for the confirmation Primsi. I took more time to dig in this, given that dropzone now supports client-side resizing, a feature I'd like to use for my crowdsourcing project.

While I understand the potential and the feature-richness of the Entity browser integration, especially for reusing existing files, this exceeds my use case. And I didn't manage to create an entity browser to replace the default file input widget with a single, autoselect dropzone form element to allow users to upload multiple files without requiring additional 'Select entities' button/steps...

Is this field widget implementation still being considered or should this issue be set to closed (won't fix)?

I think this would be a cool feature for users who do not need to bother with an entity browser (or aren't using Media entities, although IMO everyone should) and just want a slightly better experience than clicking "Browse..." to fetch the image from their computer and allowing them to drag-and-drop it into the field.

Yes, sometimes we want just replace bundled widget with something like Dropzone.

When I looking to core's ImageWidget implementation it looks too complex.

We have image_image widget that bases on file_generic.
Inside file_generic we can see
managed_file element used as file input.

Also default widget have table of already added files, reordering, etc. It fully ajaxified.
If we want to replace standard widget we should respect all field settings(default value, alt, title fields, singe and multiple values and more)

Maybe someone can write some plan around this issue ?

I ended up here for exactly the same reason stated in #16. Just adding my voice.

I also am looking to use this for a replacement for the core image file widget, without having to go through entity browser. Is anyone working on that?

Ditto for #16

I was hoping this module would provide just that: a form field widget to be used in entity-forms and custom forms.

So we have a Webform DropzoneJS. Can this code approach be mimiced into adding a form field widget to image/file fields?

+1 for Webform DropzoneJs approach.

This issue has been around for 7 years With almost 40 followers.

Can a maintainer comment on the status of this issue? Should we assume it’s a “won’t fix” request due to the complexity? We’d all love to know so we can move forward with our Drupal lives ;)

#25

Ditto for #16

#26

I was hoping this module would provide just that: a form field widget to be used in entity-forms and custom forms.

#27

So we have a Webform DropzoneJS. Can this code approach be mimiced into adding a form field widget to image/file fields?

#28

+1 for Webform DropzoneJs approach.

#29

Can a maintainer comment on the status of this issue? Should we assume it’s a “won’t fix” request due to the complexity? We’d all love to know so we can move forward with our Drupal lives ;)

I'm not a maintainer, but I will comment on the status of this issue. It's good there's a lot of support for this feature. To move things forward, an offer to help or a contribution of code would be welcomed.

I'd also like to add support for this issue, because there are simply a lot of use cases where you don't want or need an entity browser integration. For site admins entity browser is useful but for public facing forms they're not helpful. Mobile usability is also challenging.

For instance: uploading a profile picture on registration. A photo field on a comment form. File uploads on contact forms (d10 especially), etc.

In d7 I used file_resup on every single site but it's not working yet for later versions and this module seems like the only available alternative, and I'm sure many people install this and go right for the field formatter settings and are left wondering where the Dropzone option is. That sure was my experience, and that was after I spent a lot of time getting the right libraries to load. So +1 from me :)

Should anyone know of a drag and drop/better looking upload alternative I'd love to know!

https://www.drupal.org/project/file_resup is now at a Beta release for D10 and facilitates a Dropzone style drag and drop UI (and some other nice features). The module could do with some testing and review.

This issue has been live for over 7 years now: it's probably fair to say that the desired functionality will never be delivered in the DropzoneJS module.

https://www.drupal.org/project/file_uploader_uppy is another module that has a field widget for file/image fields.

I've created yet another image uploading module using the filepond library that provides a drag & drop image field widget among many other things for anyone interested. https://www.drupal.org/project/filepond