DragNDrop: Get the filename of the file dropped on the element (div or form)

Question

i made a drag and drop over the whole page. Now if i drop a file (.txt) i want to get the filename and the filepath and filename should be put in the "input"-Box (id: fileUpload) but unfortunately i don't know how to solve this. DragNDrop works!

//JavaScript

var dropZone = document.getElementById('dropzone');

    function showDropZone() {
        dropZone.style.display = "block";
    }
    function hideDropZone() {
        dropZone.style.display = "none";
    }

    function allowDrag(e) {
        if (true) {  // Test that the item being dragged is a valid one
            e.dataTransfer.dropEffect = 'copy';
            e.preventDefault();
        }
    }

    function handleDrop(e) {
        e.preventDefault();
        hideDropZone(this);
        alert('File was dropped');
    }

    // 1
    window.addEventListener('dragenter', function (e) {
        showDropZone();
    });

    // 2
    dropZone.addEventListener('dragenter', allowDrag);
    dropZone.addEventListener('dragover', allowDrag);

    // 3
    dropZone.addEventListener('dragleave', function (e) {
        hideDropZone();
    });

    // 4
    dropZone.addEventListener('drop', handleDrop);

//HTML (here i can use the "div" or the "form" as the dropzone)
<div id="dropzone" class="dropzone"></div>
@*<form action="/file-upload" id="dropzone" class="dropzone"></form>*@

<input type="file" id="fileUpload" name=""/>

BartKrul · Answer 1 · 2019-07-17T13:56:03.917

The event contains a dataTransfer property. This data transfer property contains a files property. See: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/files

On this page you can find a link to the following jsbin: https://jsbin.com/hiqasek/edit?html,js,output

function dodrop(event)
{
  var dt = event.dataTransfer;
  var files = dt.files;

  var count = files.length;
  output("File Count: " + count + "\n");

    for (var i = 0; i < files.length; i++) {
      output(" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " +
             files[i].name + " " + files[i].size + "\n");
    }
}

function output(text)
{
  document.getElementById("output").textContent += text;
  //dump(text);
}

The file property is an array of file objects that contain information about the file. The filename is accessible as seen in the plunker by files[i].name.

After that you will need to update your DOM by retrieving the element from the page, and changing the inner text. This is seen in the output function.

It seems that you cannot retrieve the path of the file via the file.path property anymore: how to get fullpath of dropped folder from file system This is imaginable because of security reasons.

I tried using

 var entry = event.dataTransfer.items[0].webkitGetAsEntry();

and using

entry.fullPath

to get the path as explained in: How to drag and drop directory and get only the path of it?

However, this doesn't seem to be supported anymore as it just shows the path as '/'.

score 0 · Accepted Answer · answered Jul 23 '19 at 14:35

0

function handleDrop(e) {
        e.preventDefault();
        hideDropZone(this);
        alert('File was dropped');
    }

Please use e.point instead of this.

answered Jul 23 '19 at 14:35

Flo Hab

20
7

DragNDrop: Get the filename of the file dropped on the element (div or form)

2 Answers2