Adding additional fields upon file upload

3 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    62 posts
    Member since:
    Jul 2016

    Posted 17 Nov 2016 Link to this post

    Hi. i like that AsyncUpload is able to automically create a new file upload control to allow multiple uploads. but i wants to know is it possible to add additional field to each row? i want to add a dropdown list for users to select the document type of the file he uploaded

     

    My Code:

    01.<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnClientFileUploaded="onClientFileUploaded" MultipleFileSelection="Automatic"></telerik:RadAsyncUpload>
    02.
    03.<script>
    04.
    05.    (function () {
    06.
    07.        window.onClientFileUploaded = function (radAsyncUpload, args) {
    08.            var row = args.get_row(),
    09.                inputName = radAsyncUpload.getAdditionalFieldID("documentType"),
    10.                inputType = "text",
    11.                inputID = inputName,
    12.                input = createInput(),
    13.                label = createLabel(inputID),
    14.                br = document.createElement("br");
    15.
    16.            row.appendChild(br);
    17.            row.appendChild(label);
    18.            row.appendChild(input);
    19.        }
    20.
    21.        function createInput() {
    22.            var input = document.createElement("select");
    23.              var option = new Option();
    24.              option.value = "HR";
    25.              option.text = "HR";
    26.              input.options.add(option);
    27.
    28.           var option1 = new Option();
    29.           option1.value = "Finance";
    30.           option1.text = "Finance";
    31.            input.options.add(option1);
    32.
    33.              var option2 = new Option();
    34.              option2.value = "IT";
    35.              option2.text = "IT";
    36.              input.options.add(option2);
    37.            return input;
    38.        }
    39.
    40.        function createLabel(forArrt) {
    41.            var label = document.createElement("label");
    42.
    43.            label.setAttribute("for", forArrt);
    44.            label.innerHTML = "Document Type: ";
    45.
    46.            return label;
    47.        }
    48.    })();
    49.</script>

     

    i receive the error shown in attached image

  2.
  3. Benjamin
    Benjamin avatar
    62 posts
    Member since:
    Jul 2016

    Posted 17 Nov 2016 in reply to Benjamin Link to this post

    i found the error was due to the following:

    Could not load type 'Telerik.Web.UI.WebResource'. how do i fix this error?

  5. Benjamin
    Benjamin avatar
    62 posts
    Member since:
    Jul 2016

    Posted 18 Nov 2016 Link to this post

    hi this seems to be an error on my part. i managed to solve it. but i would like to check if for the additonal field i am able to add a "select" element. as when i did this during post back i got a null pointer exception

    protected void btn_Submit_Click(object sender, EventArgs e)
     {
          result.Text = "";
          foreach(UploadedFile file in RadAsyncUpload1.UploadedFiles)
          {
             result.Text += "File: " + file.FileName + "doc type is " + file.GetFieldValue("documentType").ToString() + "<br />";
          }
    }

     

    updated markup:

    01.<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnClientFileUploaded="onClientFileUploaded" MultipleFileSelection="Automatic"></telerik:RadAsyncUpload>
    02.<asp:Label ID="result" runat="server"></asp:Label>
    03.<asp:Button ID="btn_Submit" runat="server" Text="Submit" OnClick="btn_Submit_Click" />
    04. 
    05.<script>
    06.(function () {
    07. 
    08.        window.onClientFileUploaded = function (radAsyncUpload, args) {
    09.            var row = args.get_row(),
    10.                inputName = radAsyncUpload.getAdditionalFieldID("documentType"),
    11.                inputType = "text",
    12.                inputID = inputName,
    13.                input = createInput(),
    14.                label = createLabel(inputID);
    15.                 
    16.            row.appendChild(label);
    17.            row.appendChild(input);
    18.        }
    19. 
    20.        function createInput() {
    21.            var input = document.createElement("select");
    22.             
    23.            var option = new Option();
    24.            option.value = "HR";
    25.            option.text = "HR";
    26.            input.options.add(option);
    27. 
    28.            var option1 = new Option();
    29.            option1.value = "Finance";
    30.            option1.text = "Finance";
    31.            input.options.add(option1);
    32. 
    33.            var option2 = new Option();
    34.            option2.value = "IT";
    35.            option2.text = "IT";
    36.            input.options.add(option2);
    37.            return input;
    38.        }
    39. 
    40.        function createLabel(forArrt) {
    41.            var label = document.createElement("label");
    42. 
    43.            label.setAttribute("for", forArrt);
    44.            label.innerHTML = "Document Type: ";
    45. 
    46.            return label;
    47.        }
    48.    })();
    49.</script>

     

Back to Top