Vue Js Image Upload with preview Example

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>

<div id="app">
    <h3>Vue Js image upload with preview</h3>
    <div class="upload-container">
      <label for="file-upload">Choose Image</label>
      <input id="file-upload" type="file" @change="handleFileUpload">
      <div class="image-preview" v-if="previewImage">
        <img :src="previewImage" alt="Preview" @click="showModal">
      </div>
    </div>

<div class="modal" :class="{ 'show': isModalVisible }" @click.self="hideModal">
      <div class="modal-content">
        <img :src="previewImage" alt="Preview">
        <span class="modal-close" @click="hideModal">&times;</span>
      </div>
    </div>
  </div>

reader.onload = () => {
            this.previewImage = reader.result;
          };

reader.readAsDataURL(file);
        },
        showModal() {
          this.isModalVisible = true;
        },
        hideModal() {
          this.isModalVisible = false;
        },
      },
    });
    app.mount('#app');
  </script>

/* Center the content vertically and horizontally */
    #app {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: Arial, sans-serif;
    }

/* Style for the heading */
    h3 {
      font-size: 24px;
      margin-bottom: 20px;
      text-align: center;
    }

/* Style for the file input and upload button container */
    /* Style for the file input and upload button container */
    .upload-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
      /* Add margin-bottom for spacing */
    }

/* Style for the file input */
    input[type="file"] {
      display: none;
    }

/* Style for the file input label */
    label {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: #ffffff;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

label:hover {
      background-color: #45a049;
    }

/* Style for the preview image container */
    .image-preview {
      text-align: center;
      width: 80px;
      /* Adjust the width as per your requirement */
      height: 80px;
      /* Adjust the height as per your requirement */
      border-radius: 50%;
      /* Make the container circular */
      overflow: hidden;
    }

/* Style for the preview image */
    .image-preview img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
      /* Ensure the image fills the container without distortion */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }

/* Style for the modal */
    .modal {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s linear 0.25s, opacity 0.25s 0s;
    }

.modal.show {
      visibility: visible;
      opacity: 1;
      transition-delay: 0s;
    }

.modal-content {
      background-color: #fefefe;
      border-radius: 4px;
      padding: 20px;
      max-width: 90%;
      max-height: 90%;
      overflow: auto;
      text-align: center;

}

.modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      font-size: 24px;
      color: #333;
      background: transparent;
      border: none;
      outline: none;
      padding: 0;
      margin: 0;
    }

.modal-close:hover {
      color: #000;
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
​
<body>
​
  <div id="app">
    <h3>Vue Js image upload with preview</h3>
    <div class="upload-container">
      <label for="file-upload">Choose Image</label>
      <input id="file-upload" type="file" @change="handleFileUpload">
      <div class="image-preview" v-if="previewImage">
        <img :src="previewImage" alt="Preview" @click="showModal">
      </div>
    </div>
​
    <div class="modal" :class="{ 'show': isModalVisible }" @click.self="hideModal">
      <div class="modal-content">
        <img :src="previewImage" alt="Preview">
        <span class="modal-close" @click="hideModal">&times;</span>
      </div>
    </div>
  </div>
​
​
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          previewImage: 'https://www.sarkarinaukriexams.com/images/editor/1684236637tree-g37135fa70_640.jpg',
          isModalVisible: false,
        };
      },
      methods: {
        handleFileUpload(event) {
          const file = event.target.files[0];
          const reader = new FileReader();
​
          reader.onload = () => {
            this.previewImage = reader.result;
          };
​
          reader.readAsDataURL(file);
        },
        showModal() {
          this.isModalVisible = true;
        },
        hideModal() {
          this.isModalVisible = false;
        },
      },
    });
    app.mount('#app');
  </script>
​
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
​
    /* Center the content vertically and horizontally */
    #app {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: Arial, sans-serif;
    }
​
    /* Style for the heading */
    h3 {
      font-size: 24px;
      margin-bottom: 20px;
      text-align: center;
    }
​
    /* Style for the file input and upload button container */
    /* Style for the file input and upload button container */
    .upload-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
      /* Add margin-bottom for spacing */
    }
​
    /* Style for the file input */
    input[type="file"] {
      display: none;
    }
​
    /* Style for the file input label */
    label {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: #ffffff;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }
​
    label:hover {
      background-color: #45a049;
    }
​
    /* Style for the preview image container */
    .image-preview {
      text-align: center;
      width: 80px;
      /* Adjust the width as per your requirement */
      height: 80px;
      /* Adjust the height as per your requirement */
      border-radius: 50%;
      /* Make the container circular */
      overflow: hidden;
    }
​
    /* Style for the preview image */
    .image-preview img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
      /* Ensure the image fills the container without distortion */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }
​
    /* Style for the modal */
    .modal {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s linear 0.25s, opacity 0.25s 0s;
    }
​
    .modal.show {
      visibility: visible;
      opacity: 1;
      transition-delay: 0s;
    }
​
    .modal-content {
      background-color: #fefefe;
      border-radius: 4px;
      padding: 20px;
      max-width: 90%;
      max-height: 90%;
      overflow: auto;
      text-align: center;
​
    }
​
    .modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      font-size: 24px;
      color: #333;
      background: transparent;
      border: none;
      outline: none;
      padding: 0;
      margin: 0;
    }
​
    .modal-close:hover {
      color: #000;
    }
  </style>
</body>
​
</html>