Drag multiple text files to your web application with HTML5 and JavaScript

Drag multiple text files to your web application with HTML5 and JavaScript

Hi, in this article I will show you how you can drag text files from your operating system to your browser application text area. You can use all of text file types (*.txt, *.html, *.js etc). In this example I will use index.html and test.txt files and drag them into application.

UI is simple:

1-html5

HTML5 drag and drop gives user an easy interface for getting data into the browser. In this example we simply grab the text files from our operating system and drop them into our browser. The code look like the following lines and of course it can be inspiration for you to add new features.

     /**
     * Text area
     * @type {HTMLElement}
     */
    var dropZone = document.getElementById('drop-zone'),
        append = document.getElementById('append');

    /**
     * Set event listeners
     */
    dropZone.addEventListener('dragover', dragOver);
    dropZone.addEventListener('dragend', dragEnd);
    dropZone.addEventListener('drop', readText, false);

    function dragOver(e) {
        e.stopPropagation(); // for some browsers stop redirecting
        e.preventDefault();
        return false;
    }

    function dragEnd(e) {
        e.stopPropagation(); // for some browsers stop redirecting
        e.preventDefault();
        return false;
    }

    function readText(e) {
        e.stopPropagation(); // for some browsers stop redirecting
        e.preventDefault();

        var file,
            fileData,
            fileReader,
            files = e.dataTransfer.files;

        if (!files) {
            return;
        }

        //not append
        if(append.checked == false)
            dropZone.value = '';

        for(var i=0;i<files.length;i++)
        {
            file = files[i];

            //new instance for each file
            fileReader = new FileReader();
            fileReader.textArea = dropZone;

            fileData = function (event) {
                this.textArea.value += this.result
            };

            fileReader.addEventListener('loadend',fileData);
            fileReader.readAsText(file);
        }
    }

a) in my case my drop zone is text area and I also added checkbox to allow user append another content to existing one

b) I set listeners for drag and drop events, the functions e.stopPropagation(); and e.preventDefault(); prevent browser actions (for example, browser will not open your file in the tab)

c) important things are in the readText function.

- file - dragged element from operating system
- fileData – callback function to set text area content
- fileReader, new FileReader() - closure to capture the file information
- files, e.dataTransfer.files  - array of dragged elements from operating system
- fileReader.addEventListener(‘loadend’,fileData) – listener for callback
- fileReader.readAsText(file) – reads text file

I dragged two files:

3-html5

The final result:

2-html5

Real life demo

Thanks and see you soon.

Comments:

Leave a Reply

Please fill all required fields


Drag circle to the rectangle on the right!

Send