Home
Prajwal Hallale
Image input with preview

Image input with preview

Show you a preview of the selected image.

This tailwind example is contributed by Prajwal Hallale, on 29-Aug-2022. Component is made with Tailwind CSS v3. It is responsive.

Tags: Input

Author
Prajwal Hallale

4.8k

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>