Image input with preview

Show you a preview of the selected image.

This tailwind example is contributed by Prajwal Hallale, on 14-Dec-2022. Component is made with Tailwind v3.4. It is responsive.

Input

Author Prajwal Hallale

Tailwind v3.4 27.9k 9

Fork Fullscreen

<form>
  <div class="flex items-center space-x-6">
    <div class="shrink-0">
      <img id='preview_img' class="h-16 w-16 object-cover rounded-full" src="https://lh3.googleusercontent.com/a-/AFdZucpC_6WFBIfaAbPHBwGM9z8SxyM1oV4wB4Ngwp_UyQ=s96-c" alt="Current profile photo" />
    </div>
    <label class="block">
      <span class="sr-only">Choose profile photo</span>
      <input type="file" onchange="loadFile(event)" class="block w-full text-sm text-slate-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-full file:border-0
        file:text-sm file:font-semibold
        file:bg-violet-50 file:text-violet-700
        hover:file:bg-violet-100
      "/>
    </label>
  </div>
</form>

var output = document.getElementById('preview_img');

output.src = URL.createObjectURL(event.target.files[0]);
            output.onload = function() {
                URL.revokeObjectURL(output.src) // free memory
            }
        };
</script>

Related Examples

Drag and drop image upload with image preview

Santos78

3 years ago

23.6k
File upload with icon

Fagundo67

3 years ago

18.4k
Upload file input field

Gopi Yadav

3 years ago

15.8k
File upload form

Lukas Müller

3 years ago

14.6k
File upload input section with file preview

Noob

4 years ago

13.2k
Large File upload input

Akshay

3 years ago

15.3k
File input field

Lyra Ravensong

3 years ago

14k
File upload input box

Mohit Prajapati

3 years ago

15.3k
File input

Anonymous

2 years ago

8.1k
Onhover Dropdown
Open dropdown on hover

Akshay

4 years ago

19.1k
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Samuel Dawson

3 years ago

18.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Date picker
Date picker example using flatpickr library

Lîmåã M

3 years ago

18.2k