Sending Raw File Data Through JQuery Ajax

4 posts, 0 answers
  1. Coty
    Coty avatar
    41 posts
    Member since:
    Jun 2014

    Posted 31 Oct 2014 Link to this post

    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.
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 31 Oct 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Coty
    Coty avatar
    41 posts
    Member since:
    Jun 2014

    Posted 01 Nov 2014 in reply to Dimiter Madjarov Link to this post

    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.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 03 Nov 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready