Zona para soltar archivos
Arrastra archivos o pulsa para elegirlos: la zona se ilumina y cada archivo sube con su barra de progreso.
Ajustes
Código
<div class="uv-ifd"><label class="dz"><input type="file" multiple><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V4M7.5 8.5L12 4l4.5 4.5"/><path d="M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15"/></svg></span><b>Arrastra aquí tus archivos</b><span class="or">o <u>busca en tu equipo</u></span><span class="hn">PNG, JPG o PDF de hasta 10 MB</span></label><ul aria-live="polite"></ul></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Ver todos: InputsDónde usarlo
Las zonas de subida deben servir a quien arrastra archivos con el ratón y a quien prefiere el selector. Esta zona discontinua envuelve un input file real, se ilumina y hace botar su icono mientras pasas archivos por encima, y lista cada archivo con una barra de progreso y un porcentaje que terminan en un check. La lista guarda los tres últimos.
En la demo el progreso es simulado; conecta tu petición de subida en la función add para moverlo con eventos reales. Los formatos y el tamaño aceptados van en la pista para que se sepa antes de elegir.