Two drag&drop image uploads on same page conflicts

Hello

I need your help… I have now spend way to long trying to figure out how I get two of this simple drag&drop image upload script to work on the same form and page and not conflict with each other.

I’m build an form wizard where I need a cover and background photo upload and would like to use the script below since it fits perfectly with what i need.

But I simply cant get the two drag&drop areas to working on the same page, even after pretty much renaming everything in the JS file and html…

This is the script I’m using:
https://codepen.io/BWstreet/pen/dyZgzrw

My last desperately attempt and just renaming everything
https://justpaste.it/cc5lq

Yes, I am really bad at JS, so I’m really stuck with this

If someone could help me make a cover and background version of the JS, that would be so awesome…

So… show us the one where you’ve got two drag areas in the same file and its not working?

Are you talk about the html, then this is my test code:

HTML

<html lang="en">
 
  <head>
 
    <meta charset="UTF-8" />
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <title>Drag, Drop & Browse</title>
 
    <link
 
      rel="stylesheet"
 
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
 
      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
 
      crossorigin="anonymous"
 
      referrerpolicy="no-referrer"
 
    />
 
    <link rel="stylesheet" href="styles.css" />
 
  </head>
 
  <body>
 
    <div class="container">
 
      <h3>Upload your File :</h3>
 
      <div class="cover-drag-area">
 
        <div class="icon">
 
          <i class="fas fa-images"></i>
 
        </div>
 
 
        <span class="cover-header">Drag & Drop</span>
 
        <span class="cover-header">or <span class="cover-button">browse</span></span>
 
        <input id="cover" type="file" hidden />
 
        <span class="support">Supports: JPEG, JPG, PNG</span>
 
      </div>
 
 
      <h3>Upload your File :</h3>
 
      <div class="background-drag-area">
 
        <div class="icon">
 
          <i class="fas fa-images"></i>
 
        </div>
 
 
        <span class="background-header">Drag & Drop</span>
 
        <span class="background-header">or <span class="background-button">browse</span></span>
 
        <input id="background" type="file" hidden />
 
        <span class="support">Supports: JPEG, JPG, PNG</span>
 
      </div>
 
    </div>
 
 
    <script src="cover-drop.js"></script>
 
    <script src="background-drop.js"></script>
 
    </body>
 
</html>

as you can see i i was trying to keep it simple and just add the two js files and then see if i could rename things and get it working… But just cant get it to work together…

I have also tried something like:

cover-drop.js:

const CoverDropArea = document.querySelector('.cover-drag-area');
const dragText = document.querySelector('.cover-header');

let cover_button = CoverDropArea.querySelector('.cover_button');
let input = CoverDropArea.querySelector('input');

let CoverFile;

cover_button.onclick = () => {
    input.click();
};

// when browse
input.addEventListener('change', function() {
    CoverFile = this.files[0];
    CoverDropArea.classList.add('active');
    displayCoverFile();
});

// when file is inside drag area
CoverDropArea.addEventListener('dragover', (event) => {
    event.preventDefault();
    CoverDropArea.classList.add('active');
    dragText.textContent = 'Release to Upload';
    // console.log('File is inside the drag area');
});

// when file leave the drag area
CoverDropArea.addEventListener('dragleave', () => {
    CoverDropArea.classList.remove('active');
    // console.log('File left the drag area');
    dragText.textContent = 'Drag & Drop';
});

// when file is dropped
CoverDropArea.addEventListener('drop', (event) => {
    event.preventDefault();
    // console.log('File is dropped in drag area');

    CoverFile = event.dataTransfer.files[0]; // grab single file even of user selects multiple files
    // console.log(file);
    displayCoverFile();
});

function displayCoverFile() {
    let fileType = file.type;
    // console.log(fileType);

    let validExtensions = ['image/jpeg', 'image/jpg', 'image/png'];

    if (validExtensions.includes(fileType)) {
        // console.log('This is an image file');
        let fileReader = new FileReader();

        fileReader.onload = () => {
            let fileURL = fileReader.result;
            // console.log(fileURL);
            let imgTag = `<img src="${fileURL}" alt="">`;
            CoverDropArea.innerHTML = imgTag;
        };
        fileReader.readAsDataURL(CoverFile);
    } else {
        alert('This is not an Image File');
        CoverDropArea.classList.remove('active');
    }
}

background-drop.js:

const dropArea = document.querySelector('.background-drag-area');
const dragText = document.querySelector('.header');

let button = dropArea.querySelector('.button');
let input = dropArea.querySelector('input');

let file;

button.onclick = () => {
    input.click();
};

// when browse
input.addEventListener('change', function() {
    file = this.files[0];
    dropArea.classList.add('active');
    displayFile();
});

// when file is inside drag area
dropArea.addEventListener('dragover', (event) => {
    event.preventDefault();
    dropArea.classList.add('active');
    dragText.textContent = 'Release to Upload';
    // console.log('File is inside the drag area');
});

// when file leave the drag area
dropArea.addEventListener('dragleave', () => {
    dropArea.classList.remove('active');
    // console.log('File left the drag area');
    dragText.textContent = 'Drag & Drop';
});

// when file is dropped
dropArea.addEventListener('drop', (event) => {
    event.preventDefault();
    // console.log('File is dropped in drag area');

    file = event.dataTransfer.files[0]; // grab single file even of user selects multiple files
    // console.log(file);
    displayFile();
});

function displayFile() {
    let fileType = file.type;
    // console.log(fileType);

    let validExtensions = ['image/jpeg', 'image/jpg', 'image/png'];

    if (validExtensions.includes(fileType)) {
        // console.log('This is an image file');
        let fileReader = new FileReader();

        fileReader.onload = () => {
            let fileURL = fileReader.result;
            // console.log(fileURL);
            let imgTag = `<img src="${fileURL}" alt="">`;
            dropArea.innerHTML = imgTag;
        };
        fileReader.readAsDataURL(file);
    } else {
        alert('This is not an Image File');
        dropArea.classList.remove('active');
    }
}

Well for starters you called that class background-header, not header.

likewise, you called that background-button, not button.

You’ve already declared a constant dragText. Cant redeclare the same constant.

You called this cover-button, not cover_button.

you changed file to CoverFile; need to change it here (file.type) too.

Changes made:

3 Likes

You are awesome…

Sorry, may have pasted some code from different attempts i did, but i am really glad you could help me get this working… Thank you

1 Like