Paste image from clipboard and upload?

Hey everybody

I often need to upload screenshots directly to my website. Instead of saving them to the harddisk and then selecting them with a traditional input type="upload", I’d love to just paste them from the clipboard.

Many years ago, I did a similar thing with the carrierwave gem and carrierwave-base64. I then simply displayed a traditional input type="text" field, and using a little bit of JavaScript, the content of the clipboard (an image) was converted to a Base64 string and insert into the text field. This worked pretty well back then, but it’s quite a while ago, and things may have changed meanwhile…

Because after 2 years of Rails-absence, I’m happy to be back - and I see that there’s ActiveStorage now! So I wonder whether I should switch to it - and whether it would be simple to implement the feature described above?

Thanks a lot. :blush: Josua

Active Storage does not have support for paste and upload. As for implementing it yourself…

There are two upload modes for Active Storage:

1 - Direct upload (which sends the file directly to S3, etc.): The best option, but would require you to rewrite the Direct Upload JS package, which won’t be easy.

2 - Upload to server (which then uploads to S3): Suboptimal, as this blocks a puma worker while upload is happening, but at least you would only need to implement a new service on the backend (based on S3Service probably) and some JS code to recognize a ‘paste’ and set the value in a hidden field.

Hey @josua, welcome back! That’d be nice to have that as a standard feature in the future. For now, something like Uppy should do the trick, haven’t used it personally just need something to capture the paste on the frontend. How to use Uppy with ActiveStorage (Example) | GoRails

Thank you both for your comments and additions.

Uppy seems pretty cool, but also a bit over-engineered for what I need.

For my earlier project a few years ago, I used this: GitHub - layerssss/paste.js: read image/text data from clipboard (cross-browser). Sadly it needs jQuery.