Drag and Drop using ASP.net and jquery
14,815
Try This.
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Upload.aspx.cs" Inherits="upload.Upload" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style>
body { padding:10px; font:14px/18px Calibri }
.bold { font-weight:bold }
td { padding:5px; border:1px solid #999 }
p, output { margin:10px 0 0 0 }
#drop_zone
{
margin:10px 0;
width:40%;
min-height:150px;
text-align:center;
text-transform:uppercase;
font-weight:bold;
border:8px dashed #898;
height: 160px;
}
</style>
<title></title>
<script>
var files;
function handleDragOver(event) {
event.stopPropagation();
event.preventDefault();
var dropZone = document.getElementById('drop_zone');
dropZone.innerHTML = "Drop now";
}
function handleDnDFileSelect(event) {
event.stopPropagation();
event.preventDefault();
/* Read the list of all the selected files. */
files = event.dataTransfer.files;
/* Consolidate the output element. */
var form = document.getElementById('form1');
var data = new FormData(form);
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText) {
alert("upload done!");
} else {
//alert("upload failed!");
}
};
xhr.open('POST', "Upload.aspx");
// xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.send(data);
}
</script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<br />
<div id="drop_zone">Drop files here</div>
</form>
</body>
<script>
if (window.File && window.FileList && window.FileReader) {
/************************************
* All the File APIs are supported. *
* Entire code goes here. *
************************************/
/* Setup the Drag-n-Drop listeners. */
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleDnDFileSelect, false);
}
else {
alert('Sorry! this browser does not support HTML5 File APIs.');
}
</script>
</html>
Server-side (Upload.aspx.cs)
using System;
using System.IO;
using System.Web;
namespace upload
{
public partial class Upload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
UploadFile(sender,e);
}
}
protected void UploadFile(object sender, EventArgs e)
{
HttpFileCollection fileCollection = Request.Files;
for (int i = 0; i < fileCollection.Count; i++)
{
HttpPostedFile upload = fileCollection[i];
string filename ="c:\\Test\\" + Path.GetRandomFileName();
upload.SaveAs(filename);
}
}
}
}
Author by
Mitchell
Updated on June 05, 2022Comments
-
Mitchell almost 2 years
I try to create a drag and drop feature for avatar images. I want the files that someone drags into the box; get uploaded to a directory: '/images/profile/$username'.
This is my code:
<div class='fileDrop'> <span id='fileDropTarget'>Drag your files here</span> </div> <script> function fileSetUploadPercent(percent) { var uploadString = "Uploaded " + percent + " %"; $('#fileDropTarget').text(uploadString); } function fileUploadStarted(index, file, files_count) { fileSetUploadPercent(0); //set the upload status to be 0 } function fileUploadUpdate(index, file, currentProgress) { var string = "index = " + index + " Uploading file " + file.fileName + " size is " + file.fileSize + " Progress = " + currentProgress; $('#status').text(string); fileSetUploadPercent(currentProgress); } function fileUploadFinished(index, file, json, timeDiff) { fileSetUploadPercent(100); $('#fileDropTarget').css('border', '2px dotted #000000').text("Upload Voltooid"); } function fileDragLeave(event) { $('#fileDropTarget').css('border', '2px dotted #000000').text("Sleep uw foto hierin"); } function fileDragOver(event) { $('#fileDropTarget').css('border', '2px dashed #000000').text("Sleep uw foto hierin"); } $(".fileDrop").filedrop({ fallback_id: 'fallbackFileDrop', url: '/controls/upload.ascx', allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif'], // filetypes allowed by Content-Type. Empty array means no restrictions allowedfileextensions: ['.jpg', '.jpeg', '.png', '.gif'], // file extensions allowed. Empty array means no restrictions // refresh: 1000, paramname: 'fileUpload', // POST parameter name used on serverside to reference file, can also be a function taking the filename and returning the paramname maxfiles: 1, // Ignored if queuefiles is set > 0 maxfilesize: 10, // MB file size limit // queuefiles: 0, // Max files before queueing (for large volume uploads) // queuewait: 200, // Queue wait time if full // data: {}, // headers: {}, // drop: empty, // dragEnter: empty, dragOver: fileDragOver, dragLeave: fileDragLeave, // docEnter: empty, // docOver: fileDocOver, // docLeave: fileDocLeave, // beforeEach: empty, // afterAll: empty, // rename: empty, error: function (err, file) { switch (err) { case 'BrowserNotSupported': $('#fileDropTarget').css('border', '2px dashed #FF0000').text('Uw browser wordt niet gesupport'); break; case 'TooManyFiles': $('#fileDropTarget').css('border', '2px dashed #FF0000').text('U kunt maar 1 foto tegelijk uploaden'); break; case 'FileTooLarge': $('#fileDropTarget').css('border', '2px dashed #FF0000').text('Uw foto is groter dan 10MB'); break; case 'FileTypeNotAllowed': $('#fileDropTarget').css('border', '2px dashed #FF0000').text('Alleen fotos zijn toegestaan'); break; case 'FileExtensionNotAllowed': $('#fileDropTarget').css('border', '2px dashed #FF0000').text('Alleen fotos zijn toegestaan'); break; default: $('#fileDropTarget').css('border', '2px dashed #FF0000').text(err); break; } }, uploadStarted: fileUploadStarted, uploadFinished: fileUploadFinished, progressUpdated: fileUploadUpdate }); </script>
But everytime I try to upload a file; I get the error: 'Not Found'. The other problem is that I want to upload these files with a asp.net control and a POST request. I dont know how to add a file to a FileUploadControl; and I have no idea how to get the file from the dragfield the upload control.
protected void Page_Load(object sender, EventArgs e) { string filetype = Request.QueryString["fileType"]; string filename = Request.QueryString["fileUpload"]; FileUpload FileUploadControl = new FileUpload(); string location = "~/upload"; try { if (filetype == "avatar") location = "images/profile/"; FileUploadControl.SaveAs(Server.MapPath("~/") + location + filename); LabelStatus.Text = "Upload status: File uploaded!"; } catch (Exception ex) { LabelStatus.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message; } }
Thank you in advanced.