File Uploads Component
File Input
Upload Input
Upload Input
Upload Input
File Input
File Input
Thumbnail (400x250)
Main course file
Main course file
Transform your space to reflect your personality!
Upload Input
Upload Input
Upload Input
<!-- single item -->
<div>
<p class="form-label">Upload Input</p>
<label for="file-1" class="file-container md:p-6 p-4 cursor-pointer rounded-lg border border-input-border dark:border-dark-border block">
<span class="flex-center-between">
<div class="flex items-center md:gap-4 gap-3">
<span class="shrink-0"><img src="assets/images/icons/zip-file.svg" alt="icon"></span>
<div>
<input type="file" id="file-1" hidden class="file-src">
<span class="file-name mb-3 font-semibold text-gray-500 dark:text-dark-text">Design-UI-Kit.zip</span>
<p class="flex gap-2 items-center text-sm text-gray-900 dark:text-dark-text-two"><span>23.7 mb</span> | <span>67%</span> <span class="size-1 rounded-full bg-[#7D7D7D]"></span> <span>8 sec left</span></p>
</div>
</div>
<button class="text-gray-900 dark:text-dark-text hover:text-danger duration-200"><i class="ri-delete-bin-6-line text-inherit text-2xl"></i></button>
</span>
<div class="w-full h-1.5 rounded-full bg-[#E2E2E2] dark:bg-progress-bar-bg-dark md:mt-8 mt-6">
<span class="w-[67%] h-full bg-primary-500 rounded-full block"></span>
</div>
</label>
</div>
<!-- single item -->
<div>
<p class="form-label">Upload Input</p>
<label for="file-2" class="file-container md:p-6 p-4 cursor-pointer rounded-lg border border-input-border dark:border-dark-border block">
<span class="flex-center-between">
<div class="flex items-center md:gap-4 gap-3">
<span class="shrink-0"><img src="assets/images/icons/zip-file.svg" alt="icon"></span>
<div>
<input type="file" id="file-2" hidden class="file-src">
<span class="file-name mb-3 font-semibold text-gray-500 dark:text-dark-text">Design-UI-Kit.zip</span>
<p class="flex gap-2 items-center text-sm text-danger">Upload failed</p>
</div>
</div>
<button class="text-gray-900 dark:text-dark-text hover:text-danger duration-200"><i class="ri-delete-bin-6-line text-inherit text-2xl"></i></button>
</span>
</label>
</div>
<!-- single item -->
<div>
<p class="form-label">Upload Input</p>
<label for="file-3" class="file-container md:p-6 p-4 cursor-pointer rounded-lg border border-input-border dark:border-dark-border block">
<span class="flex-center-between">
<div class="flex items-center md:gap-4 gap-3">
<span class="shrink-0"><img src="assets/images/icons/zip-file.svg" alt="icon"></span>
<div>
<input type="file" id="file-3" hidden class="file-src">
<span class="file-name mb-3 font-semibold text-gray-500 dark:text-dark-text">Design-UI-Kit.zip</span>
<p class="flex gap-2 items-center text-sm text-success">Upload failed</p>
</div>
</div>
<span class="text-success duration-200"><i class="ri-checkbox-circle-fill text-inherit text-2xl"></i></span>
</span>
</label>
</div>
<!-- single item -->
<
Thumbnail (400x250)
Main course file
Main course file
<!-- single item -->
<div class="col-span-full sm:col-span-4">
<p class="form-label">Thumbnail (400x250)</p>
<label for="thumbnail" class="file-container ac-bg text-xs leading-none font-semibold mb-3 cursor-pointer aspect-[4/1.5] flex flex-col items-center justify-center gap-2.5 dk-border-one border-dashed rounded-10">
<input type="file" id="thumbnail" hidden class="img-src peer/file" multiple="true">
<span class="flex-center flex-col peer-[.uploaded]/file:hidden">
<img src="assets/images/icons/upload-file.svg" alt="file-icon" class="size-8 lg:size-auto">
<div class="mt-2">Choose file</div>
</span>
</label>
</div>
<!-- single item -->
<div class="col-span-full sm:col-span-4">
<p class="form-label">Main course file</p>
<label for="file-6" class="file-container text-xs leading-none font-semibold mb-3 cursor-pointer aspect-[4/1.5] flex flex-col items-center justify-center gap-2.5 dk-border-one border-dashed rounded-10">
<input type="file" id="file-6" hidden class="peer/file file-src">
<span class="flex-center flex-col">
<img src="assets/images/icons/upload-file.svg" alt="file-icon" class="size-8 lg:size-auto">
<div class="file-name mt-2">Choose file</div>
</span>
</label>
</div>
<!-- single item -->
<div class="col-span-full sm:col-span-4">
<p class="form-label">Main course file</p>
<label for="drag-drop" class="file-container text-xs leading-none font-semibold mb-3 cursor-pointer aspect-[4/2] flex flex-col items-center justify-center gap-2.5 dk-border-one border-dashed rounded-10">
<input type="file" id="drag-drop" hidden class="peer/file file-src">
<span class="flex-center flex-col">
<img src="assets/images/icons/upload-file.svg" alt="file-icon" class="size-8 lg:size-auto">
<div class="file-name mt-2 text-xl font-semibold text-gray-500 dark:text-dark-text">Drag and drop a file here or</div>
<label for="drag-drop" class="cursor-pointer text-sm text-primary-500 before:text-lg font-spline_sans before:font-remix before:pr-px before:content-['\f24e'] btn b-outline btn-primary-outline py-2.5 px-[18px] mt-4">Click to upload</label>
<span class="text-sm text-gray-900 dark:text-dark-text-two mt-2">Maximus file size is 13 MB</span>
</span>
</label>
</div>