Drag and drop

const dropArea2 = document.querySelector('.cover-drag-area2');
const dragText2 = document.querySelector('.header2');

let button2 = dropArea2.querySelector('.button2');
let input2 = dropArea2.querySelector('input2');

let file2;

button2.onclick = () => {
    input2.click();
};

// when browse
input2.addEventListener('change', function() {
    file2 = this.files[0];
    dropArea2.classList.add('active');
    displayFile2();
});

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

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

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

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

function displayFile2() {
    let fileType2 = file2.type;
    // console.log(fileType2);

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

    if (validExtensions2.includes(fileType2)) {
        // console.log('This is an image file');
        let fileReader2 = new FileReader();

        fileReader2.onload = () => {
            let fileURL2 = fileReader2.result;
            // console.log(fileURL2);
            let imgTag2 = `<img src="" alt="">`;
            dropArea2.innerHTML = imgTag2;
        };
        fileReader2.readAsDataURL(file2);
    } else {
        alert('This is not an Image File');
        dropArea2.classList.remove('active');
    }
}