This is a migrated thread and some comments may be shown as answers.

To view thw Uploaded image instantly

8 Answers 85 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Dhamodharan
Top achievements
Rank 1
Dhamodharan asked on 04 Nov 2013, 09:19 AM
Hi,
I am user Upload control, Is there any possiblity to view the Uploaded image instantly before saving.





Thanks

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 04 Nov 2013, 12:50 PM
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.
0
Berkman
Top achievements
Rank 1
answered on 05 Nov 2013, 05:13 PM
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?
0
Shinu
Top achievements
Rank 2
answered on 06 Nov 2013, 11:46 AM
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.
0
Berkman
Top achievements
Rank 1
answered on 06 Nov 2013, 02:44 PM
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
0
Shinu
Top achievements
Rank 2
answered on 07 Nov 2013, 06:30 AM
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.
0
Berkman
Top achievements
Rank 1
answered on 10 Nov 2013, 02:23 PM
Hi Shinu,

Thankyou shinu for your reliable support as always.
0
Berkman
Top achievements
Rank 1
answered on 11 Nov 2013, 12:19 PM
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.
0
Shinu
Top achievements
Rank 2
answered on 11 Nov 2013, 12:47 PM
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.
Tags
AsyncUpload
Asked by
Dhamodharan
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Berkman
Top achievements
Rank 1
Share this question
or