Form Upload / Dropzone
Examples and usage guidelines for form upload fields with default file input type and with Dropzone plugin.
Default Upload Field
File Upload with default input file type.
Code Example
<div class="form-group"> <label class="form-label" for="customFileLabel">Default File Upload</label> <div class="form-control-wrap"> <div class="form-file"> <input type="file" class="form-file-input" id="customFile"> <label class="form-file-label" for="customFile">Choose file</label> </div> </div></div><div class="form-group"> <label class="form-label" for="customMultipleFilesLabel">Multiple File Upload</label> <div class="form-control-wrap"> <div class="form-file"> <input type="file" multiple class="form-file-input" id="customMultipleFiles"> <label class="form-file-label" for="customMultipleFiles">Choose files</label> </div> </div></div>
Dropzone
File Upload system with Dropzone js plugin, for more detailed documentation, Please check Dropzone official Docs
Code Example
<div class="upload-zone"> <div class="dz-message" data-dz-message> <span class="dz-message-text">Drag and drop file</span> <span class="dz-message-or">or</span> <button class="btn btn-primary">SELECT</button> </div></div>
| Code Reference | Details |
|---|---|
[data-max-files="1"] | Use {number} with data-max-files attribute to specify file limit in dropzone |
[data-max-file-size="4"] | Use {number} with data-max-file-size attribute to specify file size (mib) limit in dropzone |
[data-accepted-files="image/*"] | Use {filetype} with data-accepted-files attribute as image/*, .docx, .psd, .txt etc to specify accepted file types |
