Components

## 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.

Default File Upload
Choose file
Multiple File Upload
Choose files

###### Code Example

    <div class="form-group">
        <label class="form-label" for="customFileLabel">Default File Upload</label>
        <div class="form-control-wrap">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="customFile">
                <label class="custom-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="custom-file">
                <input type="file" multiple class="custom-file-input" id="customMultipleFiles">
                <label class="custom-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

Dropzone Default
Drag and drop file or
Dropzone Single File
Drag and drop file or
Dropzone File Size Limit (4mb)
Drag and drop file or
Dropzone with only Image Upload
Drag and drop file or

###### 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