将Blob发送到ASP.NET Web API

Question

I'm trying to use a component (slim image cropper) to crop images then send both the original image and the cropped version to my server through a Web API. My problem here is that I get the data as a blob array (first element is the original and the second is cropped) and I have absolutely no idea how to send that data, or how to transform it to be able to send it to my api.

I'm using a javascript function instead of a direct service call to pass more parameters, as supported by the component and documented here.

Here's the function :

var uploadImage = function (formdata, progress, success, failure) {
    var originalArray;
    var croppedArray;

    var apiCall = function (original, cropped) {
        var params = {
            name: formdata[0].name,
            original,
            cropped,
            id: $('hidId').val()
        }
        $.getJSON('/api/Test/UploadImage', params, function (response) {
            if (response) {
                if (response.Success == true) {
                    success('Upload réussi')
                } else {
                    failure('Upload échoué')
                }
            } else {
                failure('Pas de réponse de l\'API')
            }
        });
    };

    var originalReader = new FileReader();
    originalReader.onloadend = function () {
        originalArray = originalReader.result;
        if (originalArray != null && croppedArray != null)
            apiCall(originalArray, croppedArray);
    };
    originalReader.readAsArrayBuffer(formdata[0]);

    var croppedReader = new FileReader();
    croppedReader.onloadend = function () {
        croppedArray = croppedReader.result;
        if (originalArray != null && croppedArray != null)
            apiCall(originalArray, croppedArray);
    };
    croppedReader.readAsArrayBuffer(formdata[1]);
}

I know it must look sketchy, but I have no experience at all with that case. When I get to the $.getJSON(...) line, I get a 404 error in the console, showing that only the "name" parameter is passed.

Just in case it's relevant, here's my api method signature :

public IHttpActionResult UploadImages(string name, byte[] original, byte[] cropped, Guid id)
{
    ...
}

How can I solve this and send the images ? What should be the parameter type on the api side ?

Answer 1

You can use a form with the enctype="multipart/form-data" attribute (you can submit that form via ajax)
And received it as a HttpPostedFileBase type on the server-side.
For Example taken from here:

<form action="" method="post" enctype="multipart/form-data">

  <label for="file">Filename:</label>
  <input type="file" name="file" id="file" />

  <input type="submit" />
</form>

[HttpPost]
public ActionResult Index(HttpPostedFileBase file) {

  if (file.ContentLength > 0) {
    var fileName = Path.GetFileName(file.FileName);
    var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
    file.SaveAs(path);
  }

  return RedirectToAction("Index");
}

EDIT
For multiple files you can use the input's attribute multiple="multiple"
and in the server-side accept a collection of HttpPostedFileBase like IEnumerable<HttpPostedFileBase>.

 <input type="file" multiple="multiple" name="files" id="files" />