Get and send to a server a Json file (Drag & Drop) without ajax

Question

I am stuck with this problem (This is a simple implementation of Drag & Drop):

<!DOCTYPE html>
<style type="text/css">
 body {
  font-family: "Arial",sans-serif;
 }
 .dropzone {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  color: #ccc;
  line-height: 300px;
  text-align: center;
 }

 .dropzone.dragover {
  border-color: #000;
  color: #000;
 }
</style>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 <div id = "uploads"></div>
 <div class="dropzone" id="dropzone">Drop Here</div>

 <script type="text/javascript">
        (function () {
            var dropzone = document.getElementById('dropzone');

            dropzone.ondrop = function (e) {
                e.preventDefault();
                this.className = 'dropzone';
            };
            // On the area
            dropzone.ondragover = function () {
                this.className = 'dropzone dragover';
                return false;
            };

            // Leave the area while pressing
            dropzone.ondragleave = function () {
                this.className = 'dropzone';
            };

            dropzone.ondrop = function (event) {
                event.preventDefault();
                this.className = 'dropzone';
            };

        }());

    </script>
</body>
</html>

I wondered how can I get the file that I dropped in the "box" the file (JSON file in my case). How can I get this file and do some operations with it (like send it to a server as POST format).

I want to know how can I take this dropped file and take it that I will get an access of it or something like that.

By the way, I would like to know how can I send this json as an object to a server that deciphers the information (but I need just to send it in async HttpPOST request). I would like to do the sending of the information without ajax or something like that (not $.get, etc.). I would like to do that with fetch, this and catch. I do not understand how it works and I will be happy if you may help me.

Thank-You!

score 1 · Accepted Answer · answered May 26 '20 at 22:11

Mozilla has a good example of how to get dropped file

You have to just access dataTransfer property in DragEvent object.

(function() {
  var dropzone = document.getElementById('dropzone');

  dropzone.ondrop = function(e) {
    e.preventDefault();
    this.className = 'dropzone';
  };

  dropzone.ondragover = function() {
    this.className = 'dropzone dragover';
    return false;
  };

  dropzone.ondragleave = function() {
    this.className = 'dropzone';
  };

  dropzone.ondrop = function(event) {
    const [item] = event.dataTransfer.items;
    
    console.log(item.getAsFile());
    
    event.preventDefault();
    this.className = 'dropzone';
  };

}());

body {
  font-family: "Arial", sans-serif;
}

.dropzone {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  color: #ccc;
  line-height: 300px;
  text-align: center;
}

.dropzone.dragover {
  border-color: #000;
  color: #000;
}

<div id="uploads"></div>
<div class="dropzone" id="dropzone">Drop Here</div>

I would like to know how can I send this json as an object to a server that deciphers the information (but I need just to send it in async HttpPOST request). I would like to do the sending of the information without ajax or something like that (not $.get, etc.). I would like to do that with fetch, this and catch. I do not understand how it works and I will be happy if you may help me.

Now that's a tricky part. You have to consider if it is not better to use FormData as sending Blob this way is quite easy.

const formData = new FormData();
formData.append("file", file);

fetch(url, {method: 'POST', body: formData})

For application/json however you can either convert File/Blob object to dataURL or base64 with some information about the file extension

Get and send to a server a Json file (Drag & Drop) without ajax

1 Answers1