Home
Noob
File upload input section with file preview

File upload input section with file preview

This tailwind example is contributed by Noob, on 07-Sep-2022. Component is made with Tailwind CSS v3. It is responsive.

Author Noob

11.9k

<div class="flex flex-col flex-grow mb-3 mx-8 max-w-md">
    <div x-data="{ files: null }" id="FileUpload"
        class="block w-full py-2 px-3 relative bg-white appearance-none border-2 border-gray-300 border-solid rounded-md hover:shadow-outline-gray">
        <input type="file" multiple
               class="absolute inset-0 z-50 m-0 p-0 w-full h-full outline-none opacity-0"
               x-on:change="files = $event.target.files; console.log($event.target.files);"
               x-on:dragover="$el.classList.add('active')" x-on:dragleave="$el.classList.remove('active')" x-on:drop="$el.classList.remove('active')"
        >
        <template x-if="files !== null">
            <div class="flex flex-col space-y-1">
                <template x-for="(_,index) in Array.from({ length: files.length })">
                    <div class="flex flex-row items-center space-x-2">
                        <template
                            x-if="files[index].type.includes('audio/')"><i class="far fa-file-audio fa-fw"></i></template>
                        <template
                            x-if="files[index].type.includes('application/')"><i class="far fa-file-alt fa-fw"></i></template>
                        <template
                            x-if="files[index].type.includes('image/')"><i class="far fa-file-image fa-fw"></i></template>
                        <template
                            x-if="files[index].type.includes('video/')"><i class="far fa-file-video fa-fw"></i></template>
                        <span class="font-medium text-gray-900" x-text="files[index].name">Uploading</span>
                        <span class="text-xs self-end text-gray-500" x-text="filesize(files[index].size)">...</span>
                    </div>
                </template>
            </div>
        </template>
        <template x-if="files === null">
            <div class="flex flex-col space-y-2 items-center justify-center">
                <i class="fas fa-cloud-upload-alt fa-3x text-currentColor"></i>
                <p class="text-gray-700">Drag your files here or click in this area.</p>
                <a href="javascript:void(0)"
                    class="flex items-center mx-auto py-2 px-4 text-white text-center font-medium border border-transparent rounded-md outline-none bg-red-700">Select
                    a file</a>
            </div>
        </template>
    </div>
</div>

Related Examples

Drag and drop image upload with image preview

Author:
Santos78

2 years ago

22.6k
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

2 years ago

27.2k
File upload with icon

Author:
Fagundo67

2 years ago

17.5k
Upload file input field

Author:
Gopi Yadav

2 years ago

14.5k
File upload input box

Author:
Mohit Prajapati

3 years ago

14.4k
Large File upload input

Author:
Akshay

3 years ago

14.5k
File input field

Author:
Lyra Ravensong

2 years ago

13.2k
File input

Author:
Anonymous

1 year ago

7.2k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

2.5k
Login Form with Icon

Author:
Prashant

3 years ago

17.4k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

7 months ago

629
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components