Clash Royale CLAN TAG#URR8PPP

upload an image with mvc5

i am having trouble uploading an image from the website to the server.

My ajax form is taking everything except the image file. I saw a similar question here ASP.Net MVC 5 image upload to folder

but i can't seem to get it to work

i have this

public HttpPostFileBase imageFile get;set;
public string imageText get;set;
public string imageTitle get;set;
public bool isActive get;set;
public DateTime dateAdded get;set;
public string urlRedirect get;set;

public ActionView Index()

return View;


public void UploadImage (CarouselController carouselImage)

// some code



my ajax begin form takes in all the fields with html razor.

@Html.TextBoxFor(model =>model.imageText , new class = "form-control" )
... similar for the other fields.
for the image i have

@html.TextBoxFor(model => model.imageFile), new type="file")


this makes it a working selection input box but it doesn't pass any information to the upload method.

see attached picture for what i mean.

3 Answers
3

You need to set the following attribute on your form:

enctype = "multipart/form-data"


It appears that you are trying to send a file along with a form that is posted with AJAX. If that is the case, then that's your problem: You can't send files this way. AJAX form posting only supports plain text values. For a work around, see my answer to this question.

Please let me know if you need any clarification.

public class ImageUpload



public int ID get; set;

public string Title get; set;

public string Description get; set;

[AllowHtml]

public string Contents get; set;

public byte Image get; set;



public ActionResult Create()



return View();



@using (Html.BeginForm("Create","Content", FormMethod.Post, new enctype ="multipart/form-data" ))


<input type="file" name="ImageData" id="ImageData" onchange="fileCheck(this);" />


[Route("Create")]

[HttpPost]

public ActionResult Create(ImageUpload model)



HttpPostedFileBase file = Request.Files["ImageData"];

ContentRepository service = new ContentRepository();

int i = service.UploadImageInDataBase(file, model);

if (i == 1)



return RedirectToAction("Index");



return View(model);



private readonly ImageDBContext db = new ImageDBContext();

public int UploadImageInDataBase(HttpPostedFileBase file, ImageUplad imageupload)



ImageUpload.Image = ConvertToBytes(file);

var Content = new Content



Title = imageupload.Title,

Description = imageupload.Description,

Contents = imageupload.Contents,

Image = imageupload.Image

;

db.Contents.Add(Content);

int i = db.SaveChanges();

if (i == 1)



return 1;



else



return 0;





public byte ConvertToBytes(HttpPostedFileBase image)



byte imageBytes = null;

BinaryReader reader = new BinaryReader(image.InputStream);

imageBytes = reader.ReadBytes((int)image.ContentLength);

return imageBytes;



Step 6: Display an image form database on view. Here we display the content and image from the database.

public ActionResult Index()



var content = db.Contents.Select(s => new



s.ID,

s.Title,

s.Image,

s.Contents,

s.Description

);

List<ImageUpload> imageModel = content.Select(item => new ImageUpload()



ID = item.ID,

Title = item.Title,

Image = item.Image,

Description = item.Description,

Contents = item.Contents

).ToList();

return View(imageModel);



<td>

<img src="/Content/RetrieveImage/@item.ID" alt="" height=100 width=200 />

</td>

public ActionResult RetrieveImage(int id)



byte cover = GetImageFromDataBase(id);

if (cover != null)



return File(cover, "image/jpg");



else



return null;





public byte GetImageFromDataBase(int Id)



var q = from temp in db.Contents where temp.ID == Id select temp.Image;

byte cover = q.First();

return cover;




// Here is an example of how to upload an image and return its view. For more information, please refer to https://www.c-sharpcorner.com/UploadFile/b696c4/how-to-upload-and-display-image-in-mvc/

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.