ASP.net Razor return image URL in JSON from upload

Question

Below I have code from my image upload returning JSON information about the image. Near the assignment of the name parameter I am trying to return the URL of the image although it is not working. Currently the below code does not work as nothing is returned to the browser upon return. The code works fine albeit for the line to add to the Name property near the end.

How can I return the URL of the image so as to display the image URL to the user on return?

[HttpPost]
public ContentResult UploadFiles()
{
    var r = new List<UploadFilesResult>();

    foreach (string file in Request.Files)
    {
        HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
        if (hpf.ContentLength == 0)
            continue;

        string savedFileName = Url.Content(Path.Combine(Server.MapPath("~/Images"), Path.GetFileName(hpf.FileName)));
        hpf.SaveAs(GetNewPathForDupes(savedFileName));

        r.Add(new UploadFilesResult()
        {
            Name = Path.Combine(Server.MapPath("~/Images"), Path.GetFileName(hpf.FileName)),
            Length = hpf.ContentLength,
            Type = hpf.ContentType
        });
    }

    return Content("{\"name\":\"" + r[0].Name + "\",\"type\":\"" + r[0].Type + "\",\"size\":\"" + string.Format("{0} bytes", r[0].Length) + "\"}", "application/json");
}

EDIT my Javascript to process the form in the done parameter i am trying to read the JSON but cant get it to work with the new Jsonresult:

$(document).ready(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                url: "UploadFiles",
                autoUpload: true,
                done: function (e, data) {
                    var json = JSON.parse(data);
                    $('.file_name').html(json.name);
                    $('.file_type').html(json.type);
                    $('.file_size').html(json.size);
                }
            }).on('fileuploadprogressall', function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress .progress-bar').css('width', progress + '%');
            });
        });

Aren't you already returning the url as the name attribute? If you switch to JsonResult as suggested by dav_i it should be easy to access in Javascript. — Andrew Wilkinson
– Andrew Wilkinson, Commented Mar 14, 2014 at 12:53

dav_i · Accepted Answer · 2014-03-14 14:32:44Z

1

So instead of

return this.Content("{\"name\":\"" + r[0].Name + ...

you could simply do this:

return this.Json(r[0]);

When reading the JSON in your jQuery you will need to do

var jsonString = // from the response

var json = $.parseJSON(jsonString);

var name = json.someElement;

edited Mar 14, 2014 at 14:32

answered Mar 14, 2014 at 13:46

dav_i

28.2k17 gold badges110 silver badges138 bronze badges

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

1 Comment

user667430 Over a year ago

Hi, thanks this is definitely more manageable to dealing with the JSON data. In my Javascript 'done' function i have attempted at retrieving the data although it doesn't seem to be working. I will edit the answer.

Collectives™ on Stack Overflow

ASP.net Razor return image URL in JSON from upload

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related