File path of image on server

Question

I have an image saved on my server which I want to display on the client.

EDIT: I select an image from a list of up to 80. This image is then resized if needed and returned to the client.

My server is running on IIS7 @ localhost:1337 .

Server file location:

C:\inetpub\wwwroot\API\Cyber\4076\1\img\resized\1.jpg

This is the path that's returned when I return the absolute path to the client (see code below). The client however can't find this file.

My Client is running on IIS7 @localhost:15536.

With the help of firebug I can set the source of the Image object in the client application to the location of the file on the server under localhost.

localhost:1337/Cyber/4076/1/img/resized/1.jpg

It then correctly displays the image.

Question What changes do I make so that the changes I did manually happen automatically? How do I create/return the second link and use it in the client opposed to the first link?

Server API call

/// <summary>
/// Method to retrieve files from the server. Files will be searched in the requested map depending on size.
/// The resized image will be saved on the server and the location will be send to the client.
/// </summary>
/// <returns>A response message with the location of the newly resized file.</returns>
public HttpResponseMessage getFileResized(string name, int collectionId, int maxWidth, int maxHeight, int version = 1)
{
    // create real file path
    string basePath = FileService.GetPath(collectionId, CollectionType.collection, version) + @"\img\"; //HostingEnvironment.MapPath("~/Cyber/" + collectionId + "/img/");
    string filePath = basePath + @"resized\";
    // Standard location of the file when it's uploaded to the server.
    string fileBase = basePath + name;
    // New location for the resized file on the server.
    string fileExact = filePath + name;
    try
    {
        if (!File.Exists(filePath))
        {
            // create new directories for resizes
            Directory.CreateDirectory(filePath);
        }
        if (//File.Exists(fileBase)) && 
            !File.Exists(fileExact))
        {
            Logger.log("File found but resize missing. Creating resized...");
            ImageService.createResizedFile(name, basePath, maxWidth, maxHeight);
        }
        // check if path and file exist
        string file = Directory.GetFiles(filePath, name, SearchOption.TopDirectoryOnly).FirstOrDefault();

        if (file != null)
        {
            // retrieve the file location, write headers and return it
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Accepted);
            response.Headers.Location = new Uri(file);
            return response;
        }
        else
        {
            // file does not exist at the selected location
            Logger.log("Resized image file does not exist on location: {0}.", fileExact);
            throw new HttpResponseException(HttpStatusCode.NotFound);
        }
    }
    catch (DirectoryNotFoundException)
    {
        throw new HttpResponseException(HttpStatusCode.NotFound);
    }
}

Client retrieves the file location like this

HttpResponseMessage responseMessage = client.GetAsync("api/file/getFileResized?name=" + fileName + "&collectionId=" + CollectionId
    + "&maxWidth=" + maxWidth + "&maxHeight=" + maxHeight + "&version=" + Version).Result;

string sourceResponse = "";
if (responseMessage.IsSuccessStatusCode)
{
    sourceResponse = responseMessage.Headers.Location.AbsolutePath;
    return Json(new { OK = 1, message = sourceResponse, refresh = true }, "text/html");
        }

The source is put into the image src with javascript and Jquery

$("#editorModal").on("shown.bs.modal", function () { showImage(); })

function showImage() {
    console.log("ShowImage resizedSource");
    console.log(resizedSource);

    $("#selectedImage").attr("src", resizedSource);
}

resizedSource is set in this handler

function getResizedImage() {
    $.ajax({
        url: "/NextprintPhotobook/GetResizedImageFile",
        type: "POST",
        data: JSON.stringify({ imageSource: imageSource }),
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            if (data.OK != 1) {
                showError("Er is een fout opgetreden bij het openen van de foto. Data niet OK.", data.message, data.refresh);
            }
            console.log("getResizedImage data.message");
            console.log(data.message);
            resizedSource = data.message;
        },
        error: function (data) {
            showError("Er is een fout opgetreden bij het openen van de foto.");
        }
    });
}

Answer 1

Simply save the image path in the <appSettings> block of web.config with respect to your server

 <add key="ImagePath" value="localhost:1337/Cyber/4076/1/img/resized/" />

And then get the path from this key and the image name from database. Then finally create a URL like this:

ImageUrl = ConfigurationManager.AppSettings["ImagePath"]+ ImageName;

Where ImageName is the name of image extracted from database. Return the ImageUrl to the client which will be

localhost:1337/Cyber/4076/1/img/resized/1.jpg

when ImageName=1.jpg

Or you can also do the following for dynamic application path

var context = HttpContext.Current;
string appPath = string.Format("{0}://{1}{2}{3}",
                                    context.Request.Url.Scheme,
                                    context.Request.Url.Host,
                                    context.Request.Url.Port == 80 ? string.Empty : ":" + context.Request.Url.Port,
                                    context.Request.ApplicationPath);

And use this appPath for setting the relative path to the localhost dynamically.