Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

171
Views
How can I display/edit an ActiveStorage S3 image in React/Javascript using Dropzone?

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!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!