Home > Software engineering >  How can I display/edit an ActiveStorage S3 image in React/Javascript using Dropzone?
How can I display/edit an ActiveStorage S3 image in React/Javascript using Dropzone?

Time:12-10

I'm currently using Ruby on Rails React Redux Dropzone for uploading images.

I have a form that allows you to attach images via Dropzone and upload them. The form will also show you a preview of your uploads in the React view.

Furthermore, I have successfully been able to use dropzone and activestorage to store my image uploads to S3.

However, the next step is to display those images in the same dropzone uploader when someone wants to edit the same form, which takes an array of Javascript File objects to display the images. My question is how should I go about doing this? Do I need to return a Blob from the Rails API, or can I some how use the Image URL? I'm a bit fuzzy here on how to proceed and would appreciate any guidance.

Thanks!

CodePudding user response:

dropzone is responsible to upload our image only

you just need to get the S3 object URL and display it in your form as a regular image

then put the Dropzone upload form after your image, so your user understand that it's a form to replace the existing image

so in your edit.html.erb view, get the image URLs from S3 first

<h3>Existing image:</h3>
<%= url_for(record.image) %>
# Dropzone form here

and attach the new image file in the update action

  • Related