All geek questions in one place

Drag text file

I want dropdown text files to be displayed by their content or their full location so that I can upload the contents of that location to drop_zone.

This is what I have had so far. I just managed to access the file name:

<html> <head> <title></title> </head> <body> <textarea id="drop_zone">Drop files here</textarea> <output id="list"></output> <script> function handleFileSelect(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; // FileList object. document.getElementById('drop_zone').innerHTML = files[0].name; } function handleDragOver(evt) { evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. } // Setup the dnd listeners. var dropZone = document.getElementById('drop_zone'); dropZone.addEventListener('dragover', handleDragOver, false); dropZone.addEventListener('drop', handleFileSelect, false); </script> </body> </html>
+6
source share
3 answers

here is the final code:

 <html> <head> <title></title> </head> <body> <textarea id="drop_zone">Drop files here</textarea> <script> function handleFileSelect(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; // FileList object. var reader = new FileReader(); reader.onload = function(event) { document.getElementById('drop_zone').value = event.target.result; } reader.readAsText(files[0],"UTF-8"); } function handleDragOver(evt) { evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. } // Setup the dnd listeners. var dropZone = document.getElementById('drop_zone'); dropZone.addEventListener('dragover', handleDragOver, false); dropZone.addEventListener('drop', handleFileSelect, false); </script> </body> </html>
+9
source

http://www.html5rocks.com/en/tutorials/file/dndfiles/ should be a good resource. You need to use FileReader to read the contents of the file as a string.

+5
source

Due to security restrictions, the page cannot load the contents of files without something like a Java applet with the appropriate permissions; and even then it is not too possible.

However, this does not mean that it is impossible; just upload the file to the server and repeat the output to the browser. Here's how text editing web applications work.

How you implement this is up to you.

In addition, as Maz noted, you can also use the built-in APIs to help you accomplish what you are trying to do. However, note that this solution is not necessarily cross-browser compatible.

0
source

Source: https://habr.com/ru/post/924265/

More articles:


All Articles