logologo-dark
logologo-dark

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

Drag and drop fileor
Drag and drop fileor
Drag and drop fileor
Drag and drop fileor
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 ReferenceDetails
[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
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Shady
Softy
Header Style
White
Light
Dark
Theme
Header Option
Regular
Fixed
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?