Upload File (FormData) to WebApi

0
votes

I'm trying to upload a file to an WebApi, but I'm not receiving the file. Also I don't know If the file is being appended. I'm doing this:

if (this.state.file) {
            var file = this.state.file;
            if (window.FormData !== undefined) {
                var data = new FormData();
                data.append("file", file);

                $.ajax({
                    type: "POST",
                    url: "/api/service/upload",
                    contentType: "text/csv",
                    processData: false,
                    data: data,
                    success: function (result) {
                        console.log(result);
                    },
                    error: function (xhr, status, p3, p4) {
                        var err = "Error " + " " + status + " " + p3 + " " + p4;
                        if (xhr.responseText && xhr.responseText[0] == "{")
                            err = JSON.parse(xhr.responseText).Message;
                        console.log(err);
                    }
                });
            }
        }

Also, to check the content of my Request Payload, I tried this, instead of the Ajax call:

                var xhr = new XMLHttpRequest;
                xhr.open('POST', '/', true);
                xhr.setRequestHeader('Content-Type', 'text/csv');
                xhr.send(data);

And only appears:

------WebKitFormBoundary6xZnDkSOxBAxaovA Content-Disposition: form-data; name="file"; filename="Teste.csv" Content-Type: application/vnd.ms-excel

------WebKitFormBoundary6xZnDkSOxBAxaovA--

2
javascriptajaxasp.net-web-apifile-upload
Try removing the contentType option from ajax call. And also, please verify this.state.file is a file object not an array of file objects. console.log it. – TipuZaynSultan
I get this (I guess is a file object): File {name: "Teste.csv", lastModified: 1491903259490, lastModifiedDate: Tue Apr 11 2017 10:34:19 GMT+0100 (GMT Daylight Time), webkitRelativePath: "", size: 32…} lastModified : 1491903259490 lastModifiedDate : Tue Apr 11 2017 10:34:19 GMT+0100 (GMT Daylight Time) name : "Teste.csv" size : 32 type : "application/vnd.ms-excel" webkitRelativePath : "" proto : File – Andre Roque
But after I append the file to FormData object, the object only have the prototype, is that normal? Shouldn't have a File object inside? – Andre Roque
That is perfectly normal. I am preparing an answer for this post with some code. Try it. – TipuZaynSultan

2 Answers

0
votes

If the file size is not large, you can use base64 encoding. Send the encoded string data to web api service. Decode and use it.

0
votes

Okay so you have a file object, and it looks right. Give the below code a try.

var file; // Assuming this is the file object.
var formData = new FormData();
formData.append('file', file);

$.ajax({
    type : 'POST',
    url : '/api/service/upload',
    data : formData,
    dataType : 'json', // json, html whatever you like.
    contentType: false, // Change this line
    processData: false
}).done(function(res) {
    console.log(res);
}).fail(function(res) {
    console.log(res.responseText);
});

If you are using PHP in the api service. You should be able to use print_r($_FILES) and see the file there.

Hope this helps.