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…
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');
}
}