Quiero poder arrastrar un archivo a cualquier elemento HTML y hacer que se comporte como si se hubiera arrastrado a la entrada de un archivo.

Puedo tipo de hacerlo con algo como esto:

 <label> <input type="file"> </label>

… y use CSS para aumentar la label y ocultar la entrada del archivo:

 label { display: block; width: 200px; height: 100px; } input[type="file"] { box-sizing: border-box; width: 100%; height: 100%; opacity: 0; }

pero eso no es muy flexible.

Intenté usar un elemento diferente, que preferiría, y el evento drop de JavaScript y el objeto eventTransfer . Puedo obtener los datos del archivo, pero no puedo agregarlos a la entrada del archivo.

Otras soluciones tienden a usar Ajax y enviar el archivo directamente o a algún tipo de área de espera, pero me gustaría saber si es posible hacerlo simplemente con la entrada del archivo.