Helper Icon Image
Unlimited Access

Upgrade to plan to get access to unlimited reports

Upgrade

File Uploads

Dropzone File Upload

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

Drop files here or click to upload.

(This is just a demo dropzone. Selected files are not actually uploaded.)

Make sure to include following js files at end of body element

                                                    
                                                        <!-- plugin js -->
                                                        <script src="assets/vendor/dropzone/min/dropzone.min.js"></script>
                                                        <!-- init js -->
                                                        <script src="assets/js/ui/component.fileupload.js"></script>
                                                    
                                                
                                                    
                                                        <!-- File Upload -->
                                                        <form action="/" method="post" class="dropzone" id="myAwesomeDropzone" data-plugin="dropzone" data-previews-container="#file-previews"
                                                            data-upload-preview-template="#uploadPreviewTemplate">
                                                            <div class="fallback">
                                                                <input name="file" type="file" multiple />
                                                            </div>
                                                        
                                                            <div class="dz-message needsclick">
                                                                <i class="h1 text-muted ri-upload-cloud-2-line"></i>
                                                                <h3>Drop files here or click to upload.</h3>
                                                                <span class="text-muted font-13">(This is just a demo dropzone. Selected files are
                                                                    <strong>not</strong> actually uploaded.)</span>
                                                            </div>
                                                        </form>
                                                        
                                                        <!-- Preview -->
                                                        <div class="dropzone-previews mt-3" id="file-previews"></div>

                                                        <!-- file preview template -->
                                                        <div class="d-none" id="uploadPreviewTemplate">
                                                            <div class="card mt-1 mb-0 shadow-none border">
                                                                <div class="p-2">
                                                                    <div class="row align-items-center">
                                                                        <div class="col-auto">
                                                                            <img data-dz-thumbnail src="#" class="avatar-sm rounded bg-light" alt="">
                                                                        </div>
                                                                        <div class="col ps-0">
                                                                            <a href="javascript:void(0);" class="text-muted fw-bold" data-dz-name></a>
                                                                            <p class="mb-0" data-dz-size></p>
                                                                        </div>
                                                                        <div class="col-auto">
                                                                            <!-- Button -->
                                                                            <a href="" class="btn btn-link btn-lg text-muted" data-dz-remove>
                                                                                <i class="ri-close-line"></i>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    
                                                
Theme Settings
Choose Layout
Vertical
Horizontal
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Detached
Topbar Color
Light
Dark
Layout Position