1. #1
    Sencha User
    Join Date
    Jul 2014
    Posts
    4
    Vote Rating
    0
    GuitarPlayer89 is on a distinguished road

      0  

    Default Uploading file using Ext js form + Ext direct

    Uploading file using Ext js form + Ext direct


    Hello Everybody,

    I'm trying to upload a file using an ext js form with ExtDirect, however I'm not successful in doing so.
    When not using ExtDirect everything does work, so I am clueless about what's wrong.

    The server function Resource.Upload is called, but no filename is present in Request.Files.

    This is the code for client and server (C# .net) I use:

    Code:
      Ext.onReady(function (){
            
                Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
                
                console.log("We are showing the index page");
                
                 Ext.create('Ext.form.Panel', {
                    width: 500,
                    fileUpload: true,
                    renderTo: Ext.getBody(),
                    frame: true,
                    title: 'File Upload Form',
                    bodyPadding: '10 10 0',
                    api: { submit: Resource.Upload},
    
                    defaults: {
                        anchor: '100%',
                        allowBlank: false,
                        msgTarget: 'side',
                        labelWidth: 50
                    },
    
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Name'
                    },{
                        xtype: 'filefield',
                        id: 'form-file',
                        emptyText: 'Select an image',
                        fieldLabel: 'Photo',
                        name: 'Image',
                        buttonText: '',
                        buttonConfig: {
                            iconCls: 'upload-icon'
                        }
                    }],
    
                    buttons: [{
                        text: 'Save',
                        handler: function(){
                                    
                        
                        debugger;
                            var form = this.up('form').getForm();
                            if(form.isValid()){
                                form.submit({
                                    //url: 'Home/Upload',
                                    waitMsg: 'Uploading your photo...',
                                    success: function(fp, o) {
                                        console.log('Success', 'Processed file "' + o.result.file + '" on the server');
                                    }
                                });
                            }
                        }
                    },{
                        text: 'Reset',
                        handler: function() {
                            this.up('form').getForm().reset();
                        }
                    }]
                });
    Code:
            [HttpPost]
            public ActionResult Upload()
            {
                string[] supportedTypes = new string[]{
                    "png", "gif", "tiff", "bmp", "jpg", "jpeg" //(1)
                };
    
                HttpPostedFileBase postedFile = Request.Files["image"];
    
                if (postedFile != null) //(2)
                {
                    string x = Path.GetExtension(postedFile.FileName);
    
                    if (supportedTypes.Contains(x.TrimStart('.'))) //(3)
                    {
                        //to do sth with the file
                        return Content("{success:true, result:\"File uploaded correctly\"}"); //(4)
                    }
    
                    else //(5)
                    {
                        //unsupported file type
                        return Content("{success:false, error:\"Unsupported file type\"}");
                    }
                }
    
                return new JsonResult() //(6)
                {
                    ContentType = "text/html",
                    Data = new { success = false, error = "File uploaded error" }
                };
            }

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,069
    Vote Rating
    852
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This would depend on your router implementation on the server side. It should handle file uploads and still be able to pipe the request to the appropriate function.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,069
    Vote Rating
    852
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    By default, there is no need for 3rd party file upload scripts.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread