How to upload images to an ASP NET Core REST service with Xamarin.Forms

With this blog post we continue the exploration of Xamarin.Forms. We’ll se how to upload a picture to a RESTful service developed with ASP.NET Core.

uwpScreenshot
UWP flavor of the upload with file picker

You can download the entire solution of this example here.

Server side (ASP.Net Core)

To create a REST service we create an ASP.NET Core Web Application project.

  1. We select .NET Core -> ASP.NET Core Web Application, give a name and hit OK.
  2. We choose

2.png 3.png

Our Project will look like this:

4

Now we add a Controller in the Controllers folder to handle our picture upload. Right click in the Controllers folder, Add -> Controller, we choose empty controller and we give the name ImageController.cs.

5

Now we write this code in the ImageController class:

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.IO;
using System.Threading.Tasks;

namespace IC6.Xamarin.WebApi.Controllers
{
    [Produces("application/json")]
    [Route("api/Image")]
    public class ImageController : Controller
    {
        private readonly IHostingEnvironment _environment;

        public ImageController(IHostingEnvironment environment)
        {
            _environment = environment ?? throw new ArgumentNullException(nameof(environment));
        }

        // POST: api/Image
        [HttpPost]
        public async Task Post(IFormFile file)
        {
            var uploads = Path.Combine(_environment.WebRootPath, "uploads");
            if (file.Length > 0)
            {
                using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
                {
                    await file.CopyToAsync(fileStream);
                }
            }
        }
    }
}

The upload of the image is implemented in the Post method. The IFormFile file parameter represents the uploaded file. This variable is assisgned automatically by ASP.NET if the model binding finds a correct match in the request from the client.

Client side (app)

Api calls

In our shared Project of the Xamarin.Forms app we create a new interface called IApiService that representes the capabilites of our web service. We create also a class that implements that interface and we call it ApiService.

6.png

using System.IO;
using System.Threading.Tasks;

namespace IC6.Xamarin.PictureUpload
{
    public interface IApiService
    {
        Task UploadImageAsync(Stream image, string fileName);
    }
}
using System.IO;
using System.Net.Http;
using System.Threading.Tasks;

namespace IC6.Xamarin.PictureUpload
{
    internal class ApiService : IApiService
    {
        private string url = "http://xxxxxxxxx/api/image/";

        public async Task UploadImageAsync(Stream image, string fileName)
        {
            HttpContent fileStreamContent = new StreamContent(image);
            fileStreamContent.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") { Name = "file", FileName = fileName };
            fileStreamContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
            using (var client = new HttpClient())
            using (var formData = new MultipartFormDataContent())
            {
                formData.Add(fileStreamContent);
                var response = await client.PostAsync(url, formData);
                return response.IsSuccessStatusCode;
            }
        }
    }
}

The UploadImageAsync method makes the push request with a HttpClient. We configure our HttpClient to represent a web form with an attached file. We do this by correctly setting up the Headers of the HttpContent and creating a MultiPartFormDataContent as the content of the request. The ContentDisposition is very important and we need to specify that the “Name” of the form-data is called “file” to get a match in the MVC model binding.

The image picker

We need to fire up an image picker to allow the user to select the image he/she wants to send.

The code for this feature is platform-specific and use the technique of abstracting the concept with an interface and then provide a specific implementation for each project so our view-model is platform-agnostic.

using System.Threading.Tasks;

namespace IC6.Xamarin.PictureUpload
{
    public interface IImagePicker
    {
        Task GetImageStreamAsync();
    }
}

7.png

(The source code for the UWP and Android implementation is directly on github).

Now in our view-model where we’ll handle the picking and the uploading of the image we can write somthing like this:

 public Command UploadImage
        {
            get
            {
                if (_uploadImage == null)
                {
                    _uploadImage = new Command(
                        async () =>
                        {
                            try
                            {
                                var theFileToUpload = await _imagePickerSvc.GetImageStreamAsync();

                                UploadStatus =  await _apiSvc.UploadImageAsync(theFileToUpload.StreamSource, theFileToUpload.FileName);
                            }
                            catch (Exception ex)
                            {
                                System.Diagnostics.Debug.WriteLine(ex.Message);
                            }
                        },
                        () =>
                        {
                            return true;
                        });
                }

                return _uploadImage;
            }
        }

 

Tips & Tricks

To debug the app and the service at the same time we can right click a project -> Debug- > Start a new instance.

8

If we debug with IIS Express and we want to access the web service from a real or emulated device we need to edit applicationhost.config file and start Visual Studio as administrator.

910

TL;DR

In this blog post we’ve created a RESTful web-service with ASP.Net core to handle the upload of an image. This can be used to handle a file of any kind, too. We also implemented the client side to call the API and to provide the user with an interface to choose the image with a file picker.

Update 2018.05.15

While trying to solve a problem of reader about this tutorial I found an issue with the WebRootPath property of IHostingEvironment passed to the constructor. The WebRootPath is null if the wwwroot folder is missing. This is a better version of the code: it checks if the path already exists – if not, a new directory is automatically created

2018-05-15_06-44-05

References

PictureUpload on GitHub (https://github.com/phenixita/IC6.Xamarin.PictureUpload)

5 thoughts on “How to upload images to an ASP NET Core REST service with Xamarin.Forms

  1. Thanks for the great Tutorial, I couldn’t find anything similar to this on the web.
    but I have a problem , both server web api and xamarin forms projects run and work with no error , I also published the api to local iis, and changed localhost to the host ip, but where are the images we upload ?!
    where does the ap[i save the images ?? I cant find an upload folder in the webroot of the api , even when I create an “uploads” folder and give iis access to this folder there are no files in it !
    please help because its been a long time im trying and im still stuck

    Thanks again
    Xigmond

    Like

    1. Hi Xigmond,
      thank you very much for the feedback!
      The API stores the uploaded content in the “uploads” folder that’s hardwired into the code
      I think I was able to reproduce your problem and updated the code on GitHub.
      I’m also updating this post to explain the improvement.

      Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.