How I can upload files using Laravue with Dropzone

Question

i'm trying to make work Laravue Dropzone, but I have'nt working yet

Here is the code:

<el-dialog :title="'Importar Bitacora'" :visible.sync="dialogFormVisible">
  <div v-loading="weblogCreating" class="form-container">
    <el-form ref="weblogForm" :rules="rules" :model="newBitacora" label-position="left" label-width="150px">
      <div class="editor-container">
        <dropzone id="CargarBitacora" url="/api/bitacora/importar" @dropzone-removedFile="dropzoneR(e)" @dropzone-error="dropzoneError" @dropzone-success="dropzoneS" />
      </div>
    </el-form>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">
      {{ $t('bitacora.cancel') }}
    </el-button>
    <el-button type="primary" @click="handleUpload()">
      {{ $t('bitacora.confirm') }}
    </el-button>
  </div>
</el-dialog>

<script>
  import Dropzone from '@/components/Dropzone';
  export default {
    name: 'BitacoraList',
    components: { Dropzone },
    data() {
      return {
        files: [],
      },
      created() {
        .. code here ..
      },
      methods: {
        handleUpload(e) {
        const formData = new FormData();

        this.files.forEach(file => {
          formData.append('files[]', file);
        });
        console.log(this.files);
      },
    }
 };
</script>

I've tried to pass the files to handleUpload, but I can't make it work to the moment

Answer 1

I figured out how to upload files with dropzone, en the method handleUpload I just have to send the file to a post method in laravel backend who upload a temporary file

dropzoneR(file) {
  var name = file.upload.filename;
  fileResource.borrar(name).then(response => {
    this.files.splice(this.files.indexOf(name), 1);
    if (this.files.length < 1) {
      this.btnUpload = true;
    }
  }).catch(error => {
    console.log(error);
  });
},

and returns an ok if it gets uploaded, then when I confirm thats the files I need up, other method in laravel backend who do what a want to do with the file if its an excel file (in mi case) upload the data to the database, or what ever I want. like this

async handleUpload(e) {
  this.weblogCreating = true;
  await bitacoraResource.store(this.files).then(response => {
    this.$message({ message: 'Bitacoras importadas satisfactoriamente', type: 'success' });
    this.files = '';
    this.dialogImportVisible = false;
    this.weblogCreating = false;
    this.getList();
  }).catch(error => {
    this.$message({
      message: 'Error importando las bitacoras ' + error.getMessage,
      type: 'error',
    });
    this.weblogCreating = false;
    console.log(error.message);
  });
},