File Upload - Midone - Tailwind Admin Dashboard Template

Tinker

Dropzone

Single File Upload

Show example code

            
                HTMLOpenTagform
    data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-darkmode-200/60 [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
    HTMLOpenTagdiv class="fallback"HTMLCloseTag
        HTMLOpenTaginput
            name="file"
            type="file"
        /HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTagdiv
        class="dz-message"
        data-dz-message
    HTMLCloseTag
        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                    Drop files here or click to upload.
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
                                    This is just a demo dropzone. Selected files are
                                    HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
                                    uploaded.
                                HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag

Multiple File Upload

Show example code

            
                HTMLOpenTagform
    data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-darkmode-200/60 [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
    HTMLOpenTagdiv class="fallback"HTMLCloseTag
        HTMLOpenTaginput
            name="file"
            type="file"
        /HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTagdiv
        class="dz-message"
        data-dz-message
    HTMLCloseTag
        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                    Drop files here or click to upload.
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
                                    This is just a demo dropzone. Selected files are
                                    HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
                                    uploaded.
                                HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag

File Type Validation

Show example code

            
                HTMLOpenTagform
    data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-darkmode-200/60 [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
    HTMLOpenTagdiv class="fallback"HTMLCloseTag
        HTMLOpenTaginput
            name="file"
            type="file"
        /HTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTagdiv
        class="dz-message"
        data-dz-message
    HTMLCloseTag
        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                    Drop files here or click to upload.
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
                                    This is just a demo dropzone. Selected files are
                                    HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
                                    uploaded.
                                HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag