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 |
