Ir para conteúdo


Foto

Salvamento automático de foto


  • Por favor, faça o login para responder
2 respostas neste tópico

#1 brugnars

brugnars

    Iniciante

  • Membros
  • Pip
  • 1 posts

Postado 05 April 2017 - 15:56

Estou criando uma tela o usuário inserir sua foto. Só que o salvamento só é executado quando clica no botão salvar. Existe alguma maneira de ser automaticamente?

 

/**
 * @class Gestao.view.funcionario.Tela
 * Tela que fará a listagem dos funcionarios.
 */
Ext.define('Gestao.ux.container.UploadFotoCadastro', {
    extend: 'Ext.panel.Panel',
    requires: [
        'BS2.controls.BSUploadButton'
    ],
    xtype: 'container-upload-foto-cadastro',
    layout: 'vbox',
    width: 140,
    height: 200,
    /**
     * @method initComponent
     * Inicializa o componente de acordo com as necessidades de funcionamento.
     * @protected
     */
    initComponent: function () {
        var me = this;


        //icon: currentPath + 'resources/upload.png'

        Ext.applyIf(me, {
            items: [{
                xtype: 'image',
                width: '100%',
                border: 0,
                itemId: 'imagem',
                flex: 1
            }, {
                xtype: 'form',
                layout: 'hbox',
                height: 25,
                width: '100%',
                border: 0,
                items: [{
                    xtype: 'fileuploadfield',
                    url: '/UploadToDisk',
                    bsAction: 'upload',
                    name: 'FotoCadastro',
                    buttonText: 'Inserir',
                    buttonOnly: true,
                    flex: 1,
                    hideLabel: true,
                    buttonConfig: {
                        width: '100%'
                    },
                    itemId: 'btnInserir'
                }, {
                    xtype: 'button',
                    buttonText: 'Excluir',
                    text: 'Excluir',
                    flex: 1,
                    itemId: 'btnExcluir'
                }]
            }]
        });
        me.callParent(arguments);
        me.addReferences();
        me.addEventHandler();
    },
    /**
     * @method addReferences
     * Adiciona referência de objetos para facilitar o acesso dos mesmos.
     * @private
     */
    addReferences: function () {
        var me = this;
        me.btnInserir = me.down('#btnInserir');
        me.btnExcluir = me.down('#btnExcluir');
        me.form = me.down('form');
        me.imagem = me.down('#imagem');
    },
    /**
     * @method addEventHandler
     * Adiciona os listners dos eventos a serem monitorados.
     * @private
     */
    addEventHandler: function () {
        var me = this;

        me.btnInserir.on({
            change: function (fileField) {
                if (fileField.getErrors().length === 0) {
                    if (fileField.fileInputEl.dom.files[0]) {
                        var nome = fileField.fileInputEl.dom.files[0].name,
                            tamanho = fileField.fileInputEl.dom.files[0].size;


                        if (fileField.fileInputEl.dom.files[0].type != 'image/png') {
                            Ext.Msg.alert({
                                title: 'Erro',
                                msg: 'Extensão do arquivo não é permitida',
                                buttons: Ext.Msg.OK,
                                icon: Ext.Msg.WARNING,
                                fn: function (button) {
                                    me.formDados.storeFoto.removeAll();
                                    var currentPath = BS2.lib.UIHelper.getCurrentPath();
                                    me.imagem.setSrc(currentPath + 'resources/fotoVazio.png');
                                }
                            });
                            return;
                        }


                        me.form.getForm().submit({
                            url: '/UploadToDisk',
                            waitMsg: 'Uploading your photo...',
                            success: function (fp, o) {
                                me.imagem.setSrc('/ShowImage?guid="' + o.result.guid + '"&nomeArquivo="' + o.result.fileName + '"');

                                if (me.formDados.storeFoto.data.items.length > 0) {
                                    me.formDados.storeFoto.removeAll();
                                }
                                me.formDados.storeFoto.add({
                                    Chave: o.result.guid,
                                    Nome: o.result.fileName,
                                    Extensao: o.result.fileType,
                                    Caminho: o.result.type
                                });
                            },
                        });
                    }

                } else {
                    Ext.Msg.show({
                        title: 'Gestao',
                        msg: fileField.getErrors().join('<br>'),
                        buttons: Ext.Msg.OK,
                        icon: Ext.Msg.WARNING
                    });
                }
            },
            scope: me
        });

        me.btnExcluir.on({
            click: function () {

                Ext.Msg.alert({
                    title: 'Confirmação de Cadastro',
                    msg: 'Deseja realmente prosseguir com a operação?',
                    buttons: Ext.Msg.YESNO,
                    icon: Ext.Msg.QUESTION,
                    fn: function (button) {
                        if (button == 'yes') {
                            if (me.formDados.storeFoto.data.items.length > 0) {
                                me.formDados.storeFoto.removeAll();

                                var currentPath = BS2.lib.UIHelper.getCurrentPath();
                                me.imagem.setSrc(currentPath + 'resources/fotoVazio.png');

                            }
                        }
                    }
                });
            },
            scope: me
        });
    }
});


 



#2 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 836 posts
  • LocationGoiânia - GO

Postado 05 April 2017 - 20:13

Olá seja bem vinda.

Existe sim. Você pode observar o evento change do campo fileupload e chamar sua função de upload quando este evento for disparado.

 

Exemplo:

listeners: {
        change: 'seuMetodoDeUpload',
        afterrender: function (cmp) {
            cmp.fileInputEl.set({
                accept: 'image/*'
            });
        }
    },
    regex: /(.)+((\.png)|(\.jpg)|(\.jpeg)(\w)?)$/i,
    regexText: 'Apenas imagens PNG, JPG E JPEG são aceitos',

Espero ter ajudado!


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#3 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 836 posts
  • LocationGoiânia - GO

Postado 05 April 2017 - 20:17

Agora que vi que você postou no fórum do finado Ext JS 4, haha, que não suporta "declarative listerners". neste caso você terá que implementar no seu método addEventHandler() atraves do seuCampo.on('change', suaFuncao);

 

Vlws


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!





0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos