This is the simpliest way I can describe how to make it work so some steps may seem a bit ... let's say noobish, but I want to make sure that even those who are not very familiar with the programming to be able to do it.
1. Go to the FancyUpload page and download the latest version of the code. Simple enough huh?
2. Unzip the files into the directory of the web app.
3. Open the file Build.html and start copying the code from there to the desired aspx page. I think most people will be able to differ what must they copy and what not...
4. In the copied text edit the links to the different stylesheets and scripts.
Most importantly to make it work edit
window.addEvent('domready', function() { // wait for the content
// our uploader instance
var up = new FancyUpload2($('demo-status'), $('demo-list'), { // options object
// we console.log infos, remove that in production!!
verbose: true,
// url is read from the form, so you just have to change one place
url: $("form-demo").action
the original url is $("form-demo").action so you have to change it to the relative link of the handler you will create in the next few steps. I am saying 'have to', because Firefox and Chrome have problem getting the link from the form action attribute.
5. Create a Handler (*.ashx) with name as you have writen in step 4.
3. Here is a code sample of what the handler should look like (some of the things written here are not required like the namespace for example):
<%@ WebHandler Language="C#" Class="JQueryUpload.FileUpload" %>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
namespace JQueryUpload
{
///
/// File Upload httphandler to receive files and save them to the server.
///
public class FileUpload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//checks if there are given any files to upload
if (context.Request.Files.Count == 0)
{
context.Response.ContentType = "text/plain";
context.Response.Write("No files received.");
}
else
{
HttpFileCollection files = context.Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile uploadedfile = context.Request.Files[i];
string FileName = uploadedfile.FileName;
string FileType = uploadedfile.ContentType;
int FileSize = uploadedfile.ContentLength;
//don't forget you must give permissions to the Network Service to write inside the folder
string filePath = HttpContext.Current.Server.MapPath("~/UploadedFiles/");
uploadedfile.SaveAs(filePath);
context.Response.ContentType = "text/plain";
context.Response.Write("{\"name\":\"" + FileName + "\",\"type\":\"" + FileType + "\",\"size\":\"" + FileSize + "\"}");
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Now if it doesn't work you should see if you haven't forgotten some
Special thanks to the people who contributed for this: Harald Kirschner(creator of FancyUpload),Ben Newton(Article about FancyUpload + classic ASP)
