How it works?

Question

How it works?

renanleandrof opened this issue 6 years ago · comments

Renan Leandro Ferreira commented 6 years ago

Hello,
I have 2 pages with the same HTML, CSS structure that display a file input in a modal (bootstrap).
It works fine on one, but not on the other. On the failing page, when i click the Choose button, nothing happens.

How does Filestyle works?

I couldn't find any javascript event in the button to trigger the browser choose files. I believe if i understand how does it work, i can find the problem...

Markus Lima Luthier · Answer 1 · Tue Mar 13 2018 03:19:51 GMT+0800 (China Standard Time)

I need an example or code to analyze, anyway, I find your problem and order of javascript.

Cara preciso de um exemplo ou código pra poder analisar, de qualquer forma, acho seu problema e ordem de javascript.

Renan Leandro Ferreira · Answer 2 · Tue Mar 13 2018 03:27:36 GMT+0800 (China Standard Time)

 , prepararUploadAjax: function () {
        $('.file-uploader').each( (i, element) => {
            let inputUpload = $(element);
            inputUpload.filestyle( {htmlIcon: "<i class='far fa-folder-open'></i> ", text: "Enviar", buttonBefore :true, btnClass : "btn-danger"});
        });
    }

Is the same javascripts that runs on both pages.

Markus Lima Luthier · Answer 3 · Tue Mar 13 2018 03:35:33 GMT+0800 (China Standard Time)

Dude, can you send as much code as possible? Because this is difficult to help.

Cara dá pra você enviar o máximo de código possível? Por que assim fica difícil de ajudar.

Renan Leandro Ferreira · Answer 4 · Tue Mar 13 2018 03:53:52 GMT+0800 (China Standard Time)

The code:

const CamposDinamicos = {
    template: `<div class='col-md-{3}'><div class='form-group'><label for='campo_{0}'>{1}</label>{2}</div></div>`

    , templateObrigatorio: `<div class='col-md-{3}'>
                                <div class='form-group'>
                                    <label for='campo_{0}'>{1}</label> 
                                    <div class='input-group'>{2}
                                        <span class='input-group-addon' data-toggle='tooltip' title='Obrigatório'><i class='fa fa-asterisk'></i></span> 
                                    </div>
                                </div>
                            </div>`

    , templateCheckbox: `<div class='col-md-{3}'>
                            <div class="checkbox c-checkbox needsclick c-checkbox-no-font">
                                <label class="needsclick" for='campo_{0}'>
                                    {2}
                                    <span class="glyphicon glyphicon-ok"></span>
                                    {1}
                                </label>
                            </div>
                        </div>`

    , gerarFormulario: function (campos, target, idFormParaValidacao) {
        $(target).html("");
        cgu.sortByKey(campos, "ordem");
        campos.filter(function (f) {
            return f.id.campo.ativo;
        }).forEach(function (c) {
            const campo = c.id.campo;
            const obrigatorio = c.obrigatorio;
            const tamanhoFormulario = c.tamanhoFormulario;
            try {
                const html = CamposDinamicos.gerarCampo[campo.formato](campo, obrigatorio, tamanhoFormulario);
                $(target).append(html);
            } catch (err) {
                console.log(c);
                console.log(err);
                cgu.exibirErro("Não foi possível renderizar o campo dinâmico do formato: " + campo.formato);
            }
        });
        $("[data-toggle='tooltip']").tooltip();
        $("[data-campo-dinamico=true][data-autocomplete-tipo]").each(function () {
            Autocomplete.criarAutocomplete($(this));
        });
        cgu.aplicarMascaraMoney();
        CamposDinamicos.gerarValidacaoDoForm(campos, idFormParaValidacao);
        CamposDinamicos.prepararUploadAjax();
    }

    , gerarCampo: {
        decidirObrigatorio: function (input, campo, obrigatorio, tamanho, apenasCampo = false) {
            if (apenasCampo) {
                return input;
            }
            return obrigatorio ?
                cgu.format(CamposDinamicos.templateObrigatorio, campo.id, campo.nome, input, tamanho) :
                cgu.format(CamposDinamicos.template, campo.id, campo.nome, input, tamanho);
        }

        , TEXTO_CURTO: function (campo, obrigatorio, tamanho, apenasCampo) {
            const input = cgu.format("<input type='text' id='campo_{0}' name='{2}' placeholder='{1}' class='form-control' " +
                "data-campo-dinamico='true' data-toggle='tooltip' data-placement='bottom' title='{1}'/>",
                campo.id, campo.tooltip, campo.alias);
            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }

        , TEXTO_LONGO: function (campo, obrigatorio, tamanho, apenasCampo) {
            const input = cgu.format("<textarea id='campo_{0}' name='{1}' rows='4' class='form-control' " +
                "data-toggle='tooltip' data-placement='bottom' title='{1}' data-campo-dinamico='true'></textarea>",
                campo.id, campo.alias);
            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }

        , NUMERICO: function (campo, obrigatorio, tamanho, apenasCampo) {
            const input = cgu.format("<input type='number' id='campo_{0}' name='{2}' placeholder='{1}' class='form-control' " +
                "data-toggle='tooltip' data-placement='bottom' title='{1}' data-campo-dinamico='true'/>",
                campo.id, campo.tooltip, campo.alias);
            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }

        , VALOR: function (campo, obrigatorio, tamanho, apenasCampo) {
            const input = cgu.format("<input type='text' id='campo_{0}' name='{2}' placeholder='{1}' class='form-control money-mask' " +
                "data-toggle='tooltip' data-placement='bottom' title='{1}' data-campo-dinamico='true'/>",
                campo.id, campo.tooltip, campo.alias);
            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }

        , DATA: function (campo, obrigatorio, tamanho, apenasCampo) {
            const input = cgu.format("<input type='date' id='campo_{0}' name='{2}' placeholder='{1}' class='form-control' " +
                "data-toggle='tooltip' data-placement='bottom' title='{1}' data-campo-dinamico='true'/>",
                campo.id, campo.tooltip, campo.alias);
            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }

        , DATA_HORA: function (campo, obrigatorio, tamanho, apenasCampo) {
            const input = cgu.format("<input type='datetime-local' id='campo_{0}' name='{2}' placeholder='{1}' class='form-control' " +
                "data-toggle='tooltip' data-placement='bottom' title='{1}' data-campo-dinamico='true'/>",
                campo.id, campo.tooltip, campo.alias);
            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }

        , LISTA: function (campo, obrigatorio, tamanho, apenasCampo) {
            let options = "<option value=''>-- Selecione --</option>";
            campo.dominioCampoLista.forEach(function (v) {
                options += cgu.format("<option value='{0}'>{1}</option>", v.id, v.valor);
            });
            const input = cgu.format("<select id='campo_{0}' name='{2}' class='form-control' " +
                "data-campo-dinamico='true' data-toggle='tooltip' data-placement='bottom' title='{1}'>{3}</select>",
                campo.id, campo.tooltip, campo.alias, options);
            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }

        , LISTA_MULTIVALOR: function (campo, obrigatorio, tamanho, apenasCampo) {
            let options = "";
            campo.dominioCampoLista.forEach(function (v) {
                options += cgu.format("<option value='{0}'>{1}</option>", v.id, v.valor);
            });
            const input = cgu.format("<select id='campo_{0}' multiple='multiple' name='{2}' class='form-control' " +
                "data-campo-dinamico='true' data-toggle='tooltip' data-placement='bottom' title='{1}'>{3}</select>",
                campo.id, campo.tooltip, campo.alias, options);

            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }

        , BOOLEANO: function (campo, obrigatorio, tamanho, apenasCampo) {
            const input = cgu.format("<input type='checkbox' id='campo_{0}' name='{1}' data-campo-dinamico='true'/>",
                campo.id, campo.alias);
            return cgu.format(CamposDinamicos.templateCheckbox, campo.id, campo.nome, input, tamanho, apenasCampo);
        }

        , REFERENCIA: function (campo, obrigatorio, tamanho, apenasCampo) {
            let input = `<div class='input-group autocomplete-criar'>
                            <input type='text' id='campo_${campo.id}' name='${campo.alias}' placeholder='${campo.tooltip}' class='form-control'
                                data-campo-dinamico='true' data-autocomplete-tipo='${campo.entidadeReferenciada}' data-autocomplete-maximo-itens='1' 
                                data-busca-avancada='${campo.entidadeReferenciada}' data-criacao-entidade='${campo.criar ? 'Criar':''}'/>
                            <span class="input-group-btn" data-toggle="tooltip" title="Busca Avançada">
                                <a href="#" class="btn btn-warning"><i class="fa fa-filter"></i></a>
                            </span>
                            ${obrigatorio ? "<span class='input-group-addon' data-toggle='tooltip' title='Obrigatório'><i class='fa fa-asterisk'></i></span>" : ""}
                         </div>`;

            if (!apenasCampo && campo.criar) {
                input = `<span class='btn-autocomplete-criar pull-right'>
                            <a href='#' class='btn btn-primary'><i class='fa fa-plus'></i> Criar</a>
                        </span>${input}`;
            }
            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, false, tamanho, apenasCampo);
        }

        , REFERENCIAS: function (campo, obrigatorio, tamanho, apenasCampo) {
            let input = `<div class='input-group autocomplete-criar'>
                            <input type='text' id='campo_${campo.id}' name='${campo.alias}' placeholder='${campo.tooltip}' class='form-control'
                                data-campo-dinamico='true' data-autocomplete-tipo='${campo.entidadeReferenciada}' data-autocomplete-maximo-itens='15' 
                                data-busca-avancada='${campo.entidadeReferenciada}' data-criacao-entidade='${campo.criar ? 'Novo':''}'/>
                            <span class="input-group-btn" data-toggle="tooltip" title="Busca Avançada">
                                <a href="#" class="btn btn-warning"><i class="fa fa-filter"></i></a>
                            </span>
                            ${obrigatorio ? "<span class='input-group-addon' data-toggle='tooltip' title='Obrigatório'><i class='fa fa-asterisk'></i></span>" : ""}
                         </div>`;

            if (!apenasCampo && campo.criar) {
                input = `<span class='btn-autocomplete-criar pull-right'>
                            <a href='#' class='btn btn-primary'><i class='fa fa-plus'></i> Novo</a>
                        </span>${input}`;
            }

            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, false, tamanho, apenasCampo);
        }

        , ARQUIVO: function (campo, obrigatorio, tamanho, apenasCampo) {
            const input = `
                <div class="row">
                    <div class="col-xs-9">
                        <input type='file' id='campo_${campo.id}' name='upload${campo.alias}' placeholder='${campo.tooltip}' 
                                    class='form-control file-uploader' data-id-campo-dinamico="${campo.id}"/>
                        <input type='hidden' id='uploadCampo_${campo.id}' name='${campo.alias}' data-campo-dinamico='true'/>
                    </div>
                    <div class="col-xs-3" id="progress_${campo.id}"></div>
                </div>`;


            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }

        , ARQUIVOS: function (campo, obrigatorio, tamanho, apenasCampo) {

            const input =
                `<span class='btn-autocomplete-criar pull-right'>
                <a href='#' class='btn btn-primary' id="btnNovoArquivo_${campo.id}" onclick='CamposDinamicos.adicionarArquivo("${campo.id}", "${campo.alias}", "${campo.tooltip}");'><i class='fa fa-plus'></i> Novo</a>
                </span>
                <div><br></div>
                <div class="panel panel-default" id="" style="">
                <div id="lista_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                <table id="tabela_arquivos_campo_${campo.id}" class="table table-hover table-striped table-bordered width="100%">
                    <caption class="hidden"></caption>
                    <thead>
                    <tr>
                        <th>Arquivo</th><th>Descrição</th><th>Ação</th>
                    </tr>
                    </thead>
                    <tbody id='tabelaArquivo_${campo.id}'>
                    </tbody>
                </table>
                </div>
                </div>`;

            return CamposDinamicos.gerarCampo.decidirObrigatorio(input, campo, obrigatorio, tamanho, apenasCampo);
        }
    }

    , adicionarArquivo: function (id, alias, tooltip ) {

        let idAleatorio =  Math.random().toString().split('.')[1];
        const input =
            `<tr id="${idAleatorio}">
                <td>
                    <input type='file' id='campo_${idAleatorio}' name='upload${idAleatorio}' placeholder='${tooltip}' 
                    class='form-control file-uploader' data-id-campo-dinamico="${idAleatorio}"/>
                    <input type='hidden' id='uploadCampo_${idAleatorio}' name='${alias}' data-campo-dinamico='true' data-formato-campo='ARQUIVOS'/>
                    <div class="col-xs-12" id="progress_${idAleatorio}"></div>
                </td>
                <td>
                    <input type='text' id='descricao_${idAleatorio}' name='descricao_${idAleatorio}' maxlength="200" size="80" disabled="true" class="form-control"
                    onblur="CamposDinamicos.atualizarDescricaoArquivo('${idAleatorio}');"/>
                </td>
                <td class="dt-center">
                    <button type="button" onclick="CamposDinamicos.removerArquivo('${idAleatorio}');" title="Remover arquivo" class="btn btn-danger"><i class="fas fa-trash"></i></button>                   
                </td>
            </tr>`;

        $("#tabelaArquivo_" + id).append(input);
        CamposDinamicos.prepararUploadAjax();
    }

    , removerArquivo: function (idLinhaArquivo) {
        $('#' + idLinhaArquivo).remove();
    }

    , atualizarDescricaoArquivo: function (id) {
        const idArquivo = $('#campo_' + id).val();
        const descArquivo = $('#descricao_' + id).val();
        if (!cgu.isStringVaziaNullOuUndefined(idArquivo) && !cgu.isStringVaziaNullOuUndefined(descArquivo)) {
            $.ajax({
                type: "POST",
                data: descArquivo,
                contentType: "application/json",
                dataType: "json",
                url: springUrl + "api/auth/arquivo/" + idArquivo + "/atualizardescricao"
            });
        }
    }

    , serializarFormulario: function (formId) {
        let valor;
        const camposDinamicos = {};
        $(formId + " [data-campo-dinamico]").each(function () {
            if ($(this).is(":checkbox")) {
                valor = !!$(this).is(":checked");
            } else {
                valor = $(this).val();
                if (valor !== null) {
                    valor = valor.toString();
                }
            }
            if ($(this).data("formato-campo") === "ARQUIVOS") {
                if (!cgu.isStringVaziaNullOuUndefined(camposDinamicos[$(this).attr("name")]) && !cgu.isStringVaziaNullOuUndefined(valor)) {
                    valor = camposDinamicos[$(this).attr("name")] + ',' + valor;
                }
            }
            camposDinamicos[$(this).attr("name")] = valor;
        });
        return camposDinamicos;
    }

    , gerarValidacaoDoForm: function (campos, idFormParaValidacao) {
        if (cgu.isNullOuUndefined(idFormParaValidacao)) {
            return;
        }

        const validation = {rules: {}};
        campos.forEach(function (c) {
            if (c.obrigatorio) {
                validation.rules[c.id.campo.alias] = {required: true};
            }
        });

        $(idFormParaValidacao).validate(validation);
    }
    
    , prepararUploadAjax: function () {
        $('.file-uploader').each( (i, element) => {
            let inputUpload = $(element);
            inputUpload.fileupload({
                url: springUrl + "api/auth/arquivo/novo",
                dataType: "json",
                done: function (e, data) {
                    let idCampoDinamico = inputUpload.data("id-campo-dinamico");
                    $(`#uploadCampo_${idCampoDinamico}`).val(data._response.result.id);
                    $(`#descricao_${idCampoDinamico}`).prop("disabled", false);
                },
                progressall: function (e, data) {
                    let progress = parseInt(data.loaded / data.total * 100, 10);
                    let idCampoDinamico = inputUpload.data("id-campo-dinamico");
                    if (progress !== 100) {
                        let progressDecimal = (progress + "").substr(0, 1);
                        $(`#progress_${idCampoDinamico}`).html(`<div class="radial-bar radial-bar-${progressDecimal}0 radial-bar-sm radial-bar-danger" data-label="${progress}%"></div>`);
                    } else {
                        $(`#progress_${idCampoDinamico}`).html("");
                    }
                }
            });

            inputUpload.filestyle( {htmlIcon: "<i class='far fa-folder-open'></i> ", text: "Enviar", buttonBefore :true, btnClass : "btn-danger"});
        });
    }

};

That code generates a dinamic form, based on some database configuration.
In that specific case, it's beeing generated by this input:

CamposDinamicos.gerarFormulario({[{"@id":2,"id":{"tipoInteracao":1,"campo":{"alias":"Providencias","ativo":true,"campoDaEntidadeConcreta":false,"classeCampoPadrao":null,"criar":false,"dominioCampoLista":[],"entidadeReferenciada":"","formato":"TEXTO_LONGO","formatoReferenciaOuReferencias":false,"id":39,"mascara":"","nome":"Providências ","tooltip":"Registre as providências"}},"obrigatorio":false,"ordem":2,"tamanhoFormulario":12,"campo":{"alias":"Providencias","ativo":true,"campoDaEntidadeConcreta":false,"classeCampoPadrao":null,"criar":false,"dominioCampoLista":[],"entidadeReferenciada":"","formato":"TEXTO_LONGO","formatoReferenciaOuReferencias":false,"id":39,"mascara":"","nome":"Providências ","tooltip":"Registre as providências"},"tipoInteracao":1},{"@id":3,"id":{"tipoInteracao":1,"campo":{"alias":"Anexo","ativo":true,"campoDaEntidadeConcreta":false,"classeCampoPadrao":null,"criar":false,"dominioCampoLista":[],"entidadeReferenciada":"","formato":"ARQUIVO","formatoReferenciaOuReferencias":false,"id":40,"mascara":"Anexo","nome":"Arquivos em Anexo","tooltip":"Arquivos em Anexo"}},"obrigatorio":false,"ordem":1,"tamanhoFormulario":12,"campo":{"alias":"Anexo","ativo":true,"campoDaEntidadeConcreta":false,"classeCampoPadrao":null,"criar":false,"dominioCampoLista":[],"entidadeReferenciada":"","formato":"ARQUIVO","formatoReferenciaOuReferencias":false,"id":40,"mascara":"Anexo","nome":"Arquivos em Anexo","tooltip":"Arquivos em Anexo"},"tipoInteracao":1}]}, "#camposDoTipoInteracao .campos-dinamicos", "#formInteracao");

The modal html:

<div class="modal fade" id="modalRegistrarInteracao" tabindex="-1" role="dialog" aria-labelledby="modalRegistrarInteracaoLabel">
    <form id="formInteracao" method="post">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="tituloModalRegistrarInteracao">Registrar Interação</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="idTipoInteracao">Tipo de Interação</label>
                        <div class="input-group">
                            <select class="form-control" id="idTipoInteracao" name="idTipoInteracao">
                            </select>
                            <span class="input-group-addon" data-toggle="tooltip" title="Obrigatório"><i class="fa fa-asterisk"></i></span>
                        </div>
                    </div>
                </div>
                <div class="" id="camposDoTipoInteracao" style="display:none;">
                    <div class="campos-dinamicos"><br/></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-success" id="btnRegistrar" onclick=""><i class="fa fa-save"></i> Registrar</button>
                </div>
            </div>
        </div>
    </form>
</div>

Renan Leandro Ferreira · Answer 5 · Tue Mar 13 2018 03:55:33 GMT+0800 (China Standard Time)

I know is a lot of things, so, i've simplified the question to how does it work.
How your component knows that when i click the button, it should trigger the browser file browse?

Markus Lima Luthier · Answer 6 · Tue Mar 13 2018 04:05:07 GMT+0800 (China Standard Time)

Não existe click no filestyle, clicar em um input file de um formulário é falha de segurança e o próprio browser bloqueia.

done: function (e, data) {
   let idCampoDinamico = inputUpload.data("id-campo-dinamico");
   $(`#uploadCampo_${idCampoDinamico}`).val(data._response.result.id);
   $(`#descricao_${idCampoDinamico}`).prop("disabled", false);
   $(element).filestyle( {htmlIcon: "<i class='far fa-folder-open'></i> ", text: "Enviar", buttonBefore :true, btnClass : "btn-danger"});
},

Tenta isto

Renan Leandro Ferreira · Answer 7 · Tue Mar 13 2018 04:17:14 GMT+0800 (China Standard Time)

Deu não. Esse DONE é o evento que o outro componente de upload (pra fazer upload ajax) dispara após o upload ser concluído.

Eu ja tentei remover esse outro componente, só pra ver se ele estava interferindo, mas não é o caso. Até por que, em uma tela funciona e na outra não.

Renan Leandro Ferreira · Answer 8 · Tue Mar 13 2018 04:19:50 GMT+0800 (China Standard Time)

Qual que é a mágica pro botão "choose" do filestyle disparar a escolha de arquivos do navegador?
Eu vi que vc esconde o input normal usando o position:absolute + clip, mas não entendi como que o clique do botão dispara a escolha.. Talvez eu tenha algum código interferindo nessa forma sua.

Markus Lima Luthier · Answer 9 · Tue Mar 13 2018 04:24:13 GMT+0800 (China Standard Time)

Você tem um evento que chama essas telas. O Filestyle deve rodar por ultimo, outra coisa é que já há relatos de incompatibilidade com o fileupload. Mas não sei exatamente se é incompatibilidade.

É a label que referencia o campo.

Dá um inspect no resultado final do campo e print aqui. Tanto o que funciona e o que não funciona.

Renan Leandro Ferreira · Answer 10 · Tue Mar 13 2018 04:28:22 GMT+0800 (China Standard Time)

Certo, eu rodo ele por ultimo sim. Depois que os inputs já estão na tela, a modal já está exibida e tudo mais, aí eu chamo essa parte do filestyle e do fileupload.

Não funciona:

<div class="modal fade in" id="modalRegistrarInteracao" tabindex="-1" role="dialog" aria-labelledby="modalRegistrarInteracaoLabel" style="display: block; padding-right: 17px;">
    <form id="formInteracao" method="post" novalidate="novalidate">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="tituloModalRegistrarInteracao">Registrar Interação</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="idTipoInteracao">Tipo de Interação</label>
                        <div class="input-group">
                            <select class="form-control" id="idTipoInteracao" name="idTipoInteracao" aria-invalid="false"><option value="">-- Selecione --</option><option value="1">Registra Providência</option><option value="2">Cancelamento</option><option value="3">Enviar ao Gestor</option><option value="5">Suspender</option><option value="7">Solicitação de Providências</option><option value="4">Concluir Análise</option></select>
                            <span class="input-group-addon" data-toggle="tooltip" title="" data-original-title="Obrigatório"><i class="fa fa-asterisk"></i></span>
                        </div>
                    </div>
                </div>
                <div class="" id="camposDoTipoInteracao" style="">
                    <div class="campos-dinamicos"><div class="col-md-12"><div class="form-group"><label for="campo_40">Arquivos em Anexo</label>
                <div class="row">
                    <div class="col-xs-9">
                        <input type="file" id="campo_40" name="uploadAnexo" placeholder="Arquivos em Anexo" class="form-control file-uploader" data-id-campo-dinamico="40" tabindex="-1" style="position: absolute; clip: rect(0px, 0px, 0px, 0px);"><div class="bootstrap-filestyle input-group"><div name="filedrag" style="position: absolute; width: 100%; height: 36px; z-index: -1;"></div><span class="group-span-filestyle input-group-btn" tabindex="0"><label for="campo_40" style="margin-bottom: 0px; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;" class="btn btn-danger "><i class="far fa-folder-open"></i> <span class="buttonText">Enviar</span></label></span><input type="text" class="form-control " placeholder="" disabled=""> </div>
                        <input type="hidden" id="uploadCampo_40" name="Anexo" data-campo-dinamico="true">
                    </div>
                    <div class="col-xs-3" id="progress_40"></div>
                </div></div></div><div class="col-md-12"><div class="form-group"><label for="campo_39">Providências </label><textarea id="campo_39" name="Providencias" rows="4" class="form-control" data-toggle="tooltip" data-placement="bottom" title="" data-campo-dinamico="true" data-original-title="Providencias"></textarea></div></div></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-success" id="btnRegistrar" onclick=""><i class="fa fa-save"></i> Registrar</button>
                </div>
            </div>
        </div>
    </form>
</div>

Funciona:

<div class="modal fade in" id="modalRegistrarInteracao" tabindex="-1" role="dialog" aria-labelledby="modalRegistrarInteracaoLabel" style="display: block; padding-right: 17px;">
    <form id="formInteracao" method="post" novalidate="novalidate">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="tituloModalRegistrarInteracao">Registrar Interação</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="idTipoInteracao">Tipo de Interação</label>
                        <div class="input-group">
                            <select class="form-control" id="idTipoInteracao" name="idTipoInteracao" aria-invalid="false"><option value="">-- Selecione --</option><option value="1">Registra Providência</option><option value="7">Solicitação de Providências</option><option value="2">Cancelamento</option><option value="3">Enviar ao Gestor</option><option value="4">Concluir Análise</option><option value="5">Suspender</option></select>
                            <span class="input-group-addon" data-toggle="tooltip" title="" data-original-title="Obrigatório"><i class="fa fa-asterisk"></i></span>
                        </div>
                    </div>
                </div>
                <div class="" id="camposDoTipoInteracao" style="">
                    <div class="campos-dinamicos"><div class="col-md-12"><div class="form-group"><label for="campo_40">Arquivos em Anexo</label>
                <div class="row">
                    <div class="col-xs-9">
                        <input type="file" id="campo_40" name="uploadAnexo" placeholder="Arquivos em Anexo" class="form-control file-uploader" data-id-campo-dinamico="40" tabindex="-1" style="position: absolute; clip: rect(0px, 0px, 0px, 0px);"><div class="bootstrap-filestyle input-group"><div name="filedrag" style="position: absolute; width: 100%; height: 36px; z-index: -1;"></div><span class="group-span-filestyle input-group-btn" tabindex="0"><label for="campo_40" style="margin-bottom: 0px; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;" class="btn btn-danger "><i class="far fa-folder-open"></i> <span class="buttonText">Enviar</span></label></span><input type="text" class="form-control " placeholder="" disabled=""> </div>
                        <input type="hidden" id="uploadCampo_40" name="Anexo" data-campo-dinamico="true">
                    </div>
                    <div class="col-xs-3" id="progress_40"></div>
                </div></div></div><div class="col-md-12"><div class="form-group"><label for="campo_39">Providências </label><textarea id="campo_39" name="Providencias" rows="4" class="form-control" data-toggle="tooltip" data-placement="bottom" title="" data-campo-dinamico="true" data-original-title="Providencias"></textarea></div></div></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-success" id="btnRegistrar" onclick=""><i class="fa fa-save"></i> Registrar</button>
                </div>
            </div>
        </div>
    </form>
</div>

Markus Lima Luthier · Answer 11 · Tue Mar 13 2018 04:32:34 GMT+0800 (China Standard Time)

Está ai seu problema. Os Ids são iguais. O registro sempre valerá para o primeiro que achar

Renan Leandro Ferreira · Answer 12 · Tue Mar 13 2018 04:47:27 GMT+0800 (China Standard Time)

Não era isso não.. Mas me ajudou a identificar o problema!
Essas modais são exibidas em telas diferentes.
Na tela que nao funcionava tinha 2 inputs com id campo_40. Aí provavelmente o filestyle devia ta apontando pro primeiro, q não era um input.

Valeu a ajuda!
E parabéns pelo componente! É excelente.

Markus Lima Luthier · Answer 13 · Tue Mar 13 2018 04:50:37 GMT+0800 (China Standard Time)

Obrigado! Que bom que ajudei. :)
Se você não estiver usando nenhum plugin pra exibir mensagens dá uma olhada no que fiz recentemente.
https://markusslima.github.io/bird-alert/

Abraços

Renan Leandro Ferreira · Answer 14 · Tue Mar 13 2018 04:57:32 GMT+0800 (China Standard Time)

Legal... Usamos o toastr por aqui. Já ta bem disseminado na organização. http://codeseven.github.io/toastr/demo.html

…

____________________________ Renan Leandro Ferreira (61) 98436-0600 www.minhaio.com.br "Sola Scriptura, Sola Gratia, Sola Fide, Solus Christus, Soli Deo Gloria!"

On Mon, Mar 12, 2018 at 5:50 PM, Markus Lima Luthier < ***@***.***> wrote: Obrigado! Que bom que ajudei. :) Se você não estiver usando nenhum plugin pra exibir mensagens dá uma olhada no que fiz recentemente. https://markusslima.github.io/bird-alert/ Abraços — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#148 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGz0aVVtc5MUkiqlKCDhafas8Za0-h8Dks5tdt-fgaJpZM4SnOWj> .