Avoiding URL Encoding in Form Data

Question

I am trying to submit formData when uploading a file from AngularJS to WebApi. For some reason, all values ​​are encoded as% 5B% 5D, the keys are normal. I use the library to upload files. This is a Javscript or WebApi issue. Any idea?

uploadFile: function(ids, files, success, progress, error) { return $upload.upload({ url: '/Api/User/UploadFile', method: "POST", data: { ids: ids }, file: files }).progress(progress).success(success).error(error); } 

  public async static Task<MultipartContent> GetMulipartContent(ApiController controller) { if (!controller.Request.Content.IsMimeMultipartContent()) { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } var root = HttpContext.Current.Server.MapPath("~/App_Data"); var provider = new MultipartFormDataStreamProvider(root); var fileData = new List<KeyValuePair<string, byte[]>>(); await controller.Request.Content.ReadAsMultipartAsync(provider); foreach (var file in provider.FileData) { fileData.Add(new KeyValuePair<string, byte[]>( file.Headers.ContentDisposition.FileName, File.ReadAllBytes(file.LocalFileName))); FileHelper.WaitFileUnlockedAsync(() => File.Delete(file.LocalFileName), file.LocalFileName, 30, 800); } return new MultipartContent(provider.FormData, fileData); } } public class MultipartContent { public MultipartContent(NameValueCollection formData, List<KeyValuePair<string, byte[]>> fileData) { FormData = formData; FileData = fileData; } public NameValueCollection FormData { get; private set; } public List<KeyValuePair<string, byte[]>> FileData { get; private set; } } 

Answer 1

$ upload is an AngularJS library. The problem was that the load function takes directly an array or object and does not allow nested objects. The problem is resolved. Thanks for the support.

 uploadFile: function(ids, files, success, progress, error) { return $upload.upload({ url: '/Api/User/UploadFile', method: "POST", data: ids, //-------- Problem solved. file: files }).progress(progress).success(success).error(error); } 

Answer 2

I would try setting dataType and enctype to an AJAX call (not sure what the .upload () method is, but it looks like a jQuery AJAX call).

 dataType: 'json', enctype: 'multipart/form-data' 

and see if he fixes it.

After further reading, .upload () looks like something special related to the $ http service and may already set these values.