Dropzone File Field

Style a dashed dropzone around a real file input. Dropzone.js library labs are in the JavaScript workbook Phase 8.

File input with dropzone chrome

Drop a file or choose one Suggested: CSV or XLSX. The server must still validate uploads.

The transparent file input covers the dashed area so keyboard and pointer both work.

Important pattern

Keep a real file input; style the chrome around it.

<div class="dropzone">
  <strong>Drop a file or choose one</strong>
  <input class="field-file" type="file">
</div>