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

Adding additional fields upon file upload

2 Answers 208 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Benjamin
Top achievements
Rank 1
Benjamin asked on 17 Nov 2016, 09:28 AM

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 Answers, 1 is accepted

Sort by
0
Benjamin
Top achievements
Rank 1
answered on 18 Nov 2016, 05:03 AM

i found the error was due to the following:

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

0
Benjamin
Top achievements
Rank 1
answered on 18 Nov 2016, 06:06 AM

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>

 

Tags
AsyncUpload
Asked by
Benjamin
Top achievements
Rank 1
Answers by
Benjamin
Top achievements
Rank 1
Share this question
or