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>

It only shows the name when you drag exactly on "choose file". If you drag outside the box, it will not show the name and will upload the file... — OosoO, Jun 01 '23 at 15:16
I have two options now: 1-prevent the upload of the file with " ev.preventDefault();" + not showing the file name with dragging 2- upload the file by dragging + display the file name But what I want: Don't upload the file by dragging + show filename — OosoO, Jun 01 '23 at 15:22

L.Castel · Answer 1 · 2023-06-01T22:06:04.560

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>

Tank you, It worked with this method, but using the button instead of input, I can't upload files by select the button... — OosoO, Jun 01 '23 at 16:05
I edited the answer, you can recreate the user click programmatically — L.Castel, Jun 01 '23 at 16:27
it doesn't work. The window opens but it doesn't upload the file and doesn't show anything on the console... — OosoO, Jun 01 '23 at 16:39
I want to select a file by clicking on a button. Like what I do with drag and drop but the button is not working. After clicking on the button, the file selection window opens, but it doesn't upload the selected file. It doesn't even show in the console that the file has been uploaded. Your code seems correct but I don't know why it doesn't work. — OosoO, Jun 02 '23 at 05:33

Prevent file from being uploaded

1 Answers1