Question

I know how the xtype: filefield works and I also realized that file upload does not use the regular ajax method to read and write data to database…

I can set up filefield normally and when I click the browse button I can select the necessary file.

this.fp = Ext.create('Ext.form.Panel', {
           scope: this,
           width: 200,
           frame: true,
           title: 'File Upload Form',
           autoHeight: true,
           bodyStyle: 'padding: 10px 10px 0 10px;',
           items: [
           {
               xtype: 'filefield'

           }
           ],
           buttons: [
           { text: 'Upload',
               handler: function () {
                   var form = this.up('form').getForm();
                   if (form.isValid()) {
                       form.submit({
                           url: 'Upload.aspx',
                           waitMsg: 'Uploading your file...',

                           success: function (form, action) {

                               alert("OK:" + action.result.message);

                           },
                           failure: function (form, action) {
                               alert("Error:" + action.result.message);
                           }

                       });
                   }
               }
           }
           ]


       });

What happens after the upload button is clicked is the problem… How would I get the file uploaded to server side…(sql db)… using c#

I tried creating an upload.aspx page with upload.aspx.cs and did this just to see if it worked…

public partial class Upload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

    HttpContext context = HttpContext.Current;


    if (context.Request.Files.Count > 0)
    {

        BinaryReader file = new BinaryReader(context.Request.Files[0].InputStream);

        string line;
        while ((line = file.ReadString()) != null)
        {

            // sql connection?
        }

    }

    // prepare response
    MessageOb result = new MessageOb();

    result.success = true;

    result.message = "Success";


}
}

But I get this error

Ext.Error: You're trying to decode an invalid JSON String: 

Has someone documented where I can see the usual step to upload a file to sql db from extjs on client side and c# on serverside… or I’d really appreciate if someone can show me how it’s done

Answer 1

The problem is probably related to how you return data from the upload form submit. Ext.JS requires the response to be JSON or XML, I would verify you are not returning a html document.

I presume MessageOb handles this somehow…maybe?

Uncaught Ext.Error: You're trying to decode an invalid JSON String: Form Submission using Ext JS and Spring MVC