Upload Image though Web API, C# MVC

Introduction

Here I will explain how to post image via http or save save image throw web api


1)MVC Application

Home Controller: create Home controller in your MVC project and add two action Methods Index and . Index and UploadImage. 

        
using ImageUpload.Models;
using System;
using System.IO;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;

namespace ImageUpload.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public async Task< ActionResult> UploadImage(HttpPostedFileBase file)
        {
            MemoryStream target = new MemoryStream();
            file.InputStream.CopyTo(target);
            byte[] data = target.ToArray();
         
            //Assign Model
            ImageModel obj = new Models.ImageModel();
            obj.ImageName = file.FileName;
            obj.Base64ImageString= Convert.ToBase64String(data);
            
            using (var client = new HttpClient())
            {
                HttpResponseMessage resMsg =await client.PostAsJsonAsync("http://localhost:51071/api/ImageApi", obj);
                if (resMsg.IsSuccessStatusCode)
                {
                    ViewBag.Msg = "Image Uploaded.";
                    return View();
                }
            }
            ViewBag.Msg = "fail to upload Image.";
            return View("Index");
        }
    }

}

Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ImageUpload.Models
{
    public class ImageModel
    {
        public string Base64ImageString { get; set; }
        public string ImageName { get; set; }
    }

}

Index View:

@{
    ViewBag.Title = "Home Page";
}

@using (Html.BeginForm("UploadImage", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <h2> @ViewBag.Msg</h2>
    <table class="table-bordered" width="500px">
        <tr height="20px" bgcolor="grey">
            <td colspan="4"></td>
        </tr>
        <tr>
            <td width="20px" bgcolor="grey"></td>
            <td>Image</td>
            <td>
                <input type="file" name="file" />
                <input type="submit" />
            </td>
            <td width="20px" bgcolor="grey"></td>
        </tr>
        <tr height="20px" bgcolor="grey">
            <td colspan="4"></td>
        </tr>
    </table>

}

UploadImageView:

@{

    ViewBag.Title = "UploadImage";

}

<h2>@ViewBag.Msg</h2>

----------------------------x--------------x----------------x-------------------------------

Web API

Controller:

using ImageUpload.Models;

using System;

using System.Drawing;

using System.IO;

using System.Net;

using System.Net.Http;

using System.Web;

using System.Web.Http;

namespace ImageUpload.Controllers

{

    public class ImageApiController : ApiController

    {

        [Route("api/ImageApi")]

        [HttpPost]

        public HttpResponseMessage AddImageViaWebAPI(ImageModel Obj)

        {

            var filePath = HttpContext.Current.Server.MapPath("~/Images/" + Obj.ImageName);

            byte[] bytes = Convert.FromBase64String(Obj.Base64ImageString);

            Image image;

            using (MemoryStream ms = new MemoryStream(bytes))

            {

                image = Image.FromStream(ms);

                image.Save(filePath);

            }

            return Request.CreateResponse(HttpStatusCode.OK);

        }

    }

}