Calling a server side function on every file upload complete event

12 posts, 0 answers
  1. Oren
    Oren avatar
    21 posts
    Member since:
    Mar 2012

    Posted 31 Dec 2013 Link to this post

    Hello,
    I'm building a multi video uploader using "RadAsyncUpload" control.
    for each video the user will be asked to fill its title. after he had selected all the videos with their titles he will press submit.
    The page will only submit  the files after all of them have been uploaded.
    On the server side, after the submission each file directory will be change and a new record in the database will be added.

    My question is:
    Since the upload process can take a lot of time ,and in the event of a connection lost, or closing the browser by mistake
    the user will have to upload all files again.
    I was wondering if it is possible to call a server side function to preforme the file logging and manupuletion for each completed video without stopping the upload process?

    this is a snippet of my code for example:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div style="background-color: white" id="test-div">
                <asp:ScriptManager ID="ScriptManagerMain" runat="server">
                    <Scripts>
                        <asp:ScriptReference Path="~/Script/jquery-1.9.1.min.js" />
                        <asp:ScriptReference Path="~/Script/jquery-migrate.js" />
                        <asp:ScriptReference Path="~/Script/ValidationEngineLibrary/jquery.validationEngine.js" />
                        <asp:ScriptReference Path="~/Script/ValidationEngineLibrary/jquery.validationEngine-en.js" />
                    </Scripts>
                </asp:ScriptManager>
                <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" ClientIDMode="Static" HideFileInput="true" OnClientFilesUploaded="fileUploaded" OnClientFileSelected="addFileTitle" MultipleFileSelection="Automatic" MaxFileInputsCount="10"></telerik:RadAsyncUpload>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return submitPage();" OnClick="btnSubmit_Click" />
                <span id="uploading-msg"></span>
                <input type="button" runat="server" value="clearAll" onclick="clearAll()" />
                <asp:Label runat="server" ID="updateInfo"></asp:Label>
            </div>
            <telerik:RadScriptBlock runat="server">
     
                <script type="text/javascript">
                    var submitPressed = false;
                    function clearAll() {
                        $("#RadAsyncUpload1").find("input[name=RowRemove]").each(function () {
                            $(this).click();
                        });
                    }
                    function addFileTitle(radAsyncUpload, args) {
                        var $row = $telerik.$(args.get_row());
                        var inputName = radAsyncUpload.getAdditionalFieldID("TextBox");
                        var inputType = "text";
                        var inputID = inputName;
                        var input = createInput(inputType, inputID, inputName);              
                        var label = createLabel(inputID);
                        $row.append("<br/>");
                        $row.append(label);
                        //Add required validation
                        $(input).addClass("validate[required,custom[movieTitle]]");
                        $row.append(input);
                    }
     
                    function createInput(inputType, inputID, inputName) {
                        var input = '<input type="' + inputType + '" id="' + inputID + '" name="' + inputName + '" />';
                        return input;
                    }
     
                    function createLabel(forArrt) {
                        var label = '<label for=' + forArrt + '>File info: </label>';
                        return label;
                    }
     
     
     
                    function submitPage() {
                        $('#form1').validationEngine({ maxErrorsPerField: "1", binded: false, scroll: false });
                        var valid = $('#form1').validationEngine('validate');
                        //Check file uploads
                        if (valid == false)
                            return false;
     
                        if (!isAllUploadCompleted()) {
                            $("#<%=btnSubmit.ClientID%>").hide();
                            $("#uploading-msg").text("Uploading");
                            setInterval(function () { $("#uploading-msg").blink(); }, 1500);
                            $("#test-div").blockElement();
                            submitPressed = true;
                            return false;
                        }
                        return true;
                    }
     
                    function fileUploaded() {
                        if(submitPressed && isAllUploadCompleted())
                             fireSubmit();
                    }
                    function isAllUploadCompleted() {
                        var $ = $telerik.$;
                        //finds all file uploads that are currently in progress
                        var uploadingRows = $(".RadAsyncUpload").find(".ruUploadProgress");
                        //iterates and checks is there any file uploads that are successfully completed or failed and if yes - pop-up an alert box and prevent page submitting
                        for (var i = 0; i < uploadingRows.length; i++) {
                            if (!$(uploadingRows[i]).hasClass("ruUploadCancelled") && !$(uploadingRows[i]).hasClass("ruUploadFailure") && !$(uploadingRows[i]).hasClass("ruUploadSuccess")) {
                                return false;
                            }
                        }
     
                        return true;
                    }
                    function fireSubmit() {
                        document.getElementById("<%=btnSubmit.ClientID%>").removeAttribute("onclick");
                        document.getElementById("<%=btnSubmit.ClientID%>").click();
                    }
                </script>
            </telerik:RadScriptBlock>
        </form>
    </body>
    </html>

    thank you
    oren
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 03 Jan 2014 Link to this post

    Hi Oren,

    It would be possible to call a server side code without stopping the upload process if you use a custom handler to upload the selected files. Look at the sample of this post. In the Process method of the handler you could do everything you need.

    Regards,
    Hristo Valyavicharski
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Oren
    Oren avatar
    21 posts
    Member since:
    Mar 2012

    Posted 15 Jan 2014 Link to this post

    Hi Hristo,
    Thank you for your reply.
    I have one more question, about the handler that I will be glad if you can help me with.
    Every file that is being added also creates a textbox for his name, I want to be able to get this data in the handler method.
    How can it be done?
    Kind regards,
    Oren
  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 20 Jan 2014 Link to this post

    Hi Oren,

    The file name will be passed automatically to the Process() method of the handler. Any other custom information could be passed to the handler with Query Strings as shown here http://www.telerik.com/help/aspnet-ajax/asyncupload-query-string-parameters%20to-upload-handler.html.

    Regards,
    Hristo Valyavicharski
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Oren
    Oren avatar
    21 posts
    Member since:
    Mar 2012

    Posted 23 Jan 2014 Link to this post

    Hi Hristo,
    First of all ,Thank you for very much for your help.
    In the example that you sent me , I saw that its possible to add  a "queryStringParams" using the "args" obj in the FileUploading event,
    like so:
    function onClientFileUploading(sender, args) {
              var obj = { first: 1, second: 2 };
              args.set_queryStringParams(obj);
          }

    My problem with this event is that, since the "onClientFileUploading" method is being invoked as soon as the user select his file,
    and he doesn't  have a chance to set the file name , since the file name input box is being created on the FileSelectedEvent.
    My question is how can I access the "queryStringParams" method from the uploader object?

    Kind regards,
    oren

  7. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 28 Jan 2014 Link to this post

    Hi Oren,

    Yes you are right. The handler will be invoked before the user manage to enter a username. Try different approach. Remove the handler, enter a username and change the file name on the server in the OnFileUploaded event:

    <telerik:RadTextBox ID="rtbFileName" runat="server" Label="File Name"></telerik:RadTextBox>
    <telerik:RadAsyncUpload
        ID="RadAsyncUpload1"
        OnClientFileUploadFailed="OnClientFileUploadFailed"
        OnClientValidationFailed="OnClientValidationFailed"
        OnFileUploaded="RadAsyncUpload1_FileUploaded"
        runat="server">
    </telerik:RadAsyncUpload>
     
    <telerik:RadButton ID="RadButton1" runat="server" Text="Upload"></telerik:RadButton>

    protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
    {
        string target = Server.MapPath("~/Uploads/");
        string fileName =  rtbFileName + e.File.GetExtension();
        e.File.SaveAs(target + fileName);
    }


    Regards,
    Hristo Valyavicharski
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  8. Oren
    Oren avatar
    21 posts
    Member since:
    Mar 2012

    Posted 06 Feb 2014 in reply to Hristo Valyavicharski Link to this post

    Hi Hristo,
    Thank you for your reply.
    Your solution to the problem was the first thing that I tried to do when I started to build this multi video uploader.
    Using this approach,I faced a problem of losing all  data , if connection error occurs.The OnFileUploaded event is being invoked only when all uploads finish uploading,And I can't access movies that already was uploaded. The handler was a good solution because , it was called on each file upload event,but the only problem I had with it was the I couldn't find a way to set the queryStringParams outside the onClientFileUploading. Is there a way I can set the queryStringParams on a button press event , and not from the onClientFileUploading event??
    Kind Regards,
    Oren



  9. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 10 Feb 2014 Link to this post

    Hi Oren,

    It is not possible to set the Query String on a button click, because it will be too late. I would suggest that you to try the following approaches:
    • Use Additional Fields to set the video's title.
    • Or in the handler return the video's ID that is returned from the database. Later, having a Video ID on the Client make a call to a web service, which updates the db's record with the video's Title.

    Regards,
    Hristo Valyavicharski
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  10. Oren
    Oren avatar
    21 posts
    Member since:
    Mar 2012

    Posted 11 Feb 2014 in reply to Hristo Valyavicharski Link to this post

     Hi Hristo ,
    Thank you for your reply.
    I thought about using ajax to call web service every file that finishes uploading,but the OnClientFileUpload is being called only when all files have done uploading, and not for each individual file.
    Is there an event that is being called for each file ?
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Feb 2014 in reply to Oren Link to this post

    Hi Oren,

    The OnClientFileUploading, client-side event occurs when a file has started uploading.To make it more clear suppose you are selecting five files to upload, then this event will fire prior to uploading each file. Please have a look into this help documentation for more information.

    Thanks,
    Shinu.
  12. Oren
    Oren avatar
    21 posts
    Member since:
    Mar 2012

    Posted 11 Feb 2014 in reply to Shinu Link to this post

    Hi Shinu,
    Thank you for your reply.
    The OnClientFileUploading can't help me. I need to know when each file finish uploading.
  13. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Feb 2014 in reply to Oren Link to this post

    Hi Oren,

    From your code I see that you are setting MultipleFileSelection property as Automatic. So that you can use OnClientFileUploded event which will for each uploaded file as follows.

    ASPX:
    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" MultipleFileSelection="Automatic"
        OnClientFileUploaded="OnClientFileUploaded1">
    </telerik:RadAsyncUpload>

    JavaScript:
    <script type="text/javascript">
        function OnClientFileUploaded1(sender, args) {
            alert(args.get_fileName());
        }
    </script>

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017