Website, drag and drop file upload in Classic ASP or ASP.net

Our requirements:

We wish to have the ability to drag and drop a file onto a “zone” on a web page. The file is then uploaded using an ajax process (if using a Javascript framework, please use JQuery). In addition to the drag and drop upload, we would like to be able to capture additional information if required in regular form fields.

Ideally, drag and drop should work for all major web browsers (including Safari on Mac OS X). If Drag and drop doesn't work on a specific browser, then it should degrade nicely.

When the images/document has successfully been uploaded, the drag/drop zone needs to either: change to be the thumbnail of the image, or change to be an image of a generic document.

The server-side needs to be written in either Classic ASP or ASP.NET. If written in ASP.net, then the code has to be written with the understanding that it will run alongside a Classic ASP system.

The server-side process needs to:

Determine the content type. In our case, this is either an image or a document. We do not mind if the content type is pre-defined in the drag and drop form, but we would prefer the detection to be automatic. Meta information to be stored in a MySQL database and files stored in the file sytsem.

If it is an image:

First, a new image name needs to be created. Then, a thumbnail and website version needs to be created. The maximum width and height dimension need to be parameterised. The original version needs to also be stored. The directory structure to store the files must start with uploads/ after that the structure can be whatever you believe is relevant. Meta information is stores in the table media_definition.

CREATE TABLE `media_definition` (
`media_id` int(11) NOT NULL auto_increment,
`media_bin_id` int(11) default '0',
`title` varchar(255) default NULL,
`abstract` longtext,
`description` longtext,
`filename` varchar(255) default NULL,
`creation_date` int(11) default '0',
`is_active` tinyint(1) default NULL,
PRIMARY KEY (`media_id`),
UNIQUE KEY `media_id` (`media_id`),
KEY `is_active` (`is_active`),
KEY `title` (`title`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1


Default media_bin_id to 1 for an image
Default title to the filename unless included in the form upload
Default abstract to “” unless included in the form upload
Default description to “” unless included in the form upload

filename is the target filename of the image ASSUME WE KNOW THE PATH TO THE IMAGE i.e, we know that thumbnails are in uploads/thumbs and fullsize in uploads/fullsize

Default abstract to “” unless included in the form upload
Default creation_date to IOS format date. i.e. YYYYMMDD e.g. 20120307
Default is_active to true


If it is a document:

First, a new document name needs to be created. The directory structure to store the files must start with uploads/ after that the structure can be whatever you believe is relevant. Meta information is stores in the table media_definition.


CREATE TABLE `downloads_definition` (
`download_id` int(11) NOT NULL auto_increment,
`title` varchar(255) default NULL,
`abstract` longtext,
`description` longtext,
`filename` varchar(255) default NULL,
`creation_date` int(11) default '0',
`is_active` tinyint(1) default NULL,
PRIMARY KEY (`download_id`),
KEY `is_active` (`is_active`),
KEY `title` (`title`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1


Default title to the filename unless included in the form upload
Default abstract to “” unless included in the form upload
Default description to “” unless included in the form upload

filename is the target filename of the document ASSUME WE KNOW THE PATH TO THE DOCUMENT i.e, we know that documents are in uploads/documents1

Default abstract to “” unless included in the form upload
Default creation_date to IOS format date. i.e. YYYYMMDD e.g. 20120307
Default is_active to true