To view thw Uploaded image instantly

9 posts, 0 answers
  1. Dhamodharan
    Dhamodharan avatar
    300 posts
    Member since:
    Sep 2010

    Posted 04 Nov 2013 Link to this post

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





    Thanks
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Berkman
    Berkman avatar
    23 posts
    Member since:
    Feb 2013

    Posted 05 Nov 2013 Link to this post

    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?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Nov 2013 Link to this post

    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.
  6. Berkman
    Berkman avatar
    23 posts
    Member since:
    Feb 2013

    Posted 06 Nov 2013 Link to this post

    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
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Nov 2013 Link to this post

    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.
  8. Berkman
    Berkman avatar
    23 posts
    Member since:
    Feb 2013

    Posted 10 Nov 2013 Link to this post

    Hi Shinu,

    Thankyou shinu for your reliable support as always.
  9. Berkman
    Berkman avatar
    23 posts
    Member since:
    Feb 2013

    Posted 11 Nov 2013 Link to this post

    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.
  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Nov 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017