0

When I try to execute my application all the data's in the database are getting displayed and instead of storing image I stored its path in DB and displaying the image but when I render it in chrome it says

Error: 404 not found

But when I check it physically the images are present in folder where I uploaded.

Screenshot:

screenshot of my output

EmpdetController.cs

[HttpPost]
    public ActionResult UploadFile()
    {
        var file = Request.Files[0];
        var path = Path.Combine(Server.MapPath("~/Photos"), file.FileName);
        file.SaveAs(path);

        // prepare a relative path to be stored in the database and used to display later on.
        var filename = path;
        // save to db
        return Json(filename.ToString(), JsonRequestBehavior.AllowGet);

    }

EmpdetList:

<h2>EmpdetList</h2>

<table class="table table-bordered table-hover table-striped" ng- table="tableParams" show-filter="true">
<tr ng-repeat="Empdet in EmpdetList">                       
    <td data-title="'Id'" filter="{ 'Id': 'text' }" sortable="'Id'">{{Empdet.Id}}</td>
    <td data-title="'FirstName'" sortable="'FirstName'" filter="{ 'FirstName': 'text' }">{{Empdet.FirstName}}</td>
    <td data-title="'LastName'" sortable="'LastName'" filter="{ 'LastName': 'text' }" >{{Empdet.LastName}}</td>
    <td data-title="'Email'" sortable="'Email'" filter="{ 'Email': 'text' }">{{Empdet.Email}}</td>
    <td data-title="'PhotoText'" sortable="'PhotoText'" filter="{ 'PhotoText': 'text' }"><img ng-src={{Empdet.PhotoText}} class="img-responsive"/></td>
    <td data-title="'Age'" sortable="'Age'" filter="{ 'Age': 'text' }">{{Empdet.Age}}</td>

    <td data-title="'Action'">
        <div data-toggle="modal" data-id="{{Empdet.Id}}" data-index="{{$index}}" data-name="{{Empdet.Id}}" ng-click="DeleteEmployee(Empdet.Id)"  title='Click to delete the Account' class="open-confirm-delete fa fa-trash-o deleterow" style="height: 24px!important;">
        </div>
    </td>
</tr>
</table>
Improve this question
4
  • can you give path of image and path of your application? or try Server.MapPath(@"~/Photos") Commented May 6, 2015 at 5:37
  • Image path: "C:\\Users\\kaviarasuk\\Documents\\Visual Studio 2012\\Projects\\MyEmployee\\MyEmployee\\Photos\\riki.jpg" Commented May 6, 2015 at 5:40
  • its the image path i m getting through json once the image is uploaded Commented May 6, 2015 at 5:40
  • See my answer. You can't refer to physical image paths on your harddrive for images. They must be relative to the server URL. Commented May 6, 2015 at 5:41

3 Answers 3

Reset to default
1

You returned the absolute path (C:/...) of the image on file system.

You have to return the relative path of the image to the server. Because you want the path to be /Photos/image.png.

var filename = Url.Content("~/Photos/" + file.FileName);

The code will change like below.

[HttpPost]
public ActionResult UploadFile()
{
    var file = Request.Files[0];
    var path = Path.Combine(Server.MapPath("~/Photos"), file.FileName);
    file.SaveAs(path);

    // prepare a relative path to be stored in the database and used to display later on.
    var filename = Url.Content("~/Photos/" + file.FileName);
    // save to db
    return Json(filename.ToString(), JsonRequestBehavior.AllowGet);

}
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

He doesn't return a relative path, that's the point. He returns the full path of the file.
@MathiasLykkegaardLorenzen thank you for correcting me, I was confused with relative and absolute path.
Also, it seems like you need an additional / before appending file.FileName to the path right?
@MathiasLykkegaardLorenzen You have hawk eyes :)
Thank you very much guys for correcting my mistakes and just now i started learning this i m not that much good with soon i will try to learn a lot .. thanks once again
|
1

The code seems to refer to path names of the images with double slashes (//) in them (see your own Chrome screenshot). See if removing these helps.

Furthermore, it seems that each path of the image starts with a proper URL to localhost but then has a full file path appended to it, starting with C:\, which suggests that you need to append relative paths instead.

Like I described to you in a comment to your question, you can't refer to absolute paths on your server from a web based project. You need to refer to relative paths from the root URL.

Improve this answer

2 Comments

i am new to this asp.net and angularjs but i dont know how to remove that double slashes (//) can u help me
The internet is your friend. There is plenty of documentation online. StackOverflow is not a "write-my-code-for-me" community for trivial problems.
-1

Either you should store a virtual path instead of physical or otherwise if you want to store a physical path then you should convert physical path to hosting path.

You can use this code: 

public static class PathExtensions
{


    public static string ToVirtual (this string physicalPath)
    {
        string url=physicalPath.Substring(System.Web.Hosting.HostingEnvironment.MapPath("~/");).Replace('\\', '/').Insert(0, "~/Photos/");
        return (url);
    }
}

Then you can call this extension method before you can send your list back.

yourlist.ForEach( item => item.url = item.url.ToVirtual());

There will be performance hit. However, this code will take you further

Improve this answer

4 Comments

This screams bad practice and is a horrible solution by all means (no offense to you as a person).
have you seen the screen shot? He is sending a physical path at client side, I am asking him to send a relative one if he has not saved it. So why the hack it is horrible??
Okay. Let's summarize. Excessive use of extension methods (why extend string for this very specific problem?). Accessing the HostingEnvironment from a Singleton-like structure, making it impossible to test, and prone to errors when used outside of the web context. Use of Replace function to fiddle with path structures, opening the possibility for Path Traversal vulnerabilities. And finally, the most important one... Treating the symptoms, not fixing the problem. I hope you know all this already. Every developer should.
Even the fact that you called it a hack and still accept it as a viable solution, when the real solution is so simple, is not very good. Oh, and finally... Your code does not compile.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.