html5 arrastrar y soltar archivos: cargar cuando se envía el formulario completo

Question

¿Es posible incluir archivos "arrastrar y soltar" en un envío de formulario? Hay muchas opciones para cargar de forma asincrónica.

¿Es posible capturar los datos del archivo e incluirlos en un campo de formulario?

estoy usando Rails como mi servidor por lo que idealmente los datos de la imagen se encajar en una forma como sigue:

<form multipart='multipart' > 
    <select name='files[type_id]'> 
    ... 
    ... 
    </select> 
    <!-- FILE DATA ? --> 
    <div id="file_drop_spot"> 

    </div> 

</form> 

Answer 1

me encontré con este problema en él: drag drop files into standard html file input

no lo hago cree que es posible, pero podrías lograr el efecto. Cuando envíe el formulario, evite su comportamiento predeterminado y comience a cargar el archivo con ajax. Cuando se completa la carga del archivo, vuelve a señalar el formulario y lo envía, sin impedir su comportamiento predeterminado.

Algo así como:

<form id="form"> 
    <input type="text" name="someText"></input> 
    <input id="submitButton" type="submit" onclick="uploadFile()"></input> 
</form> 

Y entonces el javascript:

function uploadFile() { 

    document.getElementById("submitButton").disabled = true; 
    // Some ajax code to upload the file and then on the success: 
    success: function() { 

     document.getElementById("form").submit(); 

    } 
    return false; // Prevent the form from submitting 

}