This question already has an answer here:

how to upload an image from your computer to the server in the CONTENT folder with by pressing button. I have next code on Page.

ViewBag.Title = "Test";
Layout = "~/Views/Shared/_Layout.cshtml";}

<div class="starter"> 
      <p>It is a test page !!!!!!;)</p>
     <input type="submit" value="Upload img" />

Ok, I keep getting null returned on my photo, What am I missing?

I've trid this Uploading/Displaying Images in MVC 4

But Im obviously looking to include the image as part of model. Model

public class Client
        public string Name{ get; set; }
        public string ClientId { get; set; }
        public HttpPostedFileBase Photo{ get; set; }


@using (Html.BeginForm()) { 
    <div class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="@Model.Name" class="col-sm-2 control-label">Name:</label>
                            <div class="col-sm-10">
                                <input name="ClientId" type="hidden" value="@Model.ClientId" id="ClientId" data-val="true" data-val-required=" required">
                                <input type="text" id="Name" value="" class="form-control" tabindex="1" placeholder="name" name="Name" required/>
                                @Html.ValidationMessageFor(model => model.Name)
                        <div class="form-group">
                            <label for="@Model.Name" class="col-sm-2 control-label">Image:</label>
                            <div class="col-sm-10">
                                @Html.TextBoxFor(m => m.Photo, new { type = "file" })


        public ActionResult New(ViewModels.Client client)
if (client.Photo!= null)
                var photo= new byte[client.Photo.ContentLength];
                client.Photo.InputStream.Read(photo, 0, client.Photo.ContentLength);


I have an MVC app with a page that allows a user to upload an image. I just use standard HTML to allow the user to upload the image:

<input type="file" name="image" class="upload-image"/>

When the user reloads this page, I want to display the image they may have already uploaded and also give the user the chance to upload a new image to replace it. I'm not sure the best way to do this. I'm guessing I need an <img> tag somewhere to display the current image while allowing the user to upload a replacement if desired. Is this the best way to accomplish this, or is there a better way?

I'm using MVC with Web Api. I'm saving my image Path to DB. this is code I have written in web Api.

public int AddToolItem(ToolItem toolItem, HttpPostedFileBase toolItemImage)
            var fileName = Path.GetFileName(toolItemImage.FileName);
            var path = Path.Combine(HttpContext.Current.Server.MapPath("~/Upload/ItemImage/"), fileName);
            toolItem.ToolItemImage = path;

            return dbContext.SaveChanges();

It save the physical path of image


But when I'm retrieving, and Displaying in my mvc view page, Image is not showing .

<img src="@toolItem.ToolItemImage" /> 

It rendering the image as

<img src="E:\lifeexpress\rar\LifeExp\LifeExp\LifeExp.Web\Upload\ItemImage\images.jpg">

How can I show the image.

I'm new in MVC I want to know how to upload a file or an image in MVC. Actually I'm using database first approach in which I've database already. I created a Entity Data Model and using auto generated code. Now my field type is Image in database but it's actually does not create Image field in view. Is it not supported in MVC 4?

So I'm trying to look for a tutorial where I can Upload and Download files and displaying it such as; File Name, File Size, File Type and Time uploaded.

I've found this link above for it but it's an old tutorial and it's done in Visual Studio 2008. I've tried to attempt it but some files don't exist on the new Visual Studio that's on 2008.

I'm currently using Visual Studio 15 Enterprise with MVC 6.

Does anyone know an updated tutorial?

I saw this link , which is a good example, but it does not apply for Asp.Net Mvc 6 because HttpPostedFileBase does not exist in Mvc 6. Does someone help me this code for Mvc 6.

// Controller code

public ActionResult Create(ArtWork artwork, HttpPostedFileBase image)
       if (ModelState.IsValid)
            if (image != null)
                //attach the uploaded image to the object before saving to Database
                artwork.ImageMimeType = image.ContentLength;
                artwork.ImageData = new byte[image.ContentLength];
                image.InputStream.Read(artwork.ImageData, 0, image.ContentLength);

                //Save image to file
                var filename = image.FileName;
                var filePathOriginal = Server.MapPath("/Content/Uploads/Originals");
                var filePathThumbnail = Server.MapPath("/Content/Uploads/Thumbnails");
                string savedFileName = Path.Combine(filePathOriginal, filename);

                //Read image back from file and create thumbnail from it
                var imageFile = Path.Combine(Server.MapPath("~/Content/Uploads/Originals"), filename);
                using (var srcImage = Image.FromFile(imageFile))
                using (var newImage = new Bitmap(100, 100))
                using (var graphics = Graphics.FromImage(newImage))
                using (var stream = new MemoryStream())
                    graphics.SmoothingMode = SmoothingMode.AntiAlias;
                    graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
                    graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
                    graphics.DrawImage(srcImage, new Rectangle(0, 0, 100, 100));
                    newImage.Save(stream, ImageFormat.Png);
                    var thumbNew = File(stream.ToArray(), "image/png");
                    artwork.ArtworkThumbnail = thumbNew.FileContents;

           //Save model object to database
            return RedirectToAction("Index");

        return View(artwork);

I want display warning message when the user upload image size > 100 KB by FCKEditor

how I can trigger if image upload

I need to upload selected multiple images at a time with showing progress bar for each in asp .net mvc 4 with razor.Please any one help

I am upload the image in file upload control on change event then image is automatically rotate see in preview tag in my mvc c#.but i am upload the existing image upload it's good but i am click the image in iphone then image are upload that time image is rotate.this below code are used for the preview image..

This is my file Upload controll

 <img id="PreviewImage" class="mb20" width="300" src="../@Url.Content(@Url.Content(Model.ProfileImage))" />                                        
  @Html.TextBoxFor(model => model.UserFileUpload, new { type = "file", onchange = "ShowVehicleImagePreview(this)" })

this is my funcation

function ShowVehicleImagePreview(input) {
    if (input.files && input.files[0]) {
        var readervehicle = new FileReader();
        readervehicle.onload = function (e) {

any one have the idea about this issue then please tell me..

Case: I have an app for Android, Android Tablet, iPhone, iPad. Server has a backend to upload image (not the app). App user can browse these server side uploaded images on their phones.

The images which are uploaded from a server backend can be of square and rectangle dimension.


  1. What display size should be reference for the image dimension being uploaded?
  2. Which sizes should be created on the server from the uploaded image?