Just add this client side code.
<script type="text/javascript" src="/Content/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/Content/js/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fileInput").uploadify({
uploader: "/Content/swf/uploadify.swf",
script: "/UIImageViewer/Upload",
cancelImg: "/Content/imgs/cancel.png",
auto: true,
folder: "/uploads",
onError: function (a, b, c, d) {
if (d.status == 404)
alert("Could not find upload script. Use a path relative to: "+"<?= getcwd() ?>");
else if (d.type === "HTTP")
alert("error "+d.type+": "+d.status);
else if (d.type ==="File Size")
alert(c.name+" "+d.type+" Limit: "+Math.round(d.sizeLimit/1024)+"KB");
else
alert("error "+d.type+": "+d.text);
}
});
});
</script>
<body>
<input type="file" name="fileInput" id="fileInput" />
</body>
Then create a controller with a "Upload" action.
public string Upload(HttpPostedFileBase FileData)
{
/*
*
* Do something with the FileData
*
*/
return "Upload OK!";
}
The tricky part, which drove me crazy, is that you need to use the "HttpPostedFileBase" class NOT the "HttpPostedFile" class. If you use the other class the script will return a "IO Error #2038" error message.
Posts
26 comments:
This doesn't work at all. The function gets called but the HttpPostedFileBase object is null. Any ideas?
Make sure your parameter for the action is called "FileData". Thats what Uploadify uses to send the file data.
Thanks its really good, but now im having problem, i want to add on description that i did, but its start upload automaticall can we stop until i put my description there?.
Is there have any parameter for stop automatically upload. and i and to put another button for upload all files at a time its possible from here.
Please reply me ASAP.
Thanks
khemraj.bhattarai@gmail.com
Your example didn't work for me either. I replaced the line $("#fileInput").fileUpload >> with >> $("#fileInput").uploadify . And the uploader variable was wrong for me which ment the button didn't display : 'uploader.swf' >> to >> 'uploadify.swf'
.. making them changes , it worked thanks.
Yeah it looks like the new version changed some of the function names and the swf file name.
I'm using the newest version, and I've got it working (mostly). It was working fine until my most recent changes, and now I'm getting an error despite the fact that the upload is still working.
There is no automatic start of the upload unless you specify that in a parameter. You don't need to specific "FileData" as the form action, and where "FileData" is used in the "fileDataName" parameter, replace this if you need to perform checks. This is what is usually the input control name, and is retrieved in the Request.Files.Keys collection. I have two upload controls on my form, and check this value prior to processing.
Since this control doesn't perform an actual "post", you can't access form variables. I needed to access the current project item's id for database entry, so I added a tag to the upload script that sent the id as a parameter. It was a tag much like what is used in MVC to display repeated data values. I tried to leave an example, but this blog doesn't allow it.
Khem Raj, I'm not sure what you were meaning by adding another button - you should have only one button to perform the upload, and it really isn't a button. It's a link, and if you need an example, go to the Uploadify site's Demo page, and view the page source. That's where I got my example, and it works.
You can probably replace the interior of the link with an img tag to make it appear as a button, but a form submit button will not work with this plugin, or at least it hasn't for me.
Does this work for multiple file uploads at the same time (ie, being able to hold control in the file select dialog and choosing multiple files?)
I'm trying to use the example and am only able to select one file at a time.
Also, would it be possible for you to post a full code example of this... Controller, view, and script? Thanks!!
Yes it does support multiple files.
You just have to change the option in javascript side "multi: true".
Here are all the options. http://www.uploadify.com/documentation/
Everything should be the same on the server code. The way Uploadify sends multiple files is by queuing them up and then sending the files one by one.
Hi to all,
i am using asp.net mvc 2 and uploadify and when saving the files to the disk via FileUploads post controller action, i would like to be able to return to the same view in order to be able to update and display the uploaded images. I cannot do this, due to the fact that uploadify "catches" all the results from my FileUploads action and displaying them inside an alert button as content. In other words, after uploading the files i am not able to use return View() or RedirectToAction(), but only return Content().
Any ideas?
Use Uploadify's "onComplete" event to redirect your page to the newly uploaded images.
Please help me.
Uploadify plugin work perfect on local server. but fails when i check it after deploying it on live server.
I have implemented Uplodify with ASP.NET MVC 2.
I am returning an action result instead of a string when we call Upload method....i want the filename to be kept in hidden field or something to be used later when i submit the page.
FYI - I just had a problem with the swf Browse button not showing - actually, the JS uploadify code was not loading at all.
Turned out I was loading jquery twice, once in an (ascx) included header menu and then once for uploadify.
What really caught me was that I needed to ensure jquery loaded BEFORE uploadify. I spotted this with FireBug - and had to move the jscript code down to the end of the page to get uploadify to load after jquery. So, watch the sequence you load your jscript files
Hi to all,
seems like i have an issue with Uploadify when comes to Firefox. I us the 3.6.9 version and after the file upload finishes and try to display a message to the user using javascript alert box, it hangs. Meaning, i am not able to click on any element on on the Firefox window and i have to kill the process.
Other visitors of my site, have complained that the upload fails when using Firefox.
I have no issues when using other browsers.
Hello all,
This is a nice blog. I'm using ASP.Net MVC2, but this doesn't work, but I don't know why. The swf object doesn't show after page load. I'm using jquery 1.4.2 and the latest version of the uploadify script. It makes no sense why I cannot see the file input after page load, when I take a look at firebug, there are no errors. Can someone help me?
Thanks in advance
@dkarantonis I have the same issue with FF, also, the browse button is not being displayed on IE (7,8).
It seems to be a problem with adobe flash player..
Somebody has a workaround?
I had the same problem with IE8 and IE7. Turns out that I didn't have the plugin for flash loaded in IE. It worked fine in Chrome, but not in IE, which was my clue.
I visited http://kb2.adobe.com/cps/155/tn_15507.html and that's what cinched it for me.
After loading the plugin for flash, it all worked fine immediately
Thanks !! I also got a HttpPostedFileBase always null because my parameter name in the action method was NOT FileData. So : public ActionResult AddPic(HttpPostedFileBase FileData){} is the way to go, whereas public ActionResult AddPic(HttpPostedFileBase file){} was KO.
You saved my day :)
Sam (France)
I'm happy it helped :-)
Hi, I have some problem with HttpPostedFileBase object is null when the file size is over 15mb.
Any idea?
Have you tried setting the HTML form attribute to "enctype=multipart/form-data"?
Yes, even Ｉ add " = "multipar
t/form-data" }", I get the same result too.
Any IIS7 settings that I need to check it?
Views code:
@using (Html.BeginForm("Index", "ComputerSoftware", FormMethod.Post, new { enctype = "multipart/form-data" }))
input type="file" name="fileData" id="multipleFiles"
}
hi i was searching a way to implement uploadify in mvc, i am using uploadify v.3.1 your code not working in this version can please put code for new version...thanks for your notes.atleast now i know its possible
I use uploadify v.3.2 and ASP.Net MVC 2. This code do not working. Request.Files still null and Request.Files["FileData"], Request.Files["Filedata"] and other's are null.
Uploadify do not working and can't be customized. For exampleuer cann't add custom upload button and post file with description.
In case anyone comes across this. I now use jQuery-File-Upload, no flash needed. http://blueimp.github.io/jQuery-File-Upload/
Post a Comment