Showing multiple Images by userProfile

Hi everybody,

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" }))
               {
                   @Html.AntiForgeryToken()
               
    
                <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>
                    </div>
                </div>
    
                <div class="form-field">
                    <input type="submit" value="Upload" />
                </div>
    
        <br />
                  
          foreach (var item in Model.LolaBikePhotos )
           {
              
               @Html.DisplayFor(modelItem => item.ImagePath)
            @*<img src="src=" data:@(item.mimetype);base64,@(html.raw(convert.tobase64string(item.filecontent)))" width="150" height="200" alt="" />*@
           }
    
    
    
               }
            </div>

The Jquery:

  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>';
                    $('.upload-container').append(htmlToAppend);
                }).on("click", ".upload img", function () {
                    if ($(this).parent().siblings().length > 0) {
                        $(this).parent().remove();
                    }
                });

and controller action:

    [HttpPost]
            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("~/App_Data/uploads" + @"" + fileName.Replace('+', '_')));
                        file.SaveAs(path);
    
                        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
                                };                       
    
                                db.lolabikerPhotos.Add(lolaphoto);
                                lolaphoto.ImagePath = fileName;
                            }
                        }
    
                        db.SaveChanges();
    
    
                    }
    
    
                }
    
                return Redirect(Url.Action("Edit", "Account") + "#tabs-3");
            }

Models:

    [DisplayName("Image")]
            [MaxLength]
           
            public byte[] Image { get; set; }
    
            [Display(Name = "Display profile Image")]
            public bool DisplayItem { get; set; }
    
              [DisplayName("ImageMimeType")]
            public string ImageMimeType { get; set; }
    
              public virtual ICollection<LolaBikePhoto> LolaBikePhotos { get; set; }


 

    public class LolaBikePhoto
        {
            [Key]
            public int PhotoID { get; set; }
            //[System.ComponentModel.DataAnnotations.Schema.ForeignKey("UserProfileID")]
            public int? UserProfileID { get; set; }
            public string Photo { get; set; }
            public string Notes { get; set; }
            public string ImagePath { get; set; }
    
    
           [System.ComponentModel.DataAnnotations.Schema.ForeignKey("UserProfileID")]
            public virtual UserProfile userProfile { get; set; }
    
        }

I can show one image like this:

 public ActionResult GetImage(int id)
            {
                byte[] image = db.userProfiles.Where(p => p.Id == id).Select(img => img.Image).FirstOrDefault();
               
                return File(image, "image/jpeg");
            }

but how to show multiple images?

Thank you

?? somebody??

An action result can only return one file at a time.  If you want to send them all the pics in one call you would need to zip them and send them the zip file.

If you just want to display them on a page, you can do that, but looking at your original post that isn’t what you are trying to do; you are trying to download the file.

Thank you for your answare. Yes I want to display them. I can upload the photos and they are stored in tte map App_data/Uploads. The files are also stored in the database table LolaBikePhoto, but then as ImagePath. Because one user can have many photos.
But when I want to show them I see them broken. I try that with this in the view:

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= @Html.Image("~/App_Data/Uploads/", item.ImagePath) />
               
        @*<img src="src=" data:@(item.mimetype);base64,@(html.raw(convert.tobase64string(item.filecontent)))" width="150" height="200" alt="" />*@
       }

The App_Data folder is only available on the server side.  The user’s browser won’t be able to access files stored in that folder.

? I can show one image, see the code above. and my explanation So it can, sorry.

Leave a Reply