ASP.NET – Uploading Files Using Drag and Drop (Client/Server)

imageIn our last few posts, we’ve been talking about HTML5 Drag and Drop. The feature lets uses drag elements on your page and drop them onto a target.

You can use this feature for users to upload files to your server.

In this post, you’ll learn:

  • How you can provide HTML5 Drag and Drop
  • How to send files using jQuery Ajax.
  • Learn how to attach additional data onto the data sent to the sever
  • Create a generic handler in ASP.NET to receive the files.

Of course other servers can be used, such as ASP.NET MVC, ASP.NET Web API, PHP, and Node.js. I’ll provide references to sample code for other servers in the References section.

Continue reading “ASP.NET – Uploading Files Using Drag and Drop (Client/Server)”

HTML5 Tutorial – Drag and Drop with Files (Client)

image_thumb[3]In the last post, we showed you the basics of drag and drop. Drag-and-drop functionality is something that computer users have come to take for granted as “just working,” and there are a few ways to enable it within the browser.

You learned how you need to have a drag source and a drop target, and how to specify each in HTML5. And we learned how the dataTransfer object is used to send data between the drag source and the drop target.

In this chapter, we learn more about how to use Drag and Drop with files.

Continue reading “HTML5 Tutorial – Drag and Drop with Files (Client)”

HTML5 Tutorial – Drag and Drop

imageDrag and drop is a part of the HTML5 standard. Drag-and-drop functionality is something that computer users have come to take for granted as “just working,” and there are a few ways to enable it within the browser.

Imagine a computer or smartphone with a pointing device. — a drag operation could be like a mousedown event that is followed by a series of mousemover events, and the drop could be triggered by the mouse being released.

Continue reading “HTML5 Tutorial – Drag and Drop”