Results 1 to 6 of 6

Thread: Uploading file using Ext js form + Ext direct

  1. #1
    Sencha User
    Join Date
    Jul 2014
    Posts
    16
    Vote Rating
    0
      0  

    Default 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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,385
    Vote Rating
    1540
      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 @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,385
    Vote Rating
    1540
      0  

    Default

    By default, there is no need for 3rd party file upload scripts.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #4
    Sencha Premium User
    Join Date
    Mar 2012
    Location
    germany
    Posts
    28
    Vote Rating
    -1
      0  

    Default

    [FormHandlerAttribute] on place of [HttpPost]

  5. #5
    Sencha User
    Join Date
    Jul 2014
    Posts
    16
    Vote Rating
    0
      0  

    Default

    Thank you for responding. Because I could not get it to work we chose to store the files (images) directly on the database. I'll remember this for a similar situation.

  6. #6
    Sencha Premium User
    Join Date
    Mar 2012
    Location
    germany
    Posts
    28
    Vote Rating
    -1
      0  

    Default

    the controller Method need to be set with [FormHandlerAttribute] or [FormHandler]

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •