Search code examples
c#asp.net-mvc-3telerik-mvcradupload

Displaying an image after uploading and changing filename using MVC RadUpload


I use the RadUpload control to upload images and then display them for JCrop-ing purposes. Since these are just temporary file uploads, I place them in a temporary folder. To prevent the possibility of users uploading images with the same name, I rename them when saving.

My partial view:

@(Html.Telerik().Upload()
        .Name("attachments")
        .Multiple((bool) false)
        .ClientEvents(events => events
        .OnSuccess(
                @<text>
            function(e) {
                displayTempUpload(e);
            }
        </text>)
        )
        .Async(async => async
                .Save("Add", "Image")
                .AutoUpload((bool)true)
        )
    )

My controller:

public ActionResult Add(IEnumerable<HttpPostedFileBase> attachments)
        {
            var fileName = "";
            foreach (var file in attachments)
            {
                fileName = Guid.NewGuid().ToString() + path.GetExtension(file.FileName);
                var physicalPath = Path.Combine(Server.MapPath("~/temp"), fileName);

                file.SaveAs(physicalPath);
            }
            return Content("");
        }

IF I don't change the filename, I get to display the uploaded image using JQuery:

function displayTempUpload(e) {
    var info = getFileInfo(e);
    var path = "/temp/" + info;

    $("#img").attr("src", path);
}

function getFileInfo(e) {

    return $.map(e.files, function (file) {
        var info = file.name;
        return info;
    }).join(", ");
}

However, the files object passed to the onSuccess function retains the original filename. Now that I have changed the filename, is it possible to pass the new value to the onSuccess function in some way?

I tried changing the return value of the Add() controller action but that resulted to the RadUpload control thinking that an error occurred in the saving process. I have also taken a look at the other properties of e in the onSuccess function but nothing seems to be able to help.


Solution

  • Yo mate,

    If you are trying to return it as String with the Content method most probably the response will be treated as error. However if you return JSON it should work fine. Give it a try.