Can't upload a html file by dropping

I try to upload a html file to my server by clicking a button and dropping file into a div. While i click a button its work fine but in case of drop its not working.

My HTML

<div class="UploadPnl" id="UploadPnl">
<span id="tempUpload" class="glyphicon glyphicon-upload uploadIcon"><br></span>
<p class="uploadIcon">Upload</p>
<input id="inputUpload" type="file" class="file" name="files[]"
    data-preview-file-type="text" style="display: none" accept=".html">

My Jquery:

$( "#UploadPnl" ).droppable({
      drop: function( e, ui ) {
         e.preventDefault();
         e.stopPropagation();
         $(this).css('border', '2px dotted #0B85A1'); 
         var files = e.originalEvent.dataTransfer.files;

         //We need to send dropped files to Server
         alert(files[0]);
      }
    });

Thanks for your help in advance.

Answers 1

  • It is not working if i did it with jquery but i achive it using javascript.

    document.addEventListener("drop", function(event) {
            event.preventDefault();
            if ( event.target.className == "UploadPnl" ) {
                document.getElementById("UploadPnl").style.color = "";
                event.target.style.border = "";
                var file = event.dataTransfer.files[0];
                var reader = new FileReader();
                reader.readAsText(file, "UTF-8");
                reader.onload = function (evt) {
                     var fileString = evt.target.result;
                    //processing readed data
                }
            }
        });
    

Related Articles