How to preview image before upload in Laravel?

1
2
3
4

<form>
  <input type="file" id="image-input" />
  <img src="" id="image-preview" style="display: none;" />
</form>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script>
  const input = document.getElementById('image-input');
  const preview = document.getElementById('image-preview');

  input.addEventListener('change', function() {
    const file = this.files[0];

    if (file) {
      const reader = new FileReader();

      reader.addEventListener('load', function() {
        preview.src = reader.result;
        preview.style.display = 'block';
      });

      reader.readAsDataURL(file);
    } else {
      preview.src = '';
      preview.style.display = 'none';
    }
  });
</script>

1
2
3
4

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

   // Function to preview the image
   function previewImage(event) {
      var reader = new FileReader(); // FileReader object to read the image
      reader.onload = function() {
         var output = document.getElementById('preview'); // DOM element to display the preview
         output.src = reader.result;
         output.style.display = 'block';
      }
      reader.readAsDataURL(event.target.files[0]); // Read the image file
   }

   // Event listener to trigger the image preview on file selection
   document.getElementById('image').addEventListener('change', previewImage);

1
2
3
4
5
6
7

   #preview {
      display: none;
      max-width: 300px; 
      max-height: 300px;
   }