¿Cómo usar JQuery-File-Upload para subir varias imágenes en una página durante la creación de la publicación?

Question

Me di cuenta de que no hay una solución que use jQuery-File-Upload y Carrierwave o Dragonfly para hacer que la capacidad en una página al crear publicaciones para agregar imágenes múltiples. Tengo dos modelos, una publicación con muchas imágenes. Me gustaría cargar la imagen inmediatamente después de agregarla y tengo la opción de cancelarla antes de guardar la publicación completa. Mi código no funciona, así que no lo pegué aquí, tal vez alguien tiene un ejemplo, si este concepto es factible con jQuery-File-Upload? Si no hay otra forma de guardar varias fotos y mantener la vista de arranque? Encontré buenos ejemplos que representarían una funcionalidad similar a la esperada pero con Upladify: FormFly o solo con Carrierwave y nested_form: carrierwave-nested_form. En jQuery-File-Upload git wiki es tutorial cómo usarlo solo con un modelo en Rails.

me gustaría conseguir algo como esto:

Answer 1

El principal problema con todo esto es la pregunta "¿Cómo se puede crear una asociación con un objeto que no existe?". Bueno, no puedes. Lo que puedes hacer es la siguiente mejor opción, ser más listo. Te mostraré cómo hacerlo, en 3 sencillos pasos. Intencionalmente no publico ningún código, ya que el proceso en sí debería ser bastante claro y aplicable a una variedad de enfoques (no solo limitado a jQuery-File-Upload y Carrierwave o Dragonfly).

Paso 1

Configuración de cada parte de la relación como normal, de forma independiente. Use un andamio (o lo que sea) para generar una nueva publicación. Justo debajo del formulario para la publicación, implemente su solución de carga de fotos como siempre. Yo usaría los controladores y parciales propios de cada objeto, como es normal, para evitar que estas cosas se mezclen indeleblemente. No te preocupes por el código de relación de asociación todavía.

Paso 2

Añadir el código de relación con sus modelos. No se preocupe porque la interfaz aún no los asocia adecuadamente.

Paso 3(la parte divertida)

Ahora, para mantenerlo todo junto. Tenemos imágenes creadas, pero no pertenecen a ninguna publicación. También tenemos publicaciones que se crean sin ninguna de sus imágenes. Necesitamos alguna manera de completar esta asociación. La solución es bastante simple. Debe crear un campo de texto oculto en el formulario de publicaciones para contener los ID de las imágenes que se asociarán a la publicación. Luego, su respuesta de creación de imagen, agregue el ID de la nueva imagen al campo de texto al mismo tiempo que agrega la nueva imagen a la página.De forma similar, en el controlador posterior, simplemente recorra los ID del campo oculto y asocie el (los) objeto (s) objetivo (s) antes de guardar. Probablemente desee agregar una lógica similar al botón cancelar, como eliminar la ID de la matriz cuando la imagen se elimine de la página. También es posible que desee agregar una tarea programada para limpiar la imagen pasada una cierta edad que no esté asociada a una publicación, para eliminar cualquier desorden de los formularios abandonados.

Answer 2

me encontré con un pequeño ejemplo de subir las imágenes multible con JqueryFileUpload en los carriles con carrierwave.

Actualmente estoy trabajando en una mejor solución para volver a cargar cargas de archivos de múltiples archivos con JqueryFileUpload pero este tema no es tan fácil.

In this example

generar un andamio post con el cuerpo: cadena cuando se configura una instancia de un mensaje nuevo objeto en la nueva acción pictures_controller se puede implementar un formulario para un puesto en el cuadros/nueva vista.

<%= form_for(@post) do |f| %> 
    <div class="field"> 
    <%= f.label :body %><br /> 
    <%= f.text_field :body %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %>