Quality Testing

Quality is delighting customers

How to drag and drop a .pdf file from windows to web application

Hi All,

I have a situation where i have to drag a .pdf file from desktop / folder to our web application. I am not sure how to handle such case. Can any one please help me to deal with this. I have attached one snap shot for reference.

NOTE : There is no option to browse a file.

Views: 212

Reply to This

Replies to This Discussion

Hello Srikanth,

The example I made just inserts thumbnails into the page, but this could be adjusted to upload the data to a server. Here is the JavaScript/jquery code I wrote, feel free to use this:

function debug(string) {

$(function() {
// We need to override the dragover event, otherwise Firefox will just open the file on drop
$("#dropArea").bind("dragover", function(event) {

// This is where the actual magic happens :)
$("#dropArea").bind("drop", function(event) {
debug("Dropped something: ");
// Since jquery returns its own event object, we need to get the original one in order to access the files
var files = event.originalEvent.dataTransfer.files;
// jquery nicely loops for us over the files
$(files).each(function(index, file) {
if(!file.type.match(/image.*/)) { // Skip non-images
debug(" <em>not an image, skipping</em>; ");

// We need a new filereader for every file, otherwise the reading might be canceled by the next file
var filereader = new FileReader();
filereader.onloadend = function(event) { $("#thumbnails").append("<img src='"+event.target.result+"' width='100px' />"); };
debug("; ");

// Read the file in data URL format so that we can easily add it to an img tag.


And the HTML for it:

<div id="dropArea">
<p>Drop images here!</p>
<div id="thumbnails">
<div id="debugArea">
<strong>Debug Info:</strong><br/>

Hi surya,

Thanks for your reply. But, i am not getting what you have written. Can you please help me with java code.


TTWT Magazine





© 2020   Created by Quality Testing.   Powered by

Badges  |  Report an Issue  |  Terms of Service