9

I would like to display all my pictures in my folder "Images_uploads" folder into MVC View. So its display on the site. But nothing seems to work..

{

<form method="post" action="/Images_upload" enctype="multipart/form-data">  
    <input name="ImageUploaded" type="file">  
    <input type="submit">  
</form>  

<List<String> li = ViewData["~/images_upload"] as List<String>;
 foreach (var picture in li)

    <img src = '@Url.Content("~/images_upload" + picture)' alt="Hejsan" />

}
tereško
  • 58,060
  • 25
  • 98
  • 150
Chris reed
  • 111
  • 1
  • 2
  • 11

1 Answers1

27

You should probably do this kind of thing in your controller. Use EnumerateFiles to get a listing of all files in a folder:

// controller
public ActionResult MyAction()
{
    ...
    ViewBag.Images = Directory.EnumerateFiles(Server.MapPath("~/images_upload"))
                              .Select(fn => "~/images_upload/" + Path.GetFileName(fn));

    return View(...);
}

// view
@foreach(var image in (IEnumerable<string>)ViewBag.Images))
{
    <img src="@Url.Content(image)" alt="Hejsan" />
}

Even better, use a strongly-typed view model, like this:

// model
class MyViewModel
{
    public IEnumerable<string> Images { get; set; }
}

// controller
public ActionResult MyAction()
{
    var model = new MyViewModel()
    {
        Images = Directory.EnumerateFiles(Server.MapPath("~/images_upload"))
                          .Select(fn => "~/images_upload/" + Path.GetFileName(fn))
    };
    return View(model);
}
// view
@foreach(var image in Model.Images)
{
    <img src="@Url.Content(image)" alt="Hejsan" />
}
p.s.w.g
  • 146,324
  • 30
  • 291
  • 331
  • 2
    you can also do `Images = Directory.EnumerateFiles(Server.MapPath("~/images_upload")).Select(f => "~/images_upload/"+f);` and remove the "~/images_upload" part from the view to keep the path in just one place. – corrego Apr 13 '13 at 17:38
  • Thank you so much p.s.w.q, Now for my second question, im getting an error when i try to upload a picture. – Chris reed Apr 13 '13 at 20:28
  • p.s.w.g i get a Object reference not set to an instance of an object. On the @foreach ... – Chris reed Apr 13 '13 at 20:42
  • I fixed it with return RedirectToAction("upload"); anyway thanks ;) – Chris reed Apr 13 '13 at 21:00
  • @Chrisreed If you can post the source for your controller, and the body of the `@foreach` loop in the view, I may be able to help you resolve the `NullReferenceException`. For your second question, you should probably post that as a different question, as it's not related to simply displaying the images. – p.s.w.g Apr 14 '13 at 01:25
  • 1
    @p.s.w.g Very good, as soon as I added that semicolon outside of the initializer `...)) }; return...` (Also 2nd example). On a side note, is it "BAD" For files to be stored in App_Data - seems to not read my images from there. - sorry if Question is unrelated, +1 for the ";" fix – Don Thomas Boyle Sep 03 '13 at 20:14
  • 1
    @DonThomasBoyle the App_Data folder is for file-based data storage, ideally something like a SQL database file. You can use it to store a fixed number of files that your site uses for configuration, formatting, etc. but I wouldn't use it as an arbitrary storage of any number of files or for files that your app doesn't directly make use of (e.g. user uploads). – p.s.w.g Sep 03 '13 at 20:21
  • Thx for the information, for some reason wether it didn't like the `"_"` in `app_Data` or the Folder Itself, it loaded perfectly fine from a different folder. – Don Thomas Boyle Sep 03 '13 at 20:25
  • **To Explicitly mention filters** like `jpg` , `png` etc check [this](http://stackoverflow.com/a/38243382/2218697), hope helps someone. – Shaiju T Jul 07 '16 at 10:45