I'm trying to use the swfUpload jquery/flash plugin for uploads, and I'm following the approach by Steven Sanderson (http://blog.stevensanderson.com/2008/11/24/jquery-ajax-uploader-plugin-with-progress-bar/ ). But I can't get it to work. It works fine in the sample application I downloaded from his site. Just to try to get it to work I have tried to copy his page and everything directly in my application, but it still doesn't work.
Here's the page:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>File upload</title>
<link rel="Stylesheet" href="../../Content/Site.css" />
<%-- <script src="../../Scripts/jquery-1.2.6.min.js"></script>--%>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Scripts/swfupload.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-asyncUpload-0.1.js"></script>
</head>
<body>
<div id="MainContents">
<form enctype="multipart/form-data" method="post">
<h1>Your profile</h1>
<p>(In a real app, other form controls would appear here)</p>
<p>
Upload your photo: <input type="file" id="photo" name="photo" />
</p>
<input type="submit" value="Save my profile" />
</form>
</div>
<script type="text/javascript">
$(function () {
$("#photo").makeAsyncUploader({
upload_url: "/Customers/AsyncUpload/",
flash_url: '../../Scripts/swfupload.swf',
button_image_url: '/Content/blankButton.png',
disableDuringUpload: 'INPUT[type="submit"]'
});
});
</script>
<div id="result"></div>
</body>
</html>
And here's the action method:
public Guid AsyncUpload()
{
return _fileStore.SaveUploadedFile(Request.Files[0]);
}
This is in a CustomersController controller, and I have this at the beginning of the controller:
private IFileStore _fileStore = new DiskFileStore();
Just as he does in his sample. Of course I also have the IFileStore interface and DiskFileStore class in place.
I have all the references to the js files and css in the head tag:
<head>
<title>File upload</title>
<link rel="Stylesheet" href="../../Content/Site.css" />
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Scripts/swfupload.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-asyncUpload-0.1.js"></script>
</head>
(Although I have used the latest jQuery I have, rather than 1.2.6 which he had in his sample). I know at least that the scripts are triggered, because in FireBug I can see that the input is dynamically changed to a flash object, as it's supposed to be.
The thing is, AsyncUpload() is never even called. I set a breakpoint there which is never reached. And I'm getting different errors. The first time I tried it I got a 302 error in an alert box from the script. (At that time I had other jQuery scripts on the same page, so I started over with a cleaner page using just these scripts). But now I'm not getting any error, I can choose image and all, but then it just stops at the stage where the text says "Uploading...", but I don't see the progress bar or anything, and it never finishes.
Any ideas what I'm doing wrong?