Prevent file from being uploaded

Question

I tried to prevent the upload of the file after dragging the file in the input with ev.preventDefault(); . It works but now after dragging the file it doesn't change the file name in the name section. How should I prevent the upload of the file on the page and see its name in the input section after dragging the file? No file chosen

console

        function dropHandler(ev) {
        console.log('File(s) dropped');   

        if (ev.dataTransfer.items) {
            // Use DataTransferItemList interface to access the file(s)
            for (var i = 0; i < ev.dataTransfer.items.length; i++) {
                // If dropped items aren't files, reject them
                if (ev.dataTransfer.items[i].kind === 'file') {
                    var file = ev.dataTransfer.items[i].getAsFile();
                    console.log('DTIL... file[' + i + '].name = ' + file.name);
                    uploadedCSVfile = file;
                    console.log(file);
                }
            }
        } else {
            // Use DataTransfer interface to access the file(s)
            for (var i = 0; i < ev.dataTransfer.files.length; i++) {
                console.log('DT... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
            }
        }
    }
    function dragOverHandler(ev) {
        // console.log('File(s) in drop zone');
        // Prevent default behavior (Prevent file from being opened)
        ev.preventDefault();
        drop_zone.style.border = "3px dotted red";
    }

    function dragLeave(event) {
        if (event.target.id == "drop_zone") {
            event.target.style.backgroundColor = "";
            drop_zone.style.border = " 2px dotted black";
        }
    }

<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragleave="dragLeave(event); ">
  <form id="prod_csv_upload" style="margin-top: 10px;">
    <label for="csv_file">
                    <!-- this input actually receives the file -->
                    <input type="file" id="csv_file" accept=".csv" /><br>
                </label>
  </form>
</div>

Answer 1

The input type file is a browser controlled input you have to hide the default input and use label and recreate a button.

Here is an other exemple

And the implementation on your code

const fileName = '';
function dropHandler(ev) {
        console.log('File(s) dropped');
        // Prevent default behavior (Prevent file from being opened)
        ev.preventDefault();
        ev.dataTransfer.dropEffect = 'none';

        if (ev.dataTransfer.items) {
            // Use DataTransferItemList interface to access the file(s)
            for (var i = 0; i < ev.dataTransfer.items.length; i++) {
            // If dropped items aren't files, reject them
            if (ev.dataTransfer.items[i].kind === 'file') {
                document.getElementById('label_filename').innerHTML = ev.dataTransfer.files[i].name;
                var file = ev.dataTransfer.items[i].getAsFile();
                console.log('DTIL... file[' + i + '].name = ' + file.name);
                uploadedCSVfile = file;
                console.log(file);
            }
        }
    } else {
        // Use DataTransfer interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
            console.log('DT... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
        }
    }
}
function dragOverHandler(ev) {
    // console.log('File(s) in drop zone');
    // Prevent default behavior (Prevent file from being opened)
    ev.preventDefault();
    drop_zone.style.border = '3px dotted red';
}

function dragLeave(event) {
    if (event.target.id == 'drop_zone') {
        event.target.style.backgroundColor = '';
        drop_zone.style.border = ' 2px dotted black';
    }
}
    

<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragleave="dragLeave(event); ">
  <form id="prod_csv_upload" style="margin-top: 10px;">
    <label for="csv_file">
      <button onclick="document.getElementById('csv_file').click()">Choose a file</button>
      <div id="label_filename">No file choose</div>
      <!-- this input actually receives the file -->
      <input style="display: none;" type="file" id="csv_file" accept=".csv" /><br>
    </label>
  </form>
</div>