function sendFileToServer(formData,status,id)
{
    var uploadURL = $("#upload-path").attr("data-upload-path");//Upload URL
    //var linkedId = $("#linked-id").attr("data-linked-id");//project id
    //alert(linkedId);
    formData.append('id',id);
    var extraData ={}; //Extra Data.
    var jqXHR=$.ajax({
            xhr: function() {
            var xhrobj = $.ajaxSettings.xhr();
            if (xhrobj.upload) {
                    xhrobj.upload.addEventListener('progress', function(event) {
                        var percent = 0;
                        var position = event.loaded || event.position;
                        var total = event.total;
                        if (event.lengthComputable) {
                            percent = Math.ceil(position / total * 100);
                        }
                        //Set progress
                        status.setProgress(percent);
                    }, false);
            }
            return xhrobj;
        },
    url: uploadURL,
    type: "POST",
    contentType:false,
    processData: false,
        cache: false,
        data: formData,
        success: function(data){
            status.setProgress(100);
            
        }
    }); 
    status.setAbort(jqXHR);
}
 
var rowCount=0;
function createStatusbar(obj)
{
     rowCount++;
     var row="odd";
     if(rowCount %2 ==0) row ="even";
     this.statusbar   = $("<div class='row'><div class='statusbar "+row+"'></div>");
     this.filename    = $("<div class='filename'></div>").appendTo(this.statusbar);
     this.size        = $("<div class='filesize'></div>").appendTo(this.statusbar);
     this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
     this.abort       = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
     this.statusbar.appendTo(obj);
     this.setFileNameSize = function(name,size)
     { 
        var sizeStr="";
        var sizeKB = size/1024;
        if(parseInt(sizeKB) > 1024)
        {
            var sizeMB = sizeKB/1024;
            sizeStr = sizeMB.toFixed(2)+" MB";
        }
        else
        {
            sizeStr = sizeKB.toFixed(2)+" KB";
        }
 
        this.filename.html(name);
        this.size.html(sizeStr);
     }
     this.setProgress = function(progress)
     {
        var progressBarWidth =progress*this.progressBar.width()/ 100;  
        this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
        if(parseInt(progress) >= 100)
        {
            this.abort.hide();
        }
        if(parseInt(progress) == 100)
        {
            $('.progressBar').addClass('hide');
            $('.filename').addClass('hide');
            $('.filesize').addClass('hide');
            $(".statusbar").html("upload complete");
            setTimeout(function() { $(".statusbar").fadeOut('slow'); }, 2000);
        }
     }
     this.setAbort = function(jqxhr)
     {
        var sb = this.statusbar;
        this.abort.click(function()
        {
            jqxhr.abort();
            sb.hide();
        });
      }
}
function handleFileUpload(files,obj,id)
{
   for(var i = 0; i < files.length; i++) 
   {
        var fd = new FormData();
        fd.append('file', files[i]);
        var status = new createStatusbar(obj); //Using this we can set progress.
        status.setFileNameSize(files[i].name,files[i].size);
        if(files[i].size>5000000){
            this.message = $("<p style='color:red'>file size can not grater than 5 MB</p>");
            this.message.appendTo(obj);
        }else{
        sendFileToServer(fd,status,id);
       }
    }
}
$(document).ready(function()
{
$('.dragandrophandler').each(function(){

var id=$(this).data('uid');

var obj = $('#dragandrophandler-'+id);
//var obj = $(this).obj;
//var obj =  $(this).attr("id");
obj.on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
    //$(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e) 
{
     e.stopPropagation();
     e.preventDefault();
});
obj.on('drop', function (e) 
{
    //$(this).css('border', '2px dotted #0B85A1');
     e.preventDefault();
     var files = e.originalEvent.dataTransfer.files;
     //We need to send dropped files to Server
     handleFileUpload(files,obj,id);
     //alert('Success! Document Uploaded');
     //window.location.reload();
});
$(document).on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
$(document).on('dragover', function (e) 
{
  e.stopPropagation();
  e.preventDefault();
  //obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
 
});

});