I am trying to upload a file and file upload is successfully uploading. I am facing problem when I am sending extra values along with file upload save url.

I have Created a jsfiddle

Jsfiddle Example Link I am able to upload the files but I want to send the drowpdown value and text box value along with file upload.

    <span>Document Type
<select id="dropdownlist">
    <option>Id Proof</option>
    <option>Driving Liscence</option>
    <option>Other</option>
</select>
    <br/>
    Doc Number<input type="text" class="k-text" />
    <br/>
<div style="padding: 4px; margin-bottom: 10px;">
        Acceptable file types: .xml<br/>File size limit: 5MB
 </div>
    <input type="file" name="batchFile" id="batchFile" title="Select file" />
    <div id="upload-error" class="k-state-selected" style="padding: 4px; margin-top: 10px; display: none"></div>

<script>
$("#dropdownlist").kendoDropDownList();


$("#batchFile").kendoUpload({
    async: {
        saveUrl: '/Upload',
        autoUpload: false
    },
    multiple: false,
    localization: {
        select: "Select a file",
        uploadSelectedFiles: "Send"
    }
});
</script>

I am trying to upload a file and file upload is successfully uploading. I am facing problem when I am sending extra values along with file upload save url.

I have Created a jsfiddle

Jsfiddle Example Link I am able to upload the files but I want to send the drowpdown value and text box value along with file upload.

    <span>Document Type
<select id="dropdownlist">
    <option>Id Proof</option>
    <option>Driving Liscence</option>
    <option>Other</option>
</select>
    <br/>
    Doc Number<input type="text" class="k-text" />
    <br/>
<div style="padding: 4px; margin-bottom: 10px;">
        Acceptable file types: .xml<br/>File size limit: 5MB
 </div>
    <input type="file" name="batchFile" id="batchFile" title="Select file" />
    <div id="upload-error" class="k-state-selected" style="padding: 4px; margin-top: 10px; display: none"></div>

<script>
$("#dropdownlist").kendoDropDownList();


$("#batchFile").kendoUpload({
    async: {
        saveUrl: '/Upload',
        autoUpload: false
    },
    multiple: false,
    localization: {
        select: "Select a file",
        uploadSelectedFiles: "Send"
    }
});
</script>

• javascript
• jquery
• kendo-ui
• kendo-grid

5 Answers 5

I have updated your JSFiddle to post additional fields.

http://jsfiddle.net/dtrimarchi/bWs9j/61/

upload: function (e) {
    e.data = { dropdownlist: $("#dropdownlist").val(), docnumber: $("#docnumber").val() };
}

Did you take a look at the upload event handler? Looks like this will do what you need possibly to send extra data, their example is adding a request header.

http://docs.telerik.com/kendo-ui/api/web/upload#events-upload

API Controller Side public async Task<ApiResponseAdmin> Upload(ICollection<IFormFile>addfiles, [FromForm] string KeyValue) UI Kendo $("#xyz").kendoUpload({ multiple: true, async: { saveUrl: API_UploadFile, //removeUrl: "remove", autoUpload: false }, upload: onUpload, validation: { allowedExtensions: [".gif", ".jpg", ".png", ".jpeg"] }, }); function onUpload(e) { var keyInput = $("#Id").val(); if (keyInput != null) { e.formData = new FormData(); e.formData.append("KeyValue", keyInput); }

I managed to modify the saveurl in the upload function like this:

upload: function (e) { e.sender.options.async.saveUrl = e.sender.options.async.saveUrl + "/" + e.files[0].name; }

I am always uploading one file and I am sending its name in the URL. Async configuration is:

async: { withCredentials: true, saveUrl: "url to the saving service", }

Here is an example I have used:

upload: function onUpload(e) {

 $.each(e.files, function (index, value) {
var fileName = value.name;

 e.sender.options.async.saveUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('List A')/items(2)/AttachmentFiles/add('" + fileName + "')"

      });
    },