MVC3 Valums Ajax File Upload

Question

I'm trying to use valums ajax uploader. http://valums.com/ajax-upload/

I have the following on my page:

var button = $('#fileUpload')[0];
var uploader = new qq.FileUploader({
    element: button,
    allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], 
    sizeLimit: 2147483647, // max size
    action: '/Admin/Home/Upload',
    multiple: false
});

it does post to my controller but qqfile is always null. I tried these:

public ActionResult Upload(HttpPostedFile qqfile)
AND
HttpPostedFileBase file = Request.Files["file"];

without any luck.

I found an example for ruby on rails but not sure how to implement it in MVC http://www.jigsawboys.com/2010/10/06/ruby-on-rails-ajax-file-upload-with-valum/

In firebug i see this: http://localhost:61143/Admin/Home/Upload?qqfile=2glonglonglongname+-+Copy.gif

enter image description here

Those crazy characters you're seeing could be because of this same reason - stackoverflow.com/questions/3183203/… — Chase Florell
– Chase Florell, Commented Oct 14, 2011 at 21:45
I have posted the following github.com/valums/ajax-upload/issues/100 — Valamas
– Valamas, Commented May 23, 2012 at 0:35

ShaneKm · Accepted Answer · 2011-02-04 07:51:17Z

68

I figured it out. this works in IE and Mozilla.

    [HttpPost]
    public ActionResult FileUpload(string qqfile)
    {
        var path = @"C:\\Temp\\100\\";
        var file = string.Empty;

        try
        {
            var stream = Request.InputStream;
            if (String.IsNullOrEmpty(Request["qqfile"]))
            {
                // IE
                HttpPostedFileBase postedFile = Request.Files[0];
                stream = postedFile.InputStream;
                file = Path.Combine(path, System.IO.Path.GetFileName(Request.Files[0].FileName));
            }
            else
            {
                //Webkit, Mozilla
                file = Path.Combine(path, qqfile);
            }

            var buffer = new byte[stream.Length];
            stream.Read(buffer, 0, buffer.Length);
            System.IO.File.WriteAllBytes(file, buffer);
        }
        catch (Exception ex)
        {
            return Json(new { success = false, message = ex.Message }, "application/json");
        }

       return Json(new { success = true }, "text/html");
    }

answered Feb 4, 2011 at 7:51

ShaneKm

21.5k47 gold badges180 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jason Slocomb Over a year ago

This should be marked as the answer, since it's more complete. Nice work Shane, totally helped me out.

Simon Halsey Over a year ago

I'd agree. I wrote a more complete reusable solution, but the above does the same.

saille Over a year ago

Only problem: the whole file is being buffered in memory. what if its a 2GB video? Better to take smaller (100kB) chunks from the stream and write that to a file stream before getting next chunk etc.

Chris Curtis Over a year ago

It appears (at least for me) that IE doesn't like the "application/json" content type, as it requests to download the result. Using "text/html" seems to work for both. Just FYI if someone else runs into the same problem

Pure Function Over a year ago

this solution is the most complete I've seen and the most reliable. Thanks so much :D

|

Darin Dimitrov · Accepted Answer · 2011-02-03 12:46:31Z

1

This component is sending an application/octet-stream instead of multipart/form-data which is what the default model binder can work with. So you cannot expect Request.Files to have any value with such a request.

You will need to manually read the request stream:

public ActionResult Upload(string qqfile)
{
    var stream = Request.InputStream;
    var buffer = new byte[stream.Length];
    stream.Read(buffer, 0, buffer.Length);

    var path = Server.MapPath("~/App_Data");
    var file = Path.Combine(path, qqfile);
    File.WriteAllBytes(file, buffer);

    // TODO: Return whatever the upload control expects as response
}

edited Feb 3, 2011 at 12:46

answered Feb 3, 2011 at 12:38

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

1 Comment

ShaneKm Over a year ago

I fount this: but i can't figure out how to implement it: IE doesn't send the stream in "request.InputStream" ... instead get the input stream through the HttpPostedFileBase from the Request.Files[] collection.

Simon Halsey · Accepted Answer · 2011-02-03 16:36:44Z

IE uploads using multipart-mime. Other browsers use Octet-Stream.

I wrote an upload handler to work with Valums Ajax Uploader that works with both MVC & Webforms & both upload methods. I'd be happy to share with you if you wanted. It closely follows the the PHP handler.

My controller to handle the upload looks like this:

public class UploadController : Controller
{
    private IUploadService _Service;

    public UploadController()
        : this(null)
    {
    }

    public UploadController(IUploadService service)
    {
        _Service = service ?? new UploadService();
    }

    public ActionResult File()
    {
        return Content(_Service.Upload().ToString());
    }

The UploadService looks this:

public class UploadService : IUploadService
{
    private readonly qq.FileUploader _Uploader;

    public UploadService()
        : this(null)
    { }

    public UploadService(IAccountService accountservice)
    {
        _Uploader = new qq.FileUploader();
    }

    public UploadResult Upload()
    {
        qq.UploadResult result = _Uploader.HandleUpload();
        if (!result.Success)
            return new UploadResult(result.Error);

                     .... code .....

        return new UploadResult((Guid)cmd.Parameters["@id"].Value);
        }
        catch (Exception ex)
        {
            return new UploadResult(System.Web.HttpUtility.HtmlEncode(ex.Message));
        }
        finally
        {
                      ............code.........
        }

    }

   ...............code ............

bob · Accepted Answer · 2013-04-19 22:36:01Z

1

You should try:

Stream inputStream = (context.Request.Files.Count > 0) ? context.Request.Files[0].InputStream : context.Request.InputStream;

edited Apr 19, 2013 at 22:36

user1131435

answered Apr 19, 2013 at 22:16

bob

111 bronze badge

Comments

Gaurang Jadia · Accepted Answer · 2011-10-14 21:38:03Z

0

I am developing in ASP.Net 4.0 but we don't have MVC architecture. I had same issue few days back. But, I figured it out and here is my solution.

//For IE Browser
HttpPostedFile selectedfile = Request.Files[0];
System.Drawing.Bitmap obj = new System.Drawing.Bitmap(selectedfile.InputStream);

//For Non IE Browser
System.Drawing.Bitmap obj = new System.Drawing.Bitmap(Request.InputStream);

Now, you can use obj for further operation.

answered Oct 14, 2011 at 21:38

Gaurang Jadia

1,51615 silver badges19 bronze badges

Collectives™ on Stack Overflow

MVC3 Valums Ajax File Upload

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related