Click here to Skip to main content
15,894,825 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
XML
Hi everybody,

I want to show the image after uploaded the image. I can upload the image and it is saving in the database. But after uploading the image is broken. the image is broken, because if I look in the browser I see that it returns every time the userdId. But how to change that it returs the path?

this is how I try to retrive the image:

<pre lang="c#"><th><img width="200" height="150" src="@Url.Action("GetImage", "Account", new {id = Model.Id })"></th></pre>

Thank you

I have these methods:

<pre lang="c#"> [HttpPost]
        public ActionResult EditPhotos(ImageUploadModel ImageUpload)
        {

            if (ImageUpload.file == null || ImageUpload.file.ContentLength == 0)
            {
                ModelState.AddModelError("file", "This field is requird");
            }

            if (ModelState.IsValid)
            {

                var DirSeparator = Path.DirectorySeparatorChar;

                var fileName = Path.GetFileName(ImageUpload.file.FileName);
                var path = Path.Combine(Server.MapPath(@"\\Images\\profile" + @"\" + fileName.Replace('+', '_')));

                ImageUpload.file.SaveAs(path);
                //Session["Path"] = String.Format("/Images/profile/{0}", fileName.Replace('+', '_'));
                //ViewBag.Message = "File has been uploaded successfully";
                //ModelState.Clear();


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

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

                    db.lolabikerPhotos.Add(lolaphoto);
                    lolaphoto.ImagePath = fileName;
                }

                // Update fields

                byte[] uploadedFile = new byte[ImageUpload.file.ContentLength];
                ImageUpload.file.InputStream.Read(uploadedFile, 0, ImageUpload.file.ContentLength);
                user.file = uploadedFile;
                user.ImageMimeType = ImageUpload.file.ContentType;

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


                db.SaveChanges();



            }

            //return View();

            return RedirectToAction("Edit", routeValues: new { controller = "Account", activetab = "tabs-2" });
        } 


and the get image method:


C#
public FileContentResult GetImage(int id)
       {
           UserProfile user = db.userProfiles.FirstOrDefault(u => u.Id.Equals(id));
           if (user != null)
               return File(user.file, user.ImageMimeType);
           else return null;



       }


and the view:



C#
@using (Html.BeginForm("EditPhotos", "Account", FormMethod.Post, new { enctype = "multipart/form-data", id = "form", }))
      {
           @Html.AntiForgeryToken()

           <div class="form-horizontal">
               <h4>Photos</h4>
               <hr />

               @Html.HiddenFor(model => model.Id)




               <div id="upload-choices">
                   <div class="editor-label">

                       @*<div class="lifile">
                           @Html.ValidationMessageFor(m => m.file)
                           @Html.ValidationSummary(true)

                       </div>*@

                   </div>
               </div>

               <br />


               <div class="table-responsive">
                   <table class="table">

                       <tr>
                           <th><img width="200" height="150" src="@Url.Action("GetImage", "Account", new {id = Model.Id })"></th>


                       </tr>
                   </table>
               </div>


               &lt;input type="file" name="file" class="filestyle" data-buttontext="Find file">



               <br />
               @*<div class="progress progress-striped">
                       <div class="progress-bar progress-bar-success">0%</div>
                   </div>*@

               <div id="status"></div>


               <br />

               @*@Html.ActionLink("Upload photos", "Upload")*@

               <div class="pull-left">
                   <div class="col-md-offset-0">
                       &lt;input type="submit" value="Save" accept="image/x-png, image/gif, image/jpeg" class="btn btn-default pull-left" />

                   </div>
               </div>

           </div>
       }

       <br /><br />
       <div>
           @Html.ActionLink("Back to List", "Index")
       </div>
   </div></pre>
Posted
Updated 7-Jan-15 23:25pm
v3

1 solution

Your GetImage method and the view seems ok, however I am unsure about your uploading/saving methods. Are you sure the image is saved to the database correctly?

You say that in your view, you are getting the "Id" instead of the image path. Can you set a breakpoint in GetImage method and see what user.file contains?
 
Share this answer
 
Comments
[no name] 11-Jan-15 10:49am    
Hi, thank you for your answare. I can save the image.

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