How to Drag and Drop File to a Div in Asp.net With Progress Bar

I am going to show you how to make  a div droppable

First of all you need an div to make it droppable .so let's create a div first
<div id="dragcontainer">Drag and Drop Files Here</div>

I am going to give some style to that div so that it will look like fancy and attractive.

#dragcontainer{
 display:block;
 width: 500px;
 float:left;
 height: 257px;
 background-color:#f7f7f7;
 border: 1px solid #c6d9e9;
 text-align:center;
 line-height: 220px;
 font-size: 25px;
 color:#778f99;
 font-family:"Comic Sans MS", cursive;
 text-transform: uppercase;
}

After the div is created lets create a progress bar div and the div that hold's the file list u have dropped.

<div id="filelist">

<ul></ul>

</div>

 <br />

<div id="prefer">

<div class="progress progress-success progress-striped" id="progress">

<div class="bar"></div>

</div>

</div>

Then i am going to give some css to the progress bar and filelist container div.

.progress {

 background-color: #F7F7F7;

    background-image: 

    linear-gradient(to bottom, #F5F5F5, #F9F9F9);

    background-repeat: repeat-x;

    border-radius: 4px 4px 4px 4px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;

    height: 30px;

    margin-bottom: 20px;

    overflow: hidden;

    width:500px;

    float:left;

    

}

.progress .bar {

 -moz-box-sizing: border-box;

 background-color: #0E90D2;

 background-image: linear-gradient(to bottom, #149BDF, #0480BE);

 background-repeat: repeat-x;

 box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;

 color: #FFFFFF;

 float: left;

 font-size: 12px;

 height: 100%;

 text-align: center;

 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

 transition: width 0.6s ease 0s;

 width: 0;

}

.progress-success .bar,.progress .bar-success{

 background-color:#5eb95e;background-image:-moz-linear-gradient(top, #62c462, #57a957);

 background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));

 background-image:-webkit-linear-gradient(top, #62c462, #57a957);

 background-image:-o-linear-gradient(top, #62c462, #57a957); 

 background-image:linear-gradient(to bottom, #62c462, #57a957);

 background-repeat:repeat-x;filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); }.progress-success.progress-striped .bar,.progress-striped .bar-success{ background-color:#62c462;

 background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));

 background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

 background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

 background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, 
transparent 25%, transparent 50%,
 rgba(255, 255, 255, 0.15) 50%, 
rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

 background-image:linear-gradient
(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, 
rgba(255, 255, 255, 0.15) 50%, 
rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

}

#dragcontainer{

 display:block;

 width: 500px;

 float:left;

 height: 257px;

 background-color:#f7f7f7;

 border: 1px solid #c6d9e9;

 text-align:center;

 line-height: 220px;

 font-size: 25px;

 color:#778f99;

 font-family:"Comic Sans MS", cursive;

 text-transform: uppercase;

}

#prefer{

 display:block;

 width: 500px;

 float:left;

 margin: 10px 0 0 0;

}

#filelist{

 display:none;

 width: 500px;

 float:left;

 height: 257px;

 overflow-y:scroll;

 background-color:#f0f0f0;

 border: 1px solid #c6d9e9;

 line-height: 220px;

 color:#778f99;

 font-family:Arial, Helvetica, sans-serif;

}

#filelist > ul{

 margin:5px;

 list-style-type: none;

}

#filelist > ul >li.success{

 margin:3px;

 font-size: 15px;

 list-style-image:url('https://lh6.googleusercontent.com/-7AlLLyqpBk/UdpChOeAwqI/AAAAAAAAAM4/iT88j8gFaCI/s506-o/ok.png');

} 

Then i am going to write some javascript code to make div droppable

<script type="text/javascript">

$(document).ready(function(){

 var dropbox = document.getElementById('dragcontainer');    // Setup drag and drop handlers.

 dropbox.addEventListener('dragenter', stopDefault, false); //This is used to stop drag events on div

 dropbox.addEventListener('dragover', stopDefault, false);

 dropbox.addEventListener('dragleave', stopDefault, false);

 dropbox.addEventListener('drop', onDrop, false); //This line makes the div droppable and after dropping the file it calls the onDrop function

});

</script>

Then i am going to write the onDrop function and filereader function which will read the file one by one and will prepare the file list..

<script type="text/javascript">

function stopDefault(e) {

  e.stopPropagation();

  e.preventDefault();

 }

 function onDrop(e) {

  var files=null;

  $('#filelist > ul').children().remove();

  if(!$('#filelist').is(':visible'))

  {

   $('#dragcontainer').hide();

   $('#filelist').show();

   e.stopPropagation();

   e.preventDefault();

   files = e.target.file||e.dataTransfer.files;

   ReadFile(files,0);

  }

 }

 function ReadFile(files,i){

  var file=files[i];

  if(i<files.length)

  {

   var reader = new FileReader();

    reader.onerror = function (e) {

     alert(" Error code: " + e.target.error);

    };// Create a closure to capture the file information.

    reader.onload = (function (aFile) {

     return function (evt) {

var cwd=500/files.length;

      var wd=((cwd*(i+1))*100)/500;

var td=100-wd;

      $('.bar').css({'width':(wd+'%')});

      $('#filelist > ul').append("

<li class='success'>"+file.name+"("+Math.round(file.size/1024)+"KB)</li>

");

      i+=1;      

      ReadFile(files,i);

     }

    })(file);// Read file as a data url.

    reader.readAsDataURL(file);

   

  }

 }

</script>

Let's see the demo Here

Reset

Drag and Drop Files Here