Xamarin.Forms Upload Multiple Images with Data

Question

I have found several tutorials on how to upload an image or multiple images in Xamarin. However, I have not found how to send multiple images with each image containing some satellite data.

This is how the model looks like on the server:

public class AppFileDTO
{
    public IFormFile File { get; set; }
    public string CategoryName { get; set; }
    public string CategoryDescription { get; set; }
    public string Detail { get; set; }
}

But the controller needs a list of data. Here is the Asp.Net Web Api endpoint:

 [HttpPost("UploadAppFiles/{id}")]
 public async Task<IActionResult> UploadAppFiles(int id, IEnumerable<AppFileDTO> appFileDTOs)
 {
     ...
 }

How can I upload something like that?

I found something on stack overflow on how to upload a single image with satellite data:

MultipartFormDataContent multiContent = new MultipartFormDataContent();

// Image 1
HttpContent fileStreamContent = new StreamContent(vm[0].File);
fileStreamContent.Headers.ContentDisposition = new 
System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") 
{
    Name = "File", 
    FileName = vm[0].File.FileName 
};
fileStreamContent.Headers.ContentType = new 
System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
multiContent.Add(fileStreamContent );

// Satellite data, image 1
multiContent.Add(new StringContent(vm[0].CategoryName), "CategoryName");
multiContent.Add(new StringContent(vm[0].CategoryDescription), "CategoryDescription");
multiContent.Add(new StringContent(vm[0].Detail), "Detail");

// Send
var response = await client.PostAsync(url, multiContent);

How would you upload multiple?

This is how I upload the images on Postman for testing purposes, which works perfectly:

Leo Zhu · Answer 1 · 2019-12-09T09:42:54.057

i think you could use MultipartFormDataContent to add multiple images,and use ContentDispositionHeaderValue.Parameters to add the values of your Data.

for example:

using (var content = new MultipartFormDataContent())
{
  content.Add(CreateFileContent(vm[0]);
  content.Add(CreateFileContent(vm[1]);

  var response = await client.PostAsync(url, content);
  response.EnsureSuccessStatusCode();
}


private StreamContent CreateFileContent(AppFileDTO appFileDTO)
{
  var fileContent = new StreamContent(appFileDTO.File.Stream);//your file stream
  fileContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")
     {
        Name = "\"files\"",
        FileName = "\"" + appFileDTO.File.FileName + "\"",           
     }; // the extra quotes are key here
  fileContent.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");  
  fileContent.Headers.ContentDisposition.Parameters.Add(new NameValueHeaderValue("CategoryName",appFileDTO.CategoryName));      
  fileContent.Headers.ContentDisposition.Parameters.Add(new NameValueHeaderValue("CategoryDescription", appFileDTO.CategoryDescription));   
  fileContent.Headers.ContentDisposition.Parameters.Add(new NameValueHeaderValue("Detail", appFileDTO.Detail));   
  return fileContent;
}

and get Content-Disposition parameters refer to https://stackoverflow.com/a/30193961/10768653

score 1 · Accepted Answer · answered Dec 18 '19 at 01:44

I ended up doing it like this:

MultipartFormDataContent multiContent = new MultipartFormDataContent();

// appFileDTOs[] contains the data that I am going to submit (image and satellite data)
// ------------------------ Object 1 -----------------------------------

// Image 1
HttpContent fileStreamContent1 = new StreamContent(image);
fileStreamContent1.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") 
{
     Name = "appFileDTOs[0].File", 
     FileName = "YourFileName.something" // e.g. image1.jpg
};
fileStreamContent1.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
multiContent.Add(fileStreamContent1);

// Additional data for image 1
multiContent.Add(new StringContent(appFileDTOs[0].CategoryName), "appFileDTOs[0].CategoryName");
multiContent.Add(new StringContent(appFileDTOs[0].CategoryDescription), "appFileDTOs[0].CategoryDescription");
multiContent.Add(new StringContent(appFileDTOs[0].Detail), "appFileDTOs[0].Detail");

// ------------------------ Object 2 -----------------------------------

// Image 2
HttpContent fileStreamContent2 = new StreamContent(image);
fileStreamContent2.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") 
{
     Name = "appFileDTOs[1].File", 
     FileName =  "YourFileName.something" // e.g. image2.jpg
};
fileStreamContent2.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
multiContent.Add(fileStreamContent2);

// Additional data for image 2
multiContent.Add(new StringContent(appFileDTOs[1].CategoryName), "appFileDTOs[1].CategoryName");
multiContent.Add(new StringContent(appFileDTOs[1].CategoryDescription), "appFileDTOs[1].CategoryDescription");
multiContent.Add(new StringContent(appFileDTOs[1].Detail), "appFileDTOs[1].Detail");

// Send (url = url of api)
var response = await client.PostAsync(url, multiContent);

score -2 · Answer 3 · answered Dec 06 '19 at 08:53

-2

select one image at a time and add it to list along with CategoryName,CategoryDescription,Detail at the end send it as list.

now you can post the list which contains multiple images along with other data

answered Dec 06 '19 at 08:53

KIRAN KUMAR

1
1

You cannot add a list to MultipartFormDataContent – Tom el Safadi Dec 06 '19 at 08:54

Xamarin.Forms Upload Multiple Images with Data

3 Answers3

Linked