How to make a drag and drop HTML file reader

Question

I am working on a small HTML file API application. This application can support users to drag, drop a file and read the file content. However, I found I either can make the drag, drop and read the file info part or using HTML upload feature to let users upload a file and read the file content.

Please see the example here: https://jsfiddle.net/tqcuor5g/

I just want the user can drop a file into a drop zone and the app can read its content and show in the text area.

My question is how can I make the application support drag, drop and read the file content at the same time? Thank you in advance!

Source code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    body 
    {
        font-size:18pt;
    }
    #filedrop 
    {
        width: 300px;
        height: 200px;
        color: Gray;
        border: 10px dashed #9a9a9a;
    }
</style>
<title>Reading a Text File</title>
<script type="text/javascript">
    function init() {
        var bHaveFileAPI = (window.File && window.FileReader);

        if (!bHaveFileAPI) {
            alert("This browser doesn't support the File API");
            return;
        }

         document.getElementById("filedrop").addEventListener("drop", onFilesDropped);
        document.getElementById("filedrop").addEventListener("dragover", onDragOver);
        document.getElementById("fileElem").addEventListener("change", onFileChanged);

    }

    function onFileChanged(theEvt) {
        var thefile = theEvt.target.files[0];
        console.log(thefile);

        // check to see if it is text
        if (thefile.type != "text/plain") {
            document.getElementById('filecontents').innerHTML = "No text file chosen";
            return;
        }

        var reader = new FileReader();

        reader.onload = function (evt) {
            var resultText = evt.target.result;
            document.getElementById('filecontents').innerHTML = resultText;
        }

        reader.readAsText(thefile);
    }

     function onDragOver(theEvt) {
        theEvt.stopPropagation();
        theEvt.preventDefault();
    }

    function onFilesDropped(theEvt) {
        theEvt.stopPropagation();
        theEvt.preventDefault();

        var files = theEvt.target.files;

        document.getElementById('filedata').innerHTML = "";

        for (var i = 0; i <= files.length; i++) {
            var fileInfo = "<p>File name: " + files[i].name + "; size: " + files[i].size + "; type: " + files[i].type + "</p>";
            document.getElementById('filedata').innerHTML += fileInfo;
        }
    }

    window.addEventListener("load", init);
</script>
</head>
<body>
<h1>Using Drag and Drop</h1>
<p>Drop files here: </p>
<div id="filedrop"></div>
<p>File Information: </p>
<div id="filedata"></div>
<h1>Reading File Data as Text</h1>
<form action="">
<label>Select a file: </label>
<input type="file" name="files" id="fileElem" />
</form>
<p>File contents: </p>
<textarea cols="80" rows="10" id="filecontents"></textarea>
</body>
</html>

How to make a drag and drop HTML file reader

0 Answers0