3

I'm trying to send a .xlsx file to my REST API using Kendo Ui. But I'm lost.

I was able to call my service, but I can't get the file. I believe I'm sending it wrong.

I don't need to save the file. I only need to read the .xlsx file to import the data to my database.

html (don't have a form):

<div>
    <input name="files" id="files" type="file" />
    <button id="importButton">Import</button>
</div>

js:

$("#files").kendoUpload({
    async: {
         autoUpload: true
    },
    select: onSelect
});

$("#importButton").kendoButton({
    click: onImport
});

function onImport() {
    var formData = new FormData();

    jQuery.each(jQuery('#files')[0].files, function (i, file) {
        formData.append('file-' + i, file);
    });

    $.ajax({
        type: "POST",
        url: url,
        data: formData,
        processData: false,
        cache: false,
        success: function (result) {
            alert("Ok");
        },
        error: function (result) {
            alert("Not Ok");
        }
    });
}

Server-side:

[HttpPost, Route("import")]
public void Import()
{
    var streamProvider = new MultipartMemoryStreamProvider();
    Request.Content.ReadAsMultipartAsync<MultipartMemoryStreamProvider>(streamProvider).ContinueWith((tsk) =>
    {
        foreach (HttpContent ctnt in streamProvider.Contents)
        {
            Stream stream = ctnt.ReadAsStreamAsync().Result;
            // do something
        }
    });
}
lpfx
  • 1,476
  • 4
  • 18
  • 40
  • 3
    If you're already using Kendo, I'd strongly recommend checking out their upload widget. They also just released a new spreadsheet tool in Kendo that you may find useful. https://demos.telerik.com/kendo-ui/upload/ – Ageonix Feb 23 '16 at 22:28
  • I'm already using the kendoUpload on the client for selecting the file: `$("#files").kendoUpload({ async: { autoUpload: true }, select: onSelect });` (onSelect just verify the file type). What I don't know is how to send this file to the server, so I can open it and read. – lpfx Feb 24 '16 at 11:49
  • I think you have a typo in the text portion of your question - did you mean to say "but I CAN'T get the file"? Have you thought about converting the spreadsheet to CSV on the client and then sending it over? You could just as easily get CSV data into your database. – Ageonix Feb 24 '16 at 14:57
  • You are right, there was a typo. I didn't thought about converting the spreadsheet to CSV. But I don't see how this would help me. There is easier a way to send a CSV file from client to server? The main problem is how to receive the file on my rest service. Once is there, I can work with it. – lpfx Feb 24 '16 at 15:05
  • You said the service is being reached but you can't get the file. What do you mean by that? If you set a breakpoint before your foreach, is streamProvider.Contents empty? – Ageonix Feb 24 '16 at 15:29
  • 1
    What type and version of browser(s) are you using? You have `autoUpload` set to `true`, but no `saveUrl` defined. Why not set it to `false` and implement the rest of the widget's configuration? – Brett Feb 24 '16 at 18:12
  • Don't know what you mean with `implement the rest of the widget's configuration`. From what I know, the `kendoUpload` just `gets` a file for the client. And the client will send the file to the server when the user clicks on the `Import` button. The `Import` button calls my REST API (another domain) and there I will handle the file. But I'm not getting the file. – lpfx Feb 24 '16 at 19:11

1 Answers1

1

Got it!

$("#files").kendoUpload({
    async: {
        withCredentials: false,
        saveUrl: url,
        autoUpload: true
    },
    select: onSelect
});

This answer helped me: Cross domain upload

@Brett was right, implement the kendUpload was the way. I thought the Import button should do the magic, but I only need to use kendoUpload.

Thanks!!

Community
  • 1
  • 1
lpfx
  • 1,476
  • 4
  • 18
  • 40