Como implementar um campo de upload no formulário que anexe arquivos na aba "Anexos" da solicitação?

Formulários
, , ,
1

Olá, pessoal! Tudo bem?

Estou desenvolvendo um processo e em etapa desse processo preciso que o usuário consiga fazer o upload de um arquivo diretamente por um campo dentro do formulário.

O objetivo principal é que, ao selecionar o arquivo no formulário, ele seja vinculado (em tempo real) na aba Anexos nativa da solicitação do workflow.

A ideia é melhorar a experiência do usuário para que ele não precise subir a página e usar o botão “Anexar” nativo do cabeçalho do Fluig.

Alguém já implementou algo similar ou tem sugestões / alternativas para resolver esse cenário?

Agradeço desde já pelas ideias e contribuições!

2

Jose, boa tarde! Tudo certo contigo?

Costumo fazer da seguinte forma:

<div class="componentAnexo"><div class="input-group"><input type="hidden" class="descAnexo" name="fileRelatorio1"/><input type="text" id="fileRelatorio2" name="fileRelatorio2" class="form-control inputAnexo input-sm" placeholder="Anexo" readonly/></div><div class="icones"><button type="button" class="btnUpFile btn btn-success btn-sm" data-acao="upload" onclick="anexo(event)" title="Selecionar"><i class="fluigicon fluigicon-file-upload icon-sm"></i></button></div></div>

function anexo(event) {
    try {
        const acao = event.currentTarget.getAttribute("data-acao");
        const inputFile = $(event.currentTarget).parent().parent().find(".inputAnexo")[0];
        const fileDescription = $(event.currentTarget).parent().parent().find(".descAnexo").val();
        if (acao == "upload") {
            uploadFile(fileDescription, inputFile.id)
        }
    } catch (e) {
        console.error("Houve um erro inesperado na função anexo")
        console.error(e)
    }
}

function uploadFile(fileDescription, idInput) {
    try {
    	var mobile = getMobile();
        if (mobile == "false") {
            var tabAttachments = parent.document.getElementById("tab-attachments");
            if (tabAttachments) {
                if (parent.WCMAPI.isIe9()) {
                    $(".ecm-navigation-silverlight", parent.document).show("fade").css("top", 0);
                    $("#ecm-navigation-silverlight", parent.document).attr({
                        "data-on-camera": "true", "data-file-name-camera": fileDescription, "data-inputNameFile": idInput
                    });
                    console.log("data-file-name-camera= " + fileDescription, "data-inputNameFile=" + idInput);
                    $(parent.document).on("keyup", this.actionKeyup)
                } else {
                    var element = parent.document.getElementById("ecm-navigation-inputFile-clone");
                    if (element && document.createEvent) {
                        element.setAttribute("data-on-camera", "true");
                        if (fileDescription && idInput) {
                            element.setAttribute("data-file-name-camera", fileDescription)
                            element.setAttribute("data-inputNameFile", idInput)
                            console.log(fileDescription, idInput)
                        }
                       
                        element.click();
                    }
                }
            }
        }else{
			JSInterface.showCamera(fileDescription);
			setFilePhisicalName(idInput, fileDescription)
		}
    } catch (e) {
        console.error('##### ERRANX_RDV' + e);
    }
}