Home How can I get the filename of the file I dragged and dropped? PHP Javascript

Questions

How can I get the filename of the file I dragged and dropped? PHP Javascript

April 28, 2023

I know nothing about drag and dropping files, but I found this nifty little code that allows me to drag a text file into a textarea. It works great. I was wondering if it’s possible to get the filename of the file I dropped and save it to a php variable? I would need the filename after the form is submitted.

function dropfile(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
    area.value = e.target.result;
  };
  reader.readAsText(file, 'UTF-8');
}

area.ondrop = function(e) {
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  dropfile(file);
};

<form  method='post' action='' id='theform'>
<textarea id='area' name='data'></textarea>
</form>
<button id=sub onclick='theform.submit()'>SUBMIT</button>

>Solution :

You can make use of File.prototype.name property in your drop event like so:

function dropfile(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
    area.value = file.name + '\n' + e.target.result;
  };
  reader.readAsText(file, 'UTF-8');
}

area.ondrop = function(e) {
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  dropfile(file);
};

<form method='post' action='' id='theform'>
  <textarea id='area' name='data'></textarea>
</form>
<button id=sub onclick='theform.submit()'>SUBMIT</button>