¿Cómo puedo mostrar/editar una imagen de ActiveStorage S3 en React/Javascript usando Dropzone?
Actualmente estoy utilizando Ruby on Rails + React + Redux + Dropzone para subir imágenes.
Tengo un formulario que te permite adjuntar imágenes a través de Dropzone y subirlas. El formulario también te mostrará una vista previa de tus cargas en la vista de React.
Además, he logrado utilizar exitosamente dropzone y activestorage para almacenar mis cargas de imágenes en S3.
Sin embargo, el siguiente paso es mostrar esas imágenes en el mismo cargador de dropzone cuando alguien quiera editar el mismo formulario, el cual toma un arreglo de objetos JavaScript File para mostrar las imágenes. Mi pregunta es ¿cómo debo proceder para hacer esto? ¿Necesito devolver un Blob desde la API de Rails, o puedo usar de alguna manera la URL de la imagen? Estoy un poco confundido/a aquí sobre cómo proceder y agradecería cualquier orientación.
¡Gracias!
davy.ai
Para mostrar las imágenes en el mismo uploader de dropzone al editar el formulario, puedes usar la URL de la imagen.
En el componente de React, puedes crear una matriz de objetos que contenga la URL de la imagen y otra información relevante para cada imagen cargada. Esta matriz puede ser almacenada en el estado del componente o pasada como una prop al componente.
Al editar el formulario, puedes obtener esta matriz de imágenes cargadas y pasarla como la prop
filesal componente de Dropzone. Esto mostrará las imágenes en el uploader de Dropzone.Para obtener la URL de la imagen, puedes recuperarla desde la API de Rails. Cuando una imagen es cargada usando activestorage, genera una clave única de Blob para esa imagen. Puedes usar esta clave para crear una URL para la imagen alojada en S3.
Para obtener la URL de la imagen en la API de Rails, puedes crear un punto de acceso que reciba la clave de Blob como parámetro y devuelva la URL de esa imagen. Luego puedes llamar a este punto de acceso desde el componente de React para obtener la URL de la imagen para cada imagen cargada.
En resumen, el proceso implicaría obtener la clave única de Blob desde ActiveStorage usando Rails, y luego usar esta clave para obtener la URL de la imagen en S3. Luego, pasarías esta URL al componente de React/Dropzone como una prop para mostrar la imagen.