Home > Enterprise >  How to upload and preview 2 images in JavaScript
How to upload and preview 2 images in JavaScript

Time：01-29

The first one is working while the other one is not uploading and neither previewing the image I want to upload. I want both the image uploader and preview. But the first one is working only. I am using the same JavaScript for the Image uploader and preview. Simple word the code for HTML is copied and JavaScript is the same too. Kindly change it and make both inputs work correctly.

// Design By
// - https://dribbble.com/shots/13992184-File-Uploader-Drag-Drop

// Select Upload-Area
const uploadArea = document.querySelector('#uploadArea')

// Select Drop-Zoon Area
const dropZoon = document.querySelector('#dropZoon');

// Loading Text
const loadingText = document.querySelector('#loadingText');

// Slect File Input 
const fileInput = document.querySelector('#fileInput');

// Select Preview Image
const previewImage = document.querySelector('#previewImage');

// File-Details Area
const fileDetails = document.querySelector('#fileDetails');

// Uploaded File
const uploadedFile = document.querySelector('#uploadedFile');

// Uploaded File Info
const uploadedFileInfo = document.querySelector('#uploadedFileInfo');

// Uploaded File  Name
const uploadedFileName = document.querySelector('.uploaded-file__name');

// Uploaded File Icon
const uploadedFileIconText = document.querySelector('.uploaded-file__icon-text');

// Uploaded File Counter
const uploadedFileCounter = document.querySelector('.uploaded-file__counter');

// ToolTip Data
const toolTipData = document.querySelector('.upload-area__tooltip-data');

// Images Types
const imagesTypes = [
  "jpeg",
  "png",
  "svg",
  "gif"
];

// Append Images Types Array Inisde Tooltip Data
toolTipData.innerHTML = [...imagesTypes].join(', .');

// When (drop-zoon) has (dragover) Event 
dropZoon.addEventListener('dragover', function (event) {
  // Prevent Default Behavior 
  event.preventDefault();

  // Add Class (drop-zoon--over) On (drop-zoon)
  dropZoon.classList.add('drop-zoon--over');
});

// When (drop-zoon) has (dragleave) Event 
dropZoon.addEventListener('dragleave', function (event) {
  // Remove Class (drop-zoon--over) from (drop-zoon)
  dropZoon.classList.remove('drop-zoon--over');
});

// When (drop-zoon) has (drop) Event 
dropZoon.addEventListener('drop', function (event) {
  // Prevent Default Behavior 
  event.preventDefault();

  // Remove Class (drop-zoon--over) from (drop-zoon)
  dropZoon.classList.remove('drop-zoon--over');

  // Select The Dropped File
  const file = event.dataTransfer.files[0];

  // Call Function uploadFile(), And Send To Her The Dropped File :)
  uploadFile(file);
});

// When (drop-zoon) has (click) Event 
dropZoon.addEventListener('click', function (event) {
  // Click The (fileInput)
  fileInput.click();
});

// When (fileInput) has (change) Event 
fileInput.addEventListener('change', function (event) {
  // Select The Chosen File
  const file = event.target.files[0];

  // Call Function uploadFile(), And Send To Her The Chosen File :)
  uploadFile(file);
});

// Upload File Function
function uploadFile(file) {
  // FileReader()
  const fileReader = new FileReader();
  // File Type 
  const fileType = file.type;
  // File Size 
  const fileSize = file.size;

  // If File Is Passed from the (File Validation) Function
  if (fileValidate(fileType, fileSize)) {
    // Add Class (drop-zoon--Uploaded) on (drop-zoon)
    dropZoon.classList.add('drop-zoon--Uploaded');

    // Show Loading-text
    loadingText.style.display = "block";
    // Hide Preview Image
    previewImage.style.display = 'none';

    // Remove Class (uploaded-file--open) From (uploadedFile)
    uploadedFile.classList.remove('uploaded-file--open');
    // Remove Class (uploaded-file__info--active) from (uploadedFileInfo)
    uploadedFileInfo.classList.remove('uploaded-file__info--active');

    // After File Reader Loaded 
    fileReader.addEventListener('load', function () {
      // After Half Second 
      setTimeout(function () {
        // Add Class (upload-area--open) On (uploadArea)
        uploadArea.classList.add('upload-area--open');

        // Hide Loading-text (please-wait) Element
        loadingText.style.display = "none";
        // Show Preview Image
        previewImage.style.display = 'block';

        // Add Class (file-details--open) On (fileDetails)
        fileDetails.classList.add('file-details--open');
        // Add Class (uploaded-file--open) On (uploadedFile)
        uploadedFile.classList.add('uploaded-file--open');
        // Add Class (uploaded-file__info--active) On (uploadedFileInfo)
        uploadedFileInfo.classList.add('uploaded-file__info--active');
      }, 500); // 0.5s

      // Add The (fileReader) Result Inside (previewImage) Source
      previewImage.setAttribute('src', fileReader.result);

      // Add File Name Inside Uploaded File Name
      uploadedFileName.innerHTML = file.name;

      // Call Function progressMove();
      progressMove();
    });

    // Read (file) As Data Url 
    fileReader.readAsDataURL(file);
  } else { // Else

    this; // (this) Represent The fileValidate(fileType, fileSize) Function

  };
};

// Progress Counter Increase Function
function progressMove() {
  // Counter Start
  let counter = 0;

  // After 600ms 
  setTimeout(() => {
    // Every 100ms
    let counterIncrease = setInterval(() => {
      // If (counter) is equle 100 
      if (counter === 100) {
        // Stop (Counter Increase)
        clearInterval(counterIncrease);
      } else { // Else
        // plus 10 on counter
        counter = counter   10;
        // add (counter) vlaue inisde (uploadedFileCounter)
        uploadedFileCounter.innerHTML = `${counter}%`
      }
    }, 100);
  }, 600);
};


// Simple File Validate Function
function fileValidate(fileType, fileSize) {
  // File Type Validation
  let isImage = imagesTypes.filter((type) => fileType.indexOf(`image/${type}`) !== -1);

  // If The Uploaded File Type Is 'jpeg'
  if (isImage[0] === 'jpeg') {
    // Add Inisde (uploadedFileIconText) The (jpg) Value
    uploadedFileIconText.innerHTML = 'jpg';
  } else { // else
    // Add Inisde (uploadedFileIconText) The Uploaded File Type 
    uploadedFileIconText.innerHTML = isImage[0];
  };

  // If The Uploaded File Is An Image
  if (isImage.length !== 0) {
    // Check, If File Size Is 2MB or Less
    if (fileSize <= 2000000) { // 2MB :)
      return true;
    } else { // Else File Size
      return alert('Please Your File Should be 2 Megabytes or Less');
    };
  } else { // Else File Type 
    return alert('Please make sure to upload An Image File Type');
  };
};

// :)
/* General Styles */

* {
  box-sizing: border-box;
}

:root {
  --clr-white: rgb(255, 255, 255);
  --clr-black: rgb(0, 0, 0);
  --clr-light: rgb(245, 248, 255);
  --clr-light-gray: rgb(196, 195, 196);
  --clr-blue: rgb(63, 134, 255);
  --clr-light-blue: rgb(171, 202, 255);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--clr-light);
  color: var(--clr-black);
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* End General Styles */

/* Upload Area */
.upload-area {
  width: 100%;
  max-width: 25rem;
  background-color: var(--clr-white);
  box-shadow: 0 10px 60px rgb(218, 229, 255);
  border: 2px solid var(--clr-light-blue);
  border-radius: 24px;
  padding: 2rem 1.875rem 5rem 1.875rem;
  margin: 0.625rem;
  text-align: center;
}

.upload-area--open { /* Slid Down Animation */
  animation: slidDown 500ms ease-in-out;
}

@keyframes slidDown {
  from {
    height: 28.125rem; /* 450px */
  }

  to {
    height: 35rem; /* 560px */
  }
}

/* Header */
.upload-area__header {

}

.upload-area__title {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin-top: 0;
}

.upload-area__tooltip {
  position: relative;
  color: var(--clr-light-blue);
  cursor: pointer;
  transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
  color: var(--clr-blue);
}

.upload-area__tooltip-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -125%);
  min-width: max-content;
  background-color: var(--clr-white);
  color: var(--clr-blue);
  border: 1px solid var(--clr-light-blue);
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: none 300ms ease-in-out;
  transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
  opacity: 1;
  visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
  position: relative;
  height: 11.25rem; /* 180px */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px dashed var(--clr-light-blue);
  border-radius: 15px;
  margin-top: 2.1875rem;
  cursor: pointer;
  transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
  border-color: var(--clr-blue);
}

.drop-zoon__icon {
  display: flex;
  font-size: 3.75rem;
  color: var(--clr-blue);
  transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin: 0;
  margin-top: 0.625rem;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
  opacity: 0.7;
}

.drop-zoon__loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  color: var(--clr-light-blue);
  z-index: 10;
}

.drop-zoon__preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3125rem;
  border-radius: 10px;
  display: none;
  z-index: 1000;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
  opacity: 0.8;
}

.drop-zoon__file-input {
  display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
  border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
  opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--Uploaded {
  
}

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
  display: none;
}

/* File Details Area */
.upload-area__file-details {
  height: 0;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  transition: none 500ms ease-in-out;
  transition-property: opacity, visibility;
  transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
  height: auto;
  visibility: visible;
  opacity: 1;
}

.file-details__title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--clr-light-gray);
}

/* Uploaded File */
.uploaded-file {
  display: flex;
  align-items: center;
  padding: 0.625rem 0;
  visibility: hidden;
  opacity: 0;
  transition: none 500ms ease-in-out;
  transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
  visibility: visible;
  opacity: 1;
}

.uploaded-file__icon-container {
  position: relative;
  margin-right: 0.3125rem;
}

.uploaded-file__icon {
  font-size: 3.4375rem;
  color: var(--clr-blue);
}

.uploaded-file__icon-text {
  position: absolute;
  top: 1.5625rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--clr-white);
}

.uploaded-file__info {
  position: relative;
  top: -0.3125rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
  content: '';
  position: absolute;
  bottom: -0.9375rem;
  width: 0;
  height: 0.5rem;
  background-color: #ebf2ff;
  border-radius: 0.625rem;
}

.uploaded-file__info::before {
  width: 100%;
}

.uploaded-file__info::after {
  width: 100%;
  background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
  animation: progressMove 800ms ease-in-out;
  animation-delay: 300ms;
}

@keyframes progressMove {
  from {
    width: 0%;
    background-color: transparent;
  }

  to {
    width: 100%;
    background-color: var(--clr-blue);
  }
}

.uploaded-file__name {
  width: 100%;
  max-width: 6.25rem; /* 100px */
  display: inline-block;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uploaded-file__counter {
  font-size: 1rem;
  color: var(--clr-light-gray);
}
<!-- Upload Area -->
<div id="uploadArea" >
  <!-- Header -->
  <div >
    <h1 >Upload your file</h1>
    <p >
      File should be an image
      <strong >
        Like
        <span ></span> <!-- Data Will be Comes From Js -->
      </strong>
    </p>
  </div>
  <!-- End Header -->

  <!-- Drop Zoon -->
  <div id="dropZoon" >
    <span >
      <i class='bx bxs-file-image'></i>
    </span>
    <p >Drop your file here or Click to browse</p>
    <span id="loadingText" >Please Wait</span>
    <img src="" alt="Preview Image" id="previewImage"  draggable="false">
    <input type="file" id="fileInput"  accept="image/*">
  </div>
  <!-- End Drop Zoon -->

  <!-- File Details -->
  <div id="fileDetails" >
    <h3 >Uploaded File</h3>

    <div id="uploadedFile" >
      <div >
        <i class='bx bxs-file-blank uploaded-file__icon'></i>
        <span ></span> <!-- Data Will be Comes From Js -->
      </div>

      <div id="uploadedFileInfo" >
        <span >Proejct 1</span>
        <span >0%</span>
      </div>
    </div>
  </div>
  <!-- End File Details -->
</div>
<!-- End Upload Area -->

<div ></div>
<!-- Upload Area -->
<div id="uploadArea" >
  <!-- Header -->
  <div >
    <h1 >Upload your file</h1>
    <p >
      File should be an image
      <strong >
        Like
        <span ></span> <!-- Data Will be Comes From Js -->
      </strong>
    </p>
  </div>
  <!-- End Header -->

  <!-- Drop Zoon -->
  <div id="dropZoon" >
    <span >
      <i class='bx bxs-file-image'></i>
    </span>
    <p >Drop your file here or Click to browse</p>
    <span id="loadingText" >Please Wait</span>
    <img src="" alt="Preview Image" id="previewImage"  draggable="false">
    <input type="file" id="fileInput"  accept="image/*">
  </div>
  <!-- End Drop Zoon -->

  <!-- File Details -->
  <div id="fileDetails" >
    <h3 >Uploaded File</h3>

    <div id="uploadedFile" >
      <div >
        <i class='bx bxs-file-blank uploaded-file__icon'></i>
        <span ></span> <!-- Data Will be Comes From Js -->
      </div>

      <div id="uploadedFileInfo" >
        <span >Proejct 1</span>
        <span >0%</span>
      </div>
    </div>
  </div>
  <!-- End File Details -->
</div>
<!-- End Upload Area -->

CodePudding user response：

In JavaScript file you are using document.querySelector("")

That chooses only the first element in the HTML and you can't duplicate the two uploader and use the same selector in JavaScript.

You can with JavaScript select the two uploader & make the functions for the two uploaders with loop as an example.

If you need array of the elements you can use document.querySelectorAll("").

CodePudding user response：

Since IDs such as #uploadArea, #dropZoon, etc. have become duplicated in the html code, then accordingly you install all handlers only for the first element.

I have slightly corrected your example so that you can install a lot of loaders:

// Design By
// - https://dribbble.com/shots/13992184-File-Uploader-Drag-Drop

uploadHandler({
  uploadArea: document.querySelector("#uploadArea"),
  dropZoon: document.querySelector("#dropZoon"),
  loadingText: document.querySelector("#loadingText"),
  fileInput: document.querySelector("#fileInput"),
  previewImage: document.querySelector("#previewImage"),
  fileDetails: document.querySelector("#fileDetails"),
  uploadedFile: document.querySelector("#uploadedFile"),
  uploadedFileInfo: document.querySelector("#uploadedFileInfo"),
  uploadedFileName: document.querySelector(".uploaded-file__name"),
  uploadedFileIconText: document.querySelector(".uploaded-file__icon-text"),
  uploadedFileCounter: document.querySelector(".uploaded-file__counter"),
  toolTipData: document.querySelector(".upload-area__tooltip-data"),
});


uploadHandler({
  uploadArea: document.querySelector("#uploadArea-2"),
  dropZoon: document.querySelector("#dropZoon-2"),
  loadingText: document.querySelector("#loadingText-2"),
  fileInput: document.querySelector("#fileInput-2"),
  previewImage: document.querySelector("#previewImage-2"),
  fileDetails: document.querySelector("#fileDetails-2"),
  uploadedFile: document.querySelector("#uploadedFile-2"),
  uploadedFileInfo: document.querySelector("#uploadedFileInfo-2"),
  uploadedFileName: document.querySelector(".uploaded-file__name-2"),
  uploadedFileIconText: document.querySelector(".uploaded-file__icon-text-2"),
  uploadedFileCounter: document.querySelector(".uploaded-file__counter-2"),
  toolTipData: document.querySelector(".upload-area__tooltip-data-2"),
});

function uploadHandler({
  uploadArea,
  dropZoon,
  loadingText,
  fileInput,
  previewImage,
  fileDetails,
  uploadedFile,
  uploadedFileInfo,
  uploadedFileName,
  uploadedFileIconText,
  uploadedFileCounter,
  toolTipData,
}) {
  // Images Types
  const imagesTypes = ["jpeg", "png", "svg", "gif"];

  // Append Images Types Array Inisde Tooltip Data
  toolTipData.innerHTML = [...imagesTypes].join(", .");

  // When (drop-zoon) has (dragover) Event
  dropZoon.addEventListener("dragover", function (event) {
    // Prevent Default Behavior
    event.preventDefault();

    // Add Class (drop-zoon--over) On (drop-zoon)
    dropZoon.classList.add("drop-zoon--over");
  });

  // When (drop-zoon) has (dragleave) Event
  dropZoon.addEventListener("dragleave", function (event) {
    // Remove Class (drop-zoon--over) from (drop-zoon)
    dropZoon.classList.remove("drop-zoon--over");
  });

  // When (drop-zoon) has (drop) Event
  dropZoon.addEventListener("drop", function (event) {
    // Prevent Default Behavior
    event.preventDefault();

    // Remove Class (drop-zoon--over) from (drop-zoon)
    dropZoon.classList.remove("drop-zoon--over");

    // Select The Dropped File
    const file = event.dataTransfer.files[0];

    // Call Function uploadFile(), And Send To Her The Dropped File :)
    uploadFile(file);
  });

  // When (drop-zoon) has (click) Event
  dropZoon.addEventListener("click", function (event) {
    // Click The (fileInput)
    fileInput.click();
  });

  // When (fileInput) has (change) Event
  fileInput.addEventListener("change", function (event) {
    // Select The Chosen File
    const file = event.target.files[0];

    // Call Function uploadFile(), And Send To Her The Chosen File :)
    uploadFile(file);
  });

  // Upload File Function
  function uploadFile(file) {
    // FileReader()
    const fileReader = new FileReader();
    // File Type
    const fileType = file.type;
    // File Size
    const fileSize = file.size;

    // If File Is Passed from the (File Validation) Function
    if (fileValidate(fileType, fileSize)) {
      // Add Class (drop-zoon--Uploaded) on (drop-zoon)
      dropZoon.classList.add("drop-zoon--Uploaded");

      // Show Loading-text
      loadingText.style.display = "block";
      // Hide Preview Image
      previewImage.style.display = "none";

      // Remove Class (uploaded-file--open) From (uploadedFile)
      uploadedFile.classList.remove("uploaded-file--open");
      // Remove Class (uploaded-file__info--active) from (uploadedFileInfo)
      uploadedFileInfo.classList.remove("uploaded-file__info--active");

      // After File Reader Loaded
      fileReader.addEventListener("load", function () {
        // After Half Second
        setTimeout(function () {
          // Add Class (upload-area--open) On (uploadArea)
          uploadArea.classList.add("upload-area--open");

          // Hide Loading-text (please-wait) Element
          loadingText.style.display = "none";
          // Show Preview Image
          previewImage.style.display = "block";

          // Add Class (file-details--open) On (fileDetails)
          fileDetails.classList.add("file-details--open");
          // Add Class (uploaded-file--open) On (uploadedFile)
          uploadedFile.classList.add("uploaded-file--open");
          // Add Class (uploaded-file__info--active) On (uploadedFileInfo)
          uploadedFileInfo.classList.add("uploaded-file__info--active");
        }, 500); // 0.5s

        // Add The (fileReader) Result Inside (previewImage) Source
        previewImage.setAttribute("src", fileReader.result);

        // Add File Name Inside Uploaded File Name
        uploadedFileName.innerHTML = file.name;

        // Call Function progressMove();
        progressMove();
      });

      // Read (file) As Data Url
      fileReader.readAsDataURL(file);
    } else {
      // Else

      this; // (this) Represent The fileValidate(fileType, fileSize) Function
    }
  }

  // Progress Counter Increase Function
  function progressMove() {
    // Counter Start
    let counter = 0;

    // After 600ms
    setTimeout(() => {
      // Every 100ms
      let counterIncrease = setInterval(() => {
        // If (counter) is equle 100
        if (counter === 100) {
          // Stop (Counter Increase)
          clearInterval(counterIncrease);
        } else {
          // Else
          // plus 10 on counter
          counter = counter   10;
          // add (counter) vlaue inisde (uploadedFileCounter)
          uploadedFileCounter.innerHTML = `${counter}%`;
        }
      }, 100);
    }, 600);
  }

  // Simple File Validate Function
  function fileValidate(fileType, fileSize) {
    // File Type Validation
    let isImage = imagesTypes.filter(
      (type) => fileType.indexOf(`image/${type}`) !== -1
    );

    // If The Uploaded File Type Is 'jpeg'
    if (isImage[0] === "jpeg") {
      // Add Inisde (uploadedFileIconText) The (jpg) Value
      uploadedFileIconText.innerHTML = "jpg";
    } else {
      // else
      // Add Inisde (uploadedFileIconText) The Uploaded File Type
      uploadedFileIconText.innerHTML = isImage[0];
    }

    // If The Uploaded File Is An Image
    if (isImage.length !== 0) {
      // Check, If File Size Is 2MB or Less
      if (fileSize <= 2000000) {
        // 2MB :)
        return true;
      } else {
        // Else File Size
        return alert("Please Your File Should be 2 Megabytes or Less");
      }
    } else {
      // Else File Type
      return alert("Please make sure to upload An Image File Type");
    }
  }
}
// :)
/* General Styles */

* {
  box-sizing: border-box;
}

:root {
  --clr-white: rgb(255, 255, 255);
  --clr-black: rgb(0, 0, 0);
  --clr-light: rgb(245, 248, 255);
  --clr-light-gray: rgb(196, 195, 196);
  --clr-blue: rgb(63, 134, 255);
  --clr-light-blue: rgb(171, 202, 255);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--clr-light);
  color: var(--clr-black);
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* End General Styles */

/* Upload Area */
.upload-area {
  width: 100%;
  max-width: 25rem;
  background-color: var(--clr-white);
  box-shadow: 0 10px 60px rgb(218, 229, 255);
  border: 2px solid var(--clr-light-blue);
  border-radius: 24px;
  padding: 2rem 1.875rem 5rem 1.875rem;
  margin: 0.625rem;
  text-align: center;
}

.upload-area--open { /* Slid Down Animation */
  animation: slidDown 500ms ease-in-out;
}

@keyframes slidDown {
  from {
    height: 28.125rem; /* 450px */
  }

  to {
    height: 35rem; /* 560px */
  }
}

/* Header */
.upload-area__header {

}

.upload-area__title {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin-top: 0;
}

.upload-area__tooltip {
  position: relative;
  color: var(--clr-light-blue);
  cursor: pointer;
  transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
  color: var(--clr-blue);
}

.upload-area__tooltip-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -125%);
  min-width: max-content;
  background-color: var(--clr-white);
  color: var(--clr-blue);
  border: 1px solid var(--clr-light-blue);
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: none 300ms ease-in-out;
  transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
  opacity: 1;
  visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
  position: relative;
  height: 11.25rem; /* 180px */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px dashed var(--clr-light-blue);
  border-radius: 15px;
  margin-top: 2.1875rem;
  cursor: pointer;
  transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
  border-color: var(--clr-blue);
}

.drop-zoon__icon {
  display: flex;
  font-size: 3.75rem;
  color: var(--clr-blue);
  transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin: 0;
  margin-top: 0.625rem;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
  opacity: 0.7;
}

.drop-zoon__loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  color: var(--clr-light-blue);
  z-index: 10;
}

.drop-zoon__preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3125rem;
  border-radius: 10px;
  display: none;
  z-index: 1000;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
  opacity: 0.8;
}

.drop-zoon__file-input {
  display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
  border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
  opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--Uploaded {
  
}

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
  display: none;
}

/* File Details Area */
.upload-area__file-details {
  height: 0;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  transition: none 500ms ease-in-out;
  transition-property: opacity, visibility;
  transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
  height: auto;
  visibility: visible;
  opacity: 1;
}

.file-details__title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--clr-light-gray);
}

/* Uploaded File */
.uploaded-file {
  display: flex;
  align-items: center;
  padding: 0.625rem 0;
  visibility: hidden;
  opacity: 0;
  transition: none 500ms ease-in-out;
  transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
  visibility: visible;
  opacity: 1;
}

.uploaded-file__icon-container {
  position: relative;
  margin-right: 0.3125rem;
}

.uploaded-file__icon {
  font-size: 3.4375rem;
  color: var(--clr-blue);
}

.uploaded-file__icon-text {
  position: absolute;
  top: 1.5625rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--clr-white);
}

.uploaded-file__info {
  position: relative;
  top: -0.3125rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
  content: '';
  position: absolute;
  bottom: -0.9375rem;
  width: 0;
  height: 0.5rem;
  background-color: #ebf2ff;
  border-radius: 0.625rem;
}

.uploaded-file__info::before {
  width: 100%;
}

.uploaded-file__info::after {
  width: 100%;
  background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
  animation: progressMove 800ms ease-in-out;
  animation-delay: 300ms;
}

@keyframes progressMove {
  from {
    width: 0%;
    background-color: transparent;
  }

  to {
    width: 100%;
    background-color: var(--clr-blue);
  }
}

.uploaded-file__name {
  width: 100%;
  max-width: 6.25rem; /* 100px */
  display: inline-block;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uploaded-file__counter {
  font-size: 1rem;
  color: var(--clr-light-gray);
}
<!-- Upload Area -->
<div id="uploadArea" >
  <!-- Header -->
  <div >
    <h1 >Upload your file</h1>
    <p >
      File should be an image
      <strong >
        Like
        <span ></span> <!-- Data Will be Comes From Js -->
      </strong>
    </p>
  </div>
  <!-- End Header -->

  <!-- Drop Zoon -->
  <div id="dropZoon" >
    <span >
      <i class='bx bxs-file-image'></i>
    </span>
    <p >Drop your file here or Click to browse</p>
    <span id="loadingText" >Please Wait</span>
    <img src="" alt="Preview Image" id="previewImage"  draggable="false">
    <input type="file" id="fileInput"  accept="image/*">
  </div>
  <!-- End Drop Zoon -->

  <!-- File Details -->
  <div id="fileDetails" >
    <h3 >Uploaded File</h3>

    <div id="uploadedFile" >
      <div >
        <i class='bx bxs-file-blank uploaded-file__icon'></i>
        <span ></span> <!-- Data Will be Comes From Js -->
      </div>

      <div id="uploadedFileInfo" >
        <span >Proejct 1</span>
        <span >0%</span>
      </div>
    </div>
  </div>
  <!-- End File Details -->
</div>
<!-- End Upload Area -->

<div ></div>
<!-- Upload Area -->
<div id="uploadArea-2" >
  <!-- Header -->
  <div >
    <h1 >Upload your file</h1>
    <p >
      File should be an image
      <strong >
        Like
        <span ></span> <!-- Data Will be Comes From Js -->
      </strong>
    </p>
  </div>
  <!-- End Header -->

  <!-- Drop Zoon -->
  <div id="dropZoon-2" >
    <span >
      <i class='bx bxs-file-image'></i>
    </span>
    <p >Drop your file here or Click to browse</p>
    <span id="loadingText-2" >Please Wait</span>
    <img src="" alt="Preview Image" id="previewImage-2"  draggable="false">
    <input type="file" id="fileInput-2"  accept="image/*">
  </div>
  <!-- End Drop Zoon -->

  <!-- File Details -->
  <div id="fileDetails-2" >
    <h3 >Uploaded File</h3>

    <div id="uploadedFile-2" >
      <div >
        <i class='bx bxs-file-blank uploaded-file__icon'></i>
        <span ></span> <!-- Data Will be Comes From Js -->
      </div>

      <div id="uploadedFileInfo-2" >
        <span >Proejct 1</span>
        <span >0%</span>
      </div>
    </div>
  </div>
  <!-- End File Details -->
</div>
<!-- End Upload Area -->

In fact, all your code was wrapped in a separate function, to which the arguments of the same name are passed. Of course, in my opinion, for the final result, this should be refactored for final use, using querySelectorAll for a list of root elements, followed by obtaining individual nested elements with querySelector.

Page link：https//www.codepudding.com/Enterprise/280907.html

Prev:Show HTML popup before submitting form
Next:My HTML button is not working, or it wont call my javascript function
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding