HTML5 Game - Uploading Dropped Files in a Form

Introduction

We can combine the drag and drop feature, the File API and uploading data using an Ajax request.

The users can drag the files in a form submission from the operating system.

The following code shows how to combine drag and drop, the File API and the FormData object

Demo

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            .table {display:table;}
            .row {display:table-row;}
            .cell {display: table-cell; padding: 5px;}
            .label {text-align: right;}
            #target {border: medium double black; margin:4px; height: 50px;
                width: 200px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
        </style>
    </head>
    <body>
        <form id="fruitform" method="post" action="http://titan:8080/form">
            <div class="table">
                <div class="row">
                    <div class="cell label">Bananas:</div>
                    <div class="cell"><input name="myJet1s" value="2"/></div>
                </div>
                <div class="row">
                    <div class="cell label">Apples:</div>
                    <div class="cell"><input name="myJet2s" value="5"/></div>
                </div>
                <div class="row">
                    <div class="cell label">Cherries:</div>
                    <div class="cell"><input name="myJet3" value="20"/></div>
                </div>
                <div class="row">
                    <div class="cell label">File:</div>
                    <div class="cell"><input type="file" name="file"/></div>
                </div>
                <div class="row">
                    <div class="cell label">Total:</div>
                    <div id="results" class="cell">0 items</div>
                </div>                
            </div>
            <div id="target">
                <p id="msg">Drop Files Here</p>
            </div>            
            <button id="submit" type="submit">Submit Form</button>
        </form>
        <script>
            let target = document.getElementById("target");     
            let httpRequest;//from w ww  . ja  v  a2 s  . c om
            let fileList;
                         
            document.getElementById("submit").onclick = handleButtonPress;                    
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                fileList = e.dataTransfer.files;
                e.preventDefault();
            }          
                         
            function handleButtonPress(e) {
                e.preventDefault();
                 
                let form = document.getElementById("fruitform");
                let formData = new FormData(form);
                 
                if (fileList || true) {
                    for (let i = 0; i < fileList.length; i++) {
                        formData.append("file" + i, fileList[i]);
                    }
                }  
                 
                httpRequest = new XMLHttpRequest();
                httpRequest.onreadystatechange = handleResponse;
                httpRequest.open("POST", form.action);
                httpRequest.send(formData);
            }
                         
            function handleResponse() {
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    let data = JSON.parse(httpRequest.responseText);
                    document.getElementById("results").innerHTML = "You ordered "
                        + data.total + " items";
                }
            }
         </script>
    </body>
</html>

HTML5 Game - Uploading Dropped Files in a Form

Introduction

Demo

Related Topic