I have a kendo-fileselect () in an HTML form, along with several other elements (checkboxes, etc). The other fields are picked up by the backend, but for whatever reason, the file contents are not picked up properly. As an experiment, I added a plain file input to my form, and its contents were included in the POST request, but not the kendo-fileselect when I selected the exact same file from the UI (just an empty application/octet-stream). Does the kendo-fileselect behave differently from a vanilla file type and if so, can it be submitted with a plain form post?

HTML:

<div>
    <kendo-fileselect
        #fileSelect
        name="fileSelect"
        formControlName="fileSelect"
        [multiple]="false"
        [restrictions]="uploadRestrictions"
    >
    </kendo-fileselect>
</div>
<div>
    <input type="file" name="filePath" />
</div>

POST REQUEST BODY:

------geckoformboundary198f09eb5dd7819ca937be21fbe01fe0
Content-Disposition: form-data; name="fileSelect"; filename=""
Content-Type: application/octet-stream

------geckoformboundary198f09eb5dd7819ca937be21fbe01fe0
Content-Disposition: form-data; name="filePath"; filename="mydata.csv"
Content-Type: application/vnd.ms-excel

a,b,c
1,2,3
x,y,z

I have a kendo-fileselect (https://www.telerik/kendo-angular-ui/components/uploads/fileselect) in an HTML form, along with several other elements (checkboxes, etc). The other fields are picked up by the backend, but for whatever reason, the file contents are not picked up properly. As an experiment, I added a plain file input to my form, and its contents were included in the POST request, but not the kendo-fileselect when I selected the exact same file from the UI (just an empty application/octet-stream). Does the kendo-fileselect behave differently from a vanilla file type and if so, can it be submitted with a plain form post?

HTML:

<div>
    <kendo-fileselect
        #fileSelect
        name="fileSelect"
        formControlName="fileSelect"
        [multiple]="false"
        [restrictions]="uploadRestrictions"
    >
    </kendo-fileselect>
</div>
<div>
    <input type="file" name="filePath" />
</div>

POST REQUEST BODY:

------geckoformboundary198f09eb5dd7819ca937be21fbe01fe0
Content-Disposition: form-data; name="fileSelect"; filename=""
Content-Type: application/octet-stream

------geckoformboundary198f09eb5dd7819ca937be21fbe01fe0
Content-Disposition: form-data; name="filePath"; filename="mydata.csv"
Content-Type: application/vnd.ms-excel

a,b,c
1,2,3
x,y,z

• kendo-ui
• kendo-ui-angular2

1 Answer 1

The short answer seems to be that the itself can't be submitted with a plain HTML form. I was able to work around this by creating a temporary form in the dom, adding a file input element to it, and setting the files attribute of the new element using a DataTransfer:

const originalFile = kendoInput.files[0];

const tempForm = document.createElement('form');

const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'uploadFile';
fileInput.style.display = 'none';

const dataTransfer = new DataTransfer();
dataTransfer.items.add(originalFile);
fileInput.files = dataTransfer.files;

tempForm.appendChild(fileInput);