Drag and drop image upload with image preview

This tailwind example is contributed by Santos78, on 09-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Input

Author Santos78

Tailwind v3.4 23.6k 25

Fork Fullscreen

<h3 class="mt-2 text-sm font-medium text-gray-900">
            <label for="file-upload" class="relative cursor-pointer">
                <span>Drag and drop</span>
                <span class="text-indigo-600"> or browse</span>
                <span>to upload</span>
                <input id="file-upload" name="file-upload" type="file" class="sr-only">
            </label>
        </h3>
        <p class="mt-1 text-xs text-gray-500">
            PNG, JPG, GIF up to 10MB
        </p>
    </div>

dropzone.addEventListener('dragover', e => {
        e.preventDefault();
        dropzone.classList.add('border-indigo-600');
    });

dropzone.addEventListener('dragleave', e => {
        e.preventDefault();
        dropzone.classList.remove('border-indigo-600');
    });

dropzone.addEventListener('drop', e => {
        e.preventDefault();
        dropzone.classList.remove('border-indigo-600');
        var file = e.dataTransfer.files[0];
        displayPreview(file);
    });

var input = document.getElementById('file-upload');

input.addEventListener('change', e => {
        var file = e.target.files[0];
        displayPreview(file);
    });

function displayPreview(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            var preview = document.getElementById('preview');
            preview.src = reader.result;
            preview.classList.remove('hidden');
        };
    }
</script>