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

Sending Raw File Data Through JQuery Ajax

3 Answers 1164 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Coty
Top achievements
Rank 1
Coty asked on 31 Oct 2014, 01:16 PM
I have a form with some text fields and a kendo upload control.  I want the user to fill out the fields, select an image, then select a Save button at the end to save the information.  I am having trouble sending the file data, it always comes through as null.

I'm going to simplify my code for the example but below is basically what I want:

$(document).ready(function () {
    //kendo file upload control
    $("#files").kendoUpload({
        multiple: false,
        select: onSelect
    });
});
function onSelect(e) {
    if (e.files[0] !== 'undefined') {
        //has file
        var myFile = e.files[0];
        //save file to session if available
        if (myFile.size > 0) {
            if (HasLocalStorage()) {
                //local storage available
                sessionStorage.FileData = JSON.stringify(myFile.rawFile);
                sessionStorage.FileName = myFile.name;
            }
        }
    }
}
function BasicInfo(AccountId, AccountName, FileName, FileBinary) {
    this.AccountId = AccountId;
    this.AccountName = AccountName;
    this.FileName = FileName;
    this.FileBinary = FileBinary;
}
function SaveBasicInfo() {
 
    //Get Info
    var name = $("#txtName").val();
    var accountid = $("#ddlAccount").val();
    var FileName = '';
    var FileBinary = null;
 
    if (HasLocalStorage()) {
        FileName = sessionStorage.FileName;
        FileBinary = JSON.parse(sessionStorage.FileData);
 
        var myBasicInfo = new BasicInfo(accountid, name, FileName, FileBinary);
 
        $.ajax({
            url: '/api/AM/BasicInfo/' + myUserInfo.CurrentAccountId,
            type: 'put',
            data: JSON.stringify(myBasicInfo),
            contentType: 'application/json',
            success: function (data) {
                //Save was successful
            },
            error: function (err) {
                alert(err.responseText);
            },
            complete: function () {
            }
        });
    }
}

SaveBasicInfo is called when the user clicks the Save button on the form.   Here is the function on the server.  The data all comes through except the rawData from the file.  It ends up being NULL.

public string PutBasicInfo(BasicInfo myBasicInfo) {
     //Do Stuff Here
     //myBasicInfo.FileBinary IS NULL!!
}

I tried both passing in a byte[] array and a string with the data, both I can't seem to get working.  What is the proper way to pass the rawData to C# function so I can save the file to the database?

Thanks.

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 31 Oct 2014, 03:36 PM
Hi Coty,


The current question is not related to the Kendo UI Upload widget, so I could not provide technical assistance. Generally the synchronous Upload widget is basically the same as a regular <input type="file"> element, so if you manage to make it work with a regular element, I assume there won't be any issues in implementing our widget.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Coty
Top achievements
Rank 1
answered on 01 Nov 2014, 10:08 PM
Ok, but can you tell me is the "e.files[0].rawData" property that I am accessing the correct property that holds the file data?  And what is the data type?  Is it a byte array?  When I look at the rawData, it appears to be an object with other properties (like modified date etc).  Where is the actual file data stored?

Thanks.
0
Dimiter Madjarov
Telerik team
answered on 03 Nov 2014, 08:57 AM
Hi Coty,


Yes, the rawData property holds the file data. It is the in-memory representation of the file. Additional information could be found on the following page.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Upload
Asked by
Coty
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Coty
Top achievements
Rank 1
Share this question
or