Results 1 to 6 of 6

Thread: Uploading file using Ext js form + Ext direct

  1. #1

    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,436

    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 Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    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,436

    Default

    By default, there is no need for 3rd party file upload scripts.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

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

  4. #4
    Sencha Premium User
    Join Date
    Mar 2012
    Location
    germany
    Posts
    28

    Default

    [FormHandlerAttribute] on place of [HttpPost]

  5. #5

    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

    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
  •