how to use bootstrap 5 upload image with preview

How to use Bootstrap 5 Upload Image with Preview

bootstrap
11/02/24
Webvees

To create an image upload feature with a preview using Bootstrap 5, you can follow these steps. This will involve a mix of HTML for the structure, CSS for styling, and JavaScript for functionality.


First, create the HTML structure using Bootstrap classes and Add JavaScript to handle the image selection and preview.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <form>
        <div class="mb-3">
          <label for="imageUpload" class="form-label">Upload Image</label>
          <input type="file" class="form-control" id="imageUpload" accept="image/*">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    <div class="col-md-6">
      <p>Image Preview:</p>
      <img id="imagePreview" src="#" alt="your image" class="img-fluid" style="display: none;" />
    </div>
  </div>
</div>
<script>
  document.getElementById('imageUpload').addEventListener('change', function (event) {
    var output = document.getElementById('imagePreview');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function () {
      URL.revokeObjectURL(output.src) 
    }
    output.style.display = 'block';
  });
</script>
bootstrap 5 file upload preview image

bootstrap 5 file upload preview image

Bootstrap 5 Upload Image Files with Preview Using Input Button.

<div class="container">
  <div>
    <div class="col-md-6">
      <form>
        <div class="mb-3">
          <label for="customFile" class="btn btn-primary mb-2">Choose Image</label>
          <input type="file" class="form-control" id="customFile" accept="image/*" hidden>
        </div>
      </form>
    </div>
    <div class="col-md-6">
      <div class="preview-container" style="display: none;">
        <p>Image Preview:</p>
        <img id="customImagePreview" src="#" alt="Image Preview" class="img-fluid" />
      </div>
    </div>
  </div>
</div>
<script>
  document.getElementById('customFile').addEventListener('change', function (event) {
    var preview = document.getElementById('customImagePreview');
    var container = document.querySelector('.preview-container');
    preview.src = URL.createObjectURL(event.target.files[0]);
    preview.onload = function () {
      URL.revokeObjectURL(preview.src);
      container.style.display = 'block';
    }
  });
</script>
bootstrap 5 input button file upload preview image

bootstrap 5 input button file upload preview image

Bootstrap 5 Upload Multiple Image Files with Previewing Multiple Images.

<div class="container">
  <div>
      <div class="col-md-6">
          <form>
              <div class="mb-3">
                  <label for="multiImageUpload" class="form-label">Upload Multiple Images</label>
                  <input type="file" class="form-control" id="multiImageUpload" accept="image/*" multiple>
              </div>
          </form>
      </div>
      <div class="col-md-6">
          <p>Image Previews:</p>
          <div id="multiImagePreview" class="row"></div>
      </div>
  </div>
</div>
<script>
  document.getElementById('multiImageUpload').addEventListener('change', function (event) {
      var previewContainer = document.getElementById('multiImagePreview');
      previewContainer.innerHTML = ''; // Clear existing previews
      Array.from(event.target.files).forEach(file => {
          var preview = document.createElement('img');
          preview.src = URL.createObjectURL(file);
          preview.classList.add('img-fluid', 'col-md-4', 'mb-3');
          preview.onload = function () {
              URL.revokeObjectURL(preview.src);
          }
          previewContainer.appendChild(preview);
      });
  });
</script>
bootstrap 5 multiple file upload preview multiple image

bootstrap 5 multiple file upload preview multiple image