Click here to Skip to main content
15,792,354 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi everyone,

I can store pictures in the file system and store the images names in the database, like this: Image1.JPG. But now I want to display the pictures after uploading.

I have this for view:

    <div id="tabs-3">

       @using (Html.BeginForm("UploadMorePhotos", "Account", FormMethod.Post, new { enctype = "multipart/form-data" }))

        <div class="form-field">
            <p>Select pictures:</p>
            <div class="upload-container">
                <div class="upload">
                    <input type="file" name="files" value="" multiple="multiple" id="file1" />

                    <img src="@Url.Content("~/images/deleteButton.png")" alt="Remove picture." />

        <div class="form-field">
            <input type="submit" value="Upload" />

<br />

  foreach (var item in Model.LolaBikePhotos )

       @*@Html.DisplayFor(modelItem => item.ImagePath)*@
       Html.Image("~/App_Data/uploads", item.ImagePath, new { width = 200, height = 150 });

    <img width="200" height="150" src="@Url.Action("UploadMorePhotos", "Account", new { UserProfileID = Model.Id })">



The Jquery:
<pre lang="Javascript">
  var currentImage = 1;
            $("body").on("change", "input[name='files']", function () {
                var pathToRemoveIcon = "@Url.Content("~/Images/deleteButton.png")";
                currentImage = currentImage + 1;
                var htmlToAppend = '<div class="upload"><input type="file" name="files" id="file' + currentImage + '" /><img src="' + pathToRemoveIcon + '" alt="Remove picture." /></div>';
            }).on("click", ".upload img", function () {
                if ($(this).parent().siblings().length > 0) {

and the action method:

public ActionResult UploadMorePhotos(UserProfile user, IEnumerable<HttpPostedFileBase> files)
    foreach (var file in files)
        if (file.ContentLength > 0)
            var fileName = Path.GetFileName(file.FileName);
            var path = Path.Combine(Server.MapPath("~/Images/profile" + @"\" + fileName.Replace('+', '_')));

            if (ModelState.IsValid)
                string username = User.Identity.Name;
                // Get the userprofile
                user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

                // Update fields
                user.Image = new byte[file.ContentLength];
                file.InputStream.Read(user.Image, 0, file.ContentLength);
                user.ImageMimeType = file.ContentType;

                db.Entry(user).State = EntityState.Modified;

                if (user != null)
                    var lolaphoto = new LolaBikePhoto
                        UserProfileID = user.Id

                    lolaphoto.ImagePath = fileName;




    return Redirect(Url.Action("Edit", "Account") + "#tabs-3");

So everything goes allright, the images are stored as imagespath in the tabel: LolabikePhoto and the Images are saved in the folder: Images/Profile. But ofcourse the images have to be shown. I try it like this:
foreach (var item in Model.LolaBikePhotos )

But the images are broken.

Thank you

ahh, I found the solution, it has to be like this:

<img src="~/Images/profile/@item.ImagePath" alt="" height=150 width=200 />
Updated 24-Oct-14 2:54am
Sinisa Hajnal 24-Oct-14 7:18am    
What do you mean they are broken?

1 solution

The problem is the location of where you are uploading the files to - App_Data folder. This is a designated folder and not usually accessible over the browser. Its for data and configurations and designed to be restrictive.

You need to save the files into another folder: http://mysite/_uploads/images/file.jpg

That will solve your problem
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900