Dropzone

Single File Upload

Drop files here or click to upload.
This is just a demo dropzone. Selected files are not actually uploaded.
            <form 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">
    <div class="fallback">
        <input name="file" type="file" />
    </div>
    <div class="dz-message" data-dz-message>
        <div class="text-lg font-medium">
            Drop files here or click to upload.
        </div>
        <div class="text-gray-600">
            This is just a demo dropzone. Selected files are
            <span class="font-medium">not</span> actually
            uploaded.
        </div>
    </div>
</form>
        

Multiple File Upload

Drop files here or click to upload.
This is just a demo dropzone. Selected files are not actually uploaded.
            <form 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">
    <div class="fallback">
        <input name="file" type="file" />
    </div>
    <div class="dz-message" data-dz-message>
        <div class="text-lg font-medium">
            Drop files here or click to upload.
        </div>
        <div class="text-gray-600">
            This is just a demo dropzone. Selected files are
            <span class="font-medium">not</span> actually
            uploaded.
        </div>
    </div>
</form>
        

File Type Validation

Drop files here or click to upload.
This is just a demo dropzone. Selected files are not actually uploaded.
            <form 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">
    <div class="fallback">
        <input name="file" type="file" />
    </div>
    <div class="dz-message" data-dz-message>
        <div class="text-lg font-medium">
            Drop files here or click to upload.
        </div>
        <div class="text-gray-600">
            This is just a demo dropzone. Selected files are
            <span class="font-medium">not</span> actually
            uploaded.
        </div>
    </div>
</form>