0

I want to post three things to my MVC Controller: one image and two strings.

On the View, I've got a form that uses enctype="multipart/form-data" that automatically submits the form after an image file is selected. This is the submit handler for this form:

    $("#PhotoUploadForm").on("submit", function (event) {
        event.preventDefault();

        var ImageData = $("#PhotoUploadFileInput").val();
        var GuestNumber = $("#GuestID").val();
        var TCSA_ID = vm.GetSelectedTreatmentAreaTCSA_ID(vm.Photographs.SelectedTreatmentArea());

        var dto = {
            ImageData: ImageData,
            GuestNumber: GuestNumber,
            TCSA_ID: TCSA_ID
        }

        $.ajax({
            url: 'SaveImage',
            type: "POST",
            contentType: "multipart/form-data",
            data: ko.toJSON(dto),
            success: function (data) {
                console.log(submitted);
            }
        });
    });

The dto object is defined in my Model:

public class PhotoUploadDTO
{
    public HttpPostedFileBase ImageData { get; set; }
    public string GuestNumber { get; set; }
    public string TCSA_ID { get; set; }
}

And in my Controller, I have an action that takes in dto as a parameter:

   public ActionResult SaveImage(PhotoUploadDTO dto)
   {
     //etc.
   }

When I try to post dto, everything gets posted as null. This problematic for me because I want to be able to post the image and two strings to the controller simultaneously.

I suspect that the issue is with var ImageData (which is set to the value of <input type="file" id="PhotoUploadFileInput"> on my View), and that it is being posted as C:/fakepath/etc. but not as the actual image file. It's frustrating because I know it wouldn't even be an issue if I had a form that just posted the image, but I need to use this submit handler and I don't know how to bring the actual image data into it.

Why is the data null when it hits the MVC Controller, and how can I post these three items while still being able to use a submit handler?

6
  • 1
    You can't upload a file via ajax. There are some workarounds such as uploading the file via an iframe, but you just can't do it this way unfortunately. Commented Dec 5, 2014 at 18:42
  • I think your comment should suffice as an answer, if you want to post it as an answer. Commented Dec 5, 2014 at 18:45
  • @MelanciaUK 'You can't upload a file via ajax *this way' sorry for the confusion Commented Dec 5, 2014 at 18:53
  • 1
    @Christopher.Cubells What? You can. Using XMLHttpRequest sendAsBinary() or the File API for new browsers. Commented Dec 5, 2014 at 18:56
  • 1
    You can find a solution here: stackoverflow.com/questions/2306910/… Commented Dec 5, 2014 at 18:57

1 Answer 1

1

Uploading a file via ajax is a tricky thing. Some of the most modern web browsers handle this by using the File API which will indeed work for uploading a file via ajax. However, using this solution will not work with people on older browsers.

Your best bet is using a jquery plugin or something similar that will fall back on techniques such as uploading the file via an iframe or other workarounds.

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

1 Comment

I figured out that the jQuery File Upload plugin works here: github.com/blueimp/jQuery-File-Upload/wiki/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.