1

i get 415 (Unsupported Media Type) when i try to post image to ASP.Net API 2 The request entity's media type 'multipart/form-data' is not supported for this resource.","exceptionMessage": "No MediaTypeFormatter is available to read an object of type 'Attachment' from content with media type 'multipart/form-data.

my Backend Post method :

 [HttpPost] [Route("api/listing/{listingId}/Attachment/")] public async Task<dynamic> Post([FromBody] Attachment model) { var Attachments = new Attachment { ListingId = model.ListingId, Content = model.Content, Description = model.Description, Name = model.Name, MimeType = model.MimeType, Size = model.Size, CreatedOn = DateTime.UtcNow, UpdatedOn = model.UpdatedOn, }; return await DataStore.InsertDynamicAsync(Attachments); }

and my front-end method : 

 onChangeImage(e: any) { console.log(this.className + 'onChangeImage.event=' +JSON.stringify(event)); console.log(this.className + 'onChangeImage._listingAttachmentService undefined?: ' + (this._listingAttachmentService === undefined)); const inputElement = this.fileInput.nativeElement; const fileList = inputElement.files; const files = []; console.log('AttachmentsTabComponent: file count = ' + fileList.length); if (fileList.length > 0) { for (let i = 0; i < fileList.length; i++) { // get item const file = fileList.item(i); files.push(file); const model: Attachment = { listingId: this.listing.id, mimeType: file.type, name: file.name, size: file.size, updatedOn: file.lastModifiedDate }; const reader = new FileReader(); reader.readAsDataURL(file); console.log(this.className + 'onChangeImage.listingAttachmentService (before reader.onload) undefined?: ' + (this._listingAttachmentService === undefined)); reader.onload = (readerEvt: any) => { const binaryString = readerEvt.target.result; //base-64 encoded ASCII string model.content = btoa(binaryString); console.log(this.className + 'onChangeImage.listingAttachmentService (during reader.onload) undefined?: ' + (this._listingAttachmentService === undefined)); console.log(this.className + 'ListingAttachmentModel.content.length=' + JSON.stringify(model.content.length)); // this._listingAttachmentService.add(model); }; } // try to clear the file input try { // TODO: fix this this.fileForm.nativeElement.reset(); inputElement.value = ''; if (inputElement.value) { inputElement.type = 'text'; inputElement.type = 'file'; } } catch (e) { } this._listingAttachmentService.upload(this.listing.id, files) .subscribe(data => { this.listing.attachments = data; }); } }

and my listingAttachmentService

upload(listingId: number, files: Array<File>) { this._logger.debug('method upload() entered'); this._logger.debug('upload() listingId=' + listingId); this._logger.debug('this.fileToUpload.length=' + files.length); var self = this; return Observable.create(observer => { console.log('creating Observable'); let formData: FormData = new FormData(), xhr: XMLHttpRequest = new XMLHttpRequest(); formData.append('listingId', listingId); for (let i = 0; i < files.length; i++) { formData.append('uploads[]', files[i], files[i].name); } xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { observer.next(JSON.parse(xhr.response)); observer.complete(); } else { observer.error(xhr.response); } } }; let newbaseUrl = self.baseUrl + listingId + '/attachment/' ; xhr.open('POST', newbaseUrl, true); xhr.send(formData); }) .catch(this.handleError); }
Improve this question
1
  • Can you check my answer. Commented Jul 24, 2016 at 4:23

1 Answer 1

Reset to default
1

You should use a custom MediaTypeFormatter. More information here: http://www.asp.net/web-api/overview/formats-and-model-binding/media-formatters and a sample here http://blog.marcinbudny.com/2014/02/sending-binary-data-along-with-rest-api.html#.V5MDDzV7qYg

 public class CustomFormatter : MediaTypeFormatter { public CustomFormatter() { SupportedMediaTypes.Add(new MediaTypeHeaderValue("multipart/form-data")); } public override bool CanReadType(Type type) { return type == typeof(Attachment); } public override bool CanWriteType(Type type) { return false; } public async override Task<object> ReadFromStreamAsync(Type type, Stream readStream, HttpContent content, IFormatterLogger formatterLogger) { var provider = await content.ReadAsMultipartAsync(); var modelContent = provider.Contents .FirstOrDefault(c => c.Headers.ContentType.MediaType == "application/json"); // Can also use ContentDisposition.Name.Normalize == "attachment" var attachment = await modelContent.ReadAsAsync<Attachment>(); var fileContents = provider.Contents .Where(c => c.Headers.ContentType.MediaType == "image/jpeg").FirstOrDefault(); // can also use ContentDisposition.Name.Normalize() == "image" attachment.Content = await fileContents.ReadAsByteArrayAsync(); return attachment; } }

Register the custom media formatter:

private void ConfigureWebApi(HttpConfiguration config) { //other code here config.Formatters.Add(new CustomFormatter()); }

A post will like below

POST http://localhost/api/FileUpload HTTP/1.1 Content-Type: multipart/form-data; boundary=-------------------------acebdf13572468 User-Agent: Fiddler Content-Length: 88778 ---------------------------acebdf13572468 Content-Type: application/json; charset=utf-8 Content-Disposition: form-data; name=attachment {"ListingId":"testl"} ---------------------------acebdf13572468 Content-Disposition: form-data; name=image; filename=image.jpg Content-Type: image/jpeg Image content ---------------------------acebdf13572468--

Hope this helps.

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

7 Comments

i checked your answer but i am getting 500 internal server error with error message An error has occurred.", "exceptionMessage": "Object reference not set to an instance of an object
"stackTrace": " at OutdoorAccess.Api.Utilities.CustomFormatter.<>c.<ReadFromStreamAsync>b__3_0(HttpContent c) in C:\\Users\\keroles.hakem\\Documents\\mvp\\web-api\\OutdoorAccess.Api\\Utilities\\CustomFormatter.cs:line 36\r\n at System.Linq.Enumerable.FirstOrDefault[TSource](IEnumerable1 source, Func2 predicate)\r\n at OutdoorAccess.Api.Utilities.CustomFormatter.<ReadFromStreamAsync>d__3.MoveNext() in C:\\Users\\keroles.hakem\\Documents\\mvp\\web-api\\OutdoorAccess.Api\\Utilities\\CustomFormatter.cs:line 35\r\n--- End of stack trace from.... }
looks like your post doesn't have a content-type:image/jpeg . What is the content-type for the image you are uploading ? Can you take a fiddler trace of your post and update here.
i am using Observable take look at onChangeImage() method and upload in my question.
Can you add xhr.setRequestHeader("Content-type", "image/jpeg"); just before xhr.send(formData);
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.