Saving/retrieving images. ASP.NET MVC

Question

I'm trying to display images I've loaded previously on a view but getting no success. Images are uploaded, that's for sure. So far I've written something like this:

@if(Model.AttachedInformation.Count > 0)
{
    <div id="gallery">
        @foreach(var path in Model.AttachedInformation)
        {
            <img src="@path" alt="default_description" title="some_title" />
        }
    </div>
}

AttachedInformation is simply a ICollection<String> object.

But that's giving me only borders of images. Moreover I checked @path variable and it's really keeping full file paths.

Suggestions are appreciated! Thanks!

EDIT: CONTROLLER

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(Employee employee, IEnumerable<HttpPostedFileBase> files)
{
    if(ModelState.IsValid)
    {
        var filepath = String.Empty;

        foreach(var file in files)
        {
            if(null != file && file.ContentLength > 0)
            {
                filepath = Path.Combine(
                    HttpContext.Server.MapPath("~/Content/Images/Uploads"),
                    Path.GetFileName(file.FileName)
                );
                file.SaveAs(filepath);
                employee.AttachedInformation.Add(filepath);
            }
        }                

        this.repository.Add(employee);

        return Redirect("/");
    }
    else
    {
        return View(employee);
    }
}

MODEL

AbstractEntity keeps Version and ID properties.

[Serializable]
public class Employee : AbstractEntity<Employee>, IAggregateRoot
{
    public Employee()
    {
        this.AttachedInformation = new HashSet<String>();
    }

    public virtual String FirstName { get; set; }
    public virtual String MiddleName { get; set; }
    public virtual String LastName { get; set; }
    public virtual String SSN { get; set; }
    public virtual String EmployeeNumber { get; set; }
    public virtual String TradeUnionNumber { get; set; }
    public virtual String Department { get; set; }
    public virtual String Post { get; set; }
    public virtual DateTime DateOfHire { get; set; }
    public virtual DateTime DateOfBirth { get; set; }
    public virtual ICollection<String> AttachedInformation { get; set; }
}

VIEW

View contains several inputs with name files like:

<input type="file" name="files" id="additional" class=" " accept="image/jpeg,image/png,image/gif" />

RAW HTML

<div id="gallery">
    <img src="D:\Programming.Projects\BOA\branches\BOA.PresentationLayer\Content\Images\Uploads\Desert.jpg" alt="default_description" title="some_title" />
    <img src="D:\Programming.Projects\BOA\branches\BOA.PresentationLayer\Content\Images\Uploads\Hydrangeas.jpg" alt="default_description" title="some_title" />
    <img src="D:\Programming.Projects\BOA\branches\BOA.PresentationLayer\Content\Images\Uploads\Jellyfish.jpg" alt="default_description" title="some_title" />
    <img src="D:\Programming.Projects\BOA\branches\BOA.PresentationLayer\Content\Images\Uploads\Koala.jpg" alt="default_description" title="some_title" />
</div>

BOUNTY

What I need is to get an illustrated example (that works). Thanks!

"Really keeping full file paths" as in file:/// paths? Or do the paths actually work in the browser? — EAMann
– EAMann, Commented Mar 3, 2012 at 0:42
Please provide the HTML output for that function... (or maybe you get some error when you go to the page?) — debracey
– debracey, Commented Mar 3, 2012 at 0:44
Could you include a controller snipped showing how you populate the model? — Michael Teper
– Michael Teper, Commented Mar 3, 2012 at 0:45
Can you show the raw html that gets rendered? And, have you checked that the file is saving to the Upload directory correctly? — Davin Tryon
– Davin Tryon, Commented Mar 3, 2012 at 1:24

Jason Yost · Accepted Answer · 2012-03-03 05:15:48Z

4

+50

HttpContext.Server.MapPath("~/Content/Images/Uploads")

The above is going to give you the full path on disk which you are then saving to the employee record. You should just be saving the name of the file and then sourcing the image to ~/Content/Images/Uploads/

One other note is that you are saving all of the images to the same directory by file name. If two users upload a file with the same name one will overwrite the other. Each employee should have their own upload directory or you should dynamically generate the file names.

answered Mar 3, 2012 at 5:15

Jason Yost

4,9477 gold badges46 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lexeme Over a year ago

Agree! Especially about overwriting. So probably I'll add id as a part of the path so it's gonna be unique! Could you please illustrate yours ~/Content/Images/Uploads/?

Tommy Over a year ago

In order to prevent tons of sub directories, we have also used GUID file names (as well as preserving the uploaded file name for display purposes). This way, we have unique stored file names, but can render the name that the user uploaded and avoid (mostly) the collision of file names when storing to disk. My 2 cents :)

lexeme · Accepted Answer · 2012-03-06 13:11:32Z

1

Ok. I found a solution. Maybe it will be useful for somebody.

var directory = "/Content/Images/Uploads/" + employee.SSN;
var path = String.Empty;

if(!Directory.Exists(Server.MapPath(directory)))
{
    Directory.CreateDirectory(Server.MapPath(directory));
}

foreach(var file in files)
{
    if(null != file && file.ContentLength > 0)
    {
        path = Path.Combine(directory + "/", Path.GetFileName(file.FileName));
        file.SaveAs(Server.MapPath(path));
        employee.AttachedInformation.Add(path);
    }
}

That works for me. Corrections are appreciated.

answered Mar 6, 2012 at 13:11

lexeme

2,99314 gold badges64 silver badges130 bronze badges

3 Comments

ggonsalv Over a year ago

SSNs are not unique... Also the their SSN will be in every proxy servers folders. Not safe. If you must use the SSN, then atleast hash it some how to a random string

lexeme Over a year ago

Ok, thank you! See.. Use of Id is complicated because it gets generated when entity is saved to the repository.

ggonsalv Over a year ago

No I mean calculate a one-way hash to convert the SSN to something else.. stackoverflow.com/questions/5264644/…

Collectives™ on Stack Overflow

Saving/retrieving images. ASP.NET MVC

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related