Paste image data or drag drop into Trix editor

[wakproductions]

I would like the ability to drag and drop or copy and paste raw images directly into the editor. Currently, you have to go through the media picker and upload a file, which can be a bit time consuming if you are working with screenshots.

I think this feature can easily be done by hooking into the trix-file-accept event provided by Trix. I have tested that this approach works by adding a handler for it in app/views/spina/admin/parts/texts/_form.html.erb like this: data-action="media-picker:done->trix#insertAttachment trix-file-accept->trix#fileAccept"

Then in the trix_controller.js I have a

fileAccept(event) {
      console.log('file dropped or pasted', event)

    const attachment = event.file;
    if(attachment.file) {
      // TODO do processing of file upload and insert
    }
}

Now I'm not exactly sure of the best means of implementation here. You can send the file to the ImagesController#create path using an async JS request from this code, but the return type of that would have to be modified to handle where the request is coming from. I'm thinking about having it request a JSON response from that endpoint, which would contain everything it needs to fire a media-picker:done event, which will paste the newly uploaded image into the Trix editor.

I'd love to have your feedback on this idea and whether the approach I've proposed sounds like a sound technical solution. Thanks!

[Bramjetten]

I like it :)

I think we could add a separate controller for this. Also, we should think about where to put these newly added images. Perhaps we should add them to a dedicated folder in the media library, but I'm not sure about that. What do you think?

[wakproductions]

Awesome. I am working on this and will have something soon.

I think it's fine to have them upload in the top level of the media library (no folder). We can add a setting in the config if the user wants to specify a specific media folder for these copy/paste type of uploads.

[wakproductions]

All ready #1278