I need to upload some files, but there is a detail, a table will be mounted as in the figure below, I can already add to the table itself, but at the time of upload I have no idea of the procedure, I do not know if I am passing correctly, finally, if you can give me a force, briefly, it's a table where I select the file, the type it belongs to and I add / remove it from the table but the files are only sent when I click save.
<!--Tabdasinformações--><divrole="tabpanel" class="tab-pane fade" id="informacoes">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-12">Arquivo</label>
<div class="col-sm-12">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Selecionar arquivo</span>
<input type="file" name="..." accept="application/pdf" v-on:change="processaArquivo($event)">
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-md-12">Tipo</label>
<div class="col-md-12">
<select class="form-control" v-model="arquivos.tipo">
<option value="">Selecione o tipo</option>
<option value="Comprovante de Endereço">Comprovante de Endereço</option>
<option value="Declaração de Pobreza">Declaração de Pobreza</option>
<option value="Doc. de Identificação (Autor)">Doc. de Identificação (Autor)</option>
<option value="Doc. de Identificação (Réu)">Doc. de Identificação (Réu)</option>
<option value="Documentos">Documentos</option>
<option value="Petição">Petição</option>
<option value="Petição Inicial">Petição Inicial</option>
<option value="Procuração Adjudicia">Procuração Adjudicia</option>
<option value="Procuração Pública">Procuração Pública</option>
</select>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="col-md-12">Ação</label>
<div class="col-md-12">
<a v-on:click="adicionarArquivos()" class="btn btn-info" type="button" style="cursor: pointer;">Adicionar</a>
</div>
</div>
</div>
@{{ arquivos }}
<div class="col-md-12 m-b-30">
<div class="table-responsive">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>Nome</th>
<th class="text-center">Data</th>
<th class="text-center">Tipo</th>
<th class="text-nowrap text-center">Ação</th>
</tr>
</thead>
<tbody>
<tr v-if="!processo.arquivos.length">
<td colspan="4" class="text-center">NENHUM ARQUIVO ENVIADO</td>
</tr>
<tr v-else v-for="arquivo in processo.arquivos">
<td>@{{ arquivos.arquivo }}</td>
<td class="text-center">@{{ arquivo.data }}</td>
<td class="text-center">@{{ arquivo.tipo }}</td>
<td class="text-center">
<a style="cursor:pointer;"> <i class="fa fa-close text-danger m-r-10"></i> </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clearfix"></div>
</div>
adicionarArquivos: function () {
if(this.arquivos.arquivo === '' || this.arquivos.tipo === '')
swal('Ops!', 'Selecione o arquivo e informe o tipo!', 'error');
else
{
// Adiciona a arquivo na lista
this.processo.arquivos.push(this.arquivos);
console.log(this.arquivos);
// Redefine os valores do input e select
//this.arquivos.arquivo = '';
//this.arquivos.tipo = '';
}
},
processaArquivo(event) {
this.arquivos.arquivo = event.target.files[0].name;
console.log(event);
},
// Envia um post de inserção de dados
insereDados: function ()
{
if(!this.processo.numero || !this.processo.data_protocolo || !this.processo.area || !this.processo.instancia
|| !this.processo.foro || !this.processo.classe)
swal('Ops!', 'Existem campos obrigatórios em branco!', 'error');
else
{
if(this.processo.autores === 0 || this.processo.reus.length === 0)
swal('Ops!', 'Você deve adicionar os autores e os réus!', 'error');
else{
this.$http.post('/processos/inserir', this.processo).then(response => {
if(response.bodyText === "true")
swal({
title: 'Sucesso!',
text: "Operação realizada com sucesso!",
type: 'success',
showCancelButton: false,
confirmButtonText: 'Ok'
}).then(function () {
window.location = '/processos/';
});
else
swal('Ops!', 'Erro na solicitação, tente novamente!', 'error');
}, response => {
swal('Ops!', 'Erro na solicitação, tente novamente!', 'error');
});
}
}
},