To view thw Uploaded image instantly

[Dhamodharan]

Hi,
I am user Upload control, Is there any possiblity to view the Uploaded image instantly before saving.





Thanks

[Shinu]

Hi Dhamodharan,

As far as I know RadAsyncUpload does not provide an option to view the uploaded files before saving to the server since it is not possible to access the client uploaded files from the temporary folder as well as get the physical path due to browser security restrictions.

Thanks,
Shinu.

[Berkman]

Hi Shinu

In my application I am using an HTTP handler to upload multiple files directly to the server without using any temp folder. So once the files are saved from the handler, the user should be able to open all the files that are uploaded by him. Since I am using an HTTP handler, will this be possible?

[Shinu]

Hi Berkman,

This is possible. You can have a look into the following sample solution I have prepared for your scenario.

ASPX:

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" UploadedFilesRendering="BelowFileInput"
    HttpHandlerUrl="~/RadAsyncUpload/Handler.ashx" MultipleFileSelection="Automatic"
    OnClientFileUploaded="OnClientFileUploaded">
</telerik:RadAsyncUpload>
<telerik:RadWindowManager ID="RadWindowManager" runat="server" Width="650px" Height="600px">
</telerik:RadWindowManager>

JavaScript:

<script type="text/javascript">
    var $ = $telerik.$;

    function OnClientFileUploaded(sender, args) {
        var row = args.get_row();
        var span = $(row).find(".ruFileWrap .ruUploadProgress");
        var location = "Uploads/" + args.get_fileName();
        span.text("").append("<u style='cursor:pointer;'>" + args.get_fileName() + "</u>");
        span.on('click', function () {
            radopen(location, "");
        });
    }
</script>

CSS:

<style type="text/css">
    .ruRemove
    {
        display: none !important;
    }
</style>

C# : Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : Telerik.Web.UI.AsyncUploadHandler
{
    protected override Telerik.Web.UI.IAsyncUploadResult Process(Telerik.Web.UI.UploadedFile file, HttpContext context, Telerik.Web.UI.IAsyncUploadConfiguration configuration, string tempFileName)
    {
        var path = context.Server.MapPath("Uploads");

        file.SaveAs(path + "\\" + file.GetName());
        return CreateDefaultUploadResult<Telerik.Web.UI.UploadedFileInfo>(file);
    }
}

Thanks,
Shinu.

[Berkman]

Hi Shinu

Thanks a lot for your brilliant solution :-). Your idea of tweaking the control in such a way that clicking the file name will open the file in a radwindow seems good and well accepted since I don't really need to access the directory to get the uploaded files and users can open multiple uploaded files and have and glance at it.

I need another clarification. Can I access the TargetFolder specified in the mark-up of asyncupload instead of hard coding a path in the http handler? I need to use the same handler for multiple pages.

Regards
Berkman

[Shinu]

Hi Berkman,

You can use pass query string parameters from client side to the HTTP handler in order to achieve your requirement so that you don't need to hard code the path in the handler and will be able to use a single handler for your required pages. Please attach the OnClientFileUploading client event of the RadAsyncUpload where you can set the target path in a JavaScript object and use the set_queryStringParams() method to transfer it to the handler.

Please check the sample code I tried for your scenario.

JavaScript:

<script type="text/javascript">
    function OnClientFileUploading(sender, args) {
        var parameter = { path: "Uploads" };
        args.set_queryStringParams(parameter);
    }
</script>

C# : Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : Telerik.Web.UI.AsyncUploadHandler
{
    protected override Telerik.Web.UI.IAsyncUploadResult Process(Telerik.Web.UI.UploadedFile file, HttpContext context, Telerik.Web.UI.IAsyncUploadConfiguration configuration, string tempFileName)
    {
        var queryStringParam1 = context.Request.QueryString["path"];  //Get the path from the Query string
        var path = context.Server.MapPath(queryStringParam1);
        file.SaveAs(path + "\\" + file.GetName());
        return CreateDefaultUploadResult<Telerik.Web.UI.UploadedFileInfo>(file);
    }
}

Thanks,
Shinu.

[Berkman]

Hi Shinu,

Thankyou shinu for your reliable support as always.

[Berkman]

Hi shinu,

I found an issue. It is not working properly in IE9. The files are uploaded to the same directory from where the aspx runs instead of uploading to target folder which is send as query string parameter. Please help.

[Shinu]

Hi Berkman,

IE-9 uses Silverlight as the default upload module which does not support sending query string parameters to upload handler. This functionality works only in IFrame and FileApi Upload Modules, so if you want to use it in IE7,8,9 you should either set the DisablePlugins property to true or disable Silverlight upload module so that it switches to IFrame module.

Hope this helps,
Shinu.