Upload to server immediately after client upload without waititng for postback

4 posts, 1 answers
  1. Antony
    Antony avatar
    32 posts
    Member since:
    Feb 2013

    Posted 28 Oct 2013 Link to this post

    I would like to upload the selected files directly to the server without requiring the user to make a postback. The client side file upload should be followed by upload to server automatically. Also I dont want to use a Generic handler. How can I accomplish this?

    Any input appreciated
    Antony
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Oct 2013 Link to this post

    Hi Antony,

    One option is you can place a RadButton in the page and after all the files are client uploaded, you can invoke a click from the JavaScript and there by initiate postback so that the user does not need to click anywhere to generate a postback to upload the files.

    JavaScript:
    <script type="text/javascript">
        function OnClientFilesUploaded(sender, args) {
            var $ = $telerik.$;
            $('#RadButtonID').click();
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Antony
    Antony avatar
    32 posts
    Member since:
    Feb 2013

    Posted 31 Oct 2013 Link to this post

    Worked as I expected. Now can I use the same control to let the user view the file contents such as read pdf/view images once upload is done?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 31 Oct 2013 Link to this post

    Hi Antony,

    RadAsyncUpload control does not provide such a feature out of the box to view the uploaded files. One option is you can populate all the uploaded files (file names) in a RadListBox and double click the items to view the file in a RadWindow. Please try the following full code I tried which works fine at my end.

    ASPX:
    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" MultipleFileSelection="Automatic"
        AllowedFileExtensions=".jpg" TargetFolder="Uploads/" OnClientFilesUploaded="OnClientFilesUploaded"
        OnFileUploaded="RadAsyncUpload1_FileUploaded">
    </telerik:RadAsyncUpload>
    <br />
    <br />
    <telerik:RadButton ID="rbtnIconUpload" runat="server" Style="display: none;">
    </telerik:RadButton>
    Uploaded Files<br />
    <telerik:RadListBox ID="RadListBox1" runat="server" Visible="true" OnClientItemDoubleClicked="openFile">
    </telerik:RadListBox>
    <telerik:RadWindowManager ID="RadWindowManager" runat="server" Width="500px" Height="550px">
    </telerik:RadWindowManager>

    JavaScript:
    <script type="text/javascript">
        function openFile(sender, args) {
            var filelocation = "Uploads/" + args.get_item().get_text();
            radopen(filelocation, "")
        }
    </script>

    C#:
    protected void RadAsyncUpload1_FileUploaded(object sender, Telerik.Web.UI.FileUploadedEventArgs e)
    {
        string targetfolder = RadAsyncUpload1.TargetFolder;
        e.File.SaveAs(Path.Combine(Server.MapPath(targetfolder), e.File.FileName));
        RadListBoxItem item = new RadListBoxItem(e.File.FileName);
        RadListBox1.Items.Add(item);
    }

    Thanks,
    Shinu.
Back to Top