Dropzone Edit

A dropzone component that accepts multiple files via drag and drop.

Examples

Installation


  rails generate shadcn-ui dropzone

Usage

<%= render_dropzone %>

The Dropzone component introduces:

  • app/helpers/components/dropzone_helper.rb
  • app/views/components/ui/_dropzone.html.erb
  • app/javascript/controllers/ui/dropzone_controller.js

The method render_dropzone defined in app/helpers/components/dropzone_helper.rb will render the dropzone widget that is bound to the Stimulus controller. Upon triggering the file dialog or dragging and dropping files, the controller will delegate the files individually to a function, uploadFile. It is up to you to define what to do when a a file is to be uploaded.

To implement fully, edit the uploadFile function in app/javascript/controllers/ui/dropzone_controller.js. This function is called for each file that is to be uploaded. The function is passed the file object.

If you try the example component, you will see that it is logging the file object to the console.