Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Vote Rating
    1
    giovannicandido is on a distinguished road

      0  

    Default Unanswered: File Upload response Bug

    Unanswered: File Upload response Bug


    I try upload an file in a form using ExtJS 4.1.1
    The upload is sucess but the response is not bean reader. I get the follow error in firebug:
    PHP Code:
    TypeErrorresult is undefinedif (result !== true && !result.success) { 
    The error is on the file src/form/action/Submit.js on line 221

    But the server is getting the file and sending the apropriated response:

    {"success": true}

    If I remove the filefield from the form, I get the correct behavior. I'm returning a simple json {success: true}
    The Ext code is:

    Code:
    /**
     * Criado por Giovanni Candido <giovanni@atende.info>
     * Date: 22/08/12
     * Time: 11:51
     */
    //define o conteudo de abrir chamado (interface)
    
    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
    
    Ext.define('CH.view.menu.AbrirChamado',{
        extend: 'Ext.panel.Panel',
        alias: 'widget.abrirChamado',
        border:false,
        layout: {
            type: 'hbox',
            pack: 'center',
            align: 'middle'
        },
        items:[{
            xtype: 'form',
            url: '/chamado/',
            title:'Abrir Chamado' ,
            width: 500,
            height: 350,
            layout: 'form',
            defaultType: 'textfield',
            bodyPadding: 20,
            items: [
                {
                    fieldLabel: 'Solicitante',
                    name: 'solicitante',
                    afterLabelTextTpl: required,
                    allowBlank: false
                },{
                    fieldLabel: 'E-mail',
                    name: 'email'  ,
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    vtype: 'email',
                    maxLength: 120
                }, {
                    xtype:'combo',
                    fieldLabel:'Departamento',
                    name: 'departamento',
                    afterLabelTextTpl: required,
                    allowBlank:false,
                    store: 'Departamentos',
                    displayField: 'nome',
                    editable: false
    
    
                },{
                    fieldLabel:'Prédio',
                    xtype: 'numberfield',
                    allowBlank: false,
                    afterLabelTextTpl: required,
                    name:'predio',
                    minLength: 1,
                    maxLength: 2
                },{
                    fieldLabel:'Sala',
                    name:'sala',
                    maxLength: 30,
                    allowBlank: false,
                    afterLabelTextTpl: required
                },{
                    fieldLabel:'Ramal',
                    xtype: 'numberfield',
                    name:'ramal',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    minLength: 4,
                    maxLength: 4
                },{
                    xtype: 'filefield',
                    name: 'arquivo',
                    fieldLabel: 'Arquivo'
                },{
                    xtype:'textarea',
                    fieldLabel:'Descrição',
                    name:'descricao',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    maxLength: 255,
                    enforceMaxLength: true
                }],
            buttons: [{
                text: 'Reset',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }, {
                text: 'Submit',
                formBind: true,
                disabled: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if(form.isValid()){
                        form.submit({
                            waitMsg: 'Uploading your photo...',
                            success: function(fp, o) {
                                msg('Success', 'Processed file "' + o.result.file + '" on the server');
                            }
                        });
                    }
                }
            }]
            }]
    })
    The server is Spring Framework and the controller is:

    Code:
    @RequestMapping(value = "/chamado", method = RequestMethod.POST)
        public @ResponseBody ExtResponse abrirChamado(@RequestParam String solicitante,
                                                      @RequestParam String email,
                                                      @RequestParam String departamento,
                                                      @RequestParam String predio,
                                                      @RequestParam String sala,
                                                      @RequestParam String descricao,
                                                      @RequestParam String ramal,
                                                      @RequestParam MultipartFile arquivo){
            String mensagemRetorno = "";
            Chamado chamado = new Chamado();
            chamado.setNomeSolicitante(solicitante);
            chamado.setEmailSolicitante(email);
            chamado.setDepartamento(departamento);
            chamado.setPredio(predio);
            chamado.setSala(sala);
            chamado.setDescricao(descricao);
            chamado.setRamal(ramal);
            if(!arquivo.isEmpty()){
                byte[] bytes;
                try {
                    bytes = arquivo.getBytes();
                    chamado.setArquivo(bytes);
                } catch (IOException e) {
                    mensagemRetorno += " Arquivo não pode ser anexado em chamado";
                }
    
            }
            dao.salvar(chamado);
            return ExtResponse.SUCCESS;
        }

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Vote Rating
    1
    giovannicandido is on a distinguished road

      1  

    Default I find what is going on

    I find what is going on


    The problem is that when using filefield the response needs to be html. My response is with content-type: application/json and is picked up by spring. Even if the response are the same ("{success: true}") extjs throw the error if the response type is not text/html.

    For my specific case I'm using spring 3.1 and I change the behavior of the message-converters. For generate the html response I need change the controller method and enable the html message converter:
    On spring-servlet.xml I add the bean org.springframework.http.converter.StringHttpMessageConverter (if you don't override the message-converters with the register-defaults="false" you don't need this step)
    Code:
     <mvc:annotation-driven>
            <mvc:message-converters register-defaults="false">
                <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
                    <property name="objectMapper" ref="jacksonObjectMapper" />
                </bean>
                <bean class="org.springframework.http.converter.StringHttpMessageConverter" />
            </mvc:message-converters>
        </mvc:annotation-driven>
    On the controller I change the return type to String and return a plain spring:
    Code:
        @RequestMapping(value = "/chamado", method = RequestMethod.POST)
        public @ResponseBody String abrirChamado(@RequestParam String solicitante,
                                                      @RequestParam String email,
                                                      @RequestParam String departamento,
                                                      @RequestParam String predio,
                                                      @RequestParam String sala,
                                                      @RequestParam String descricao,
                                                      @RequestParam String ramal,
                                                      @RequestParam MultipartFile arquivo){
            String mensagemRetorno = "";
            Chamado chamado = new Chamado();
            chamado.setNomeSolicitante(solicitante);
            chamado.setEmailSolicitante(email);
            chamado.setDepartamento(departamento);
            chamado.setPredio(predio);
            chamado.setSala(sala);
            chamado.setDescricao(descricao);
            chamado.setRamal(ramal);
            if(!arquivo.isEmpty()){
                byte[] bytes;
                try {
                    bytes = arquivo.getBytes();
                    chamado.setArquivo(bytes);
                } catch (IOException e) {
                    mensagemRetorno += " Arquivo não pode ser anexado em chamado";
                }
    
            }
            dao.salvar(chamado);
            return "{success: true, message: " + mensagemRetorno + "}";
        }
    My response in firebug is the same but the content-type is now text/html and I can view the html tab on firebug. Now extjs handles the response correct, and call my callback function onsuccess.

    The expected behavior is that extjs handle the response as json like they do in normal ajax submits.

    English is not my language, sorry for any writing errors
    Last edited by giovannicandido; 4 Sep 2012 at 10:09 AM. Reason: add expected behavior

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    jambi is on a distinguished road

      0  

    Default THANKS!

    THANKS!


    Thanks for sharing this detail... I ran into this same problem recently in receiving success and failure messages for uploading files, and changing my server response's content type to text/html worked!

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar