How to make quasar send large files with multipart / form-data?

Question

I'm working on an application with a quasar app, but when I create a file upload with the component I can not send the files in small parts ...

Look at the code ...

<template>
  <q-uploader
    multiple
    auto-expand
    :headers="{'content-type': 'multipart/form-data'}"
    url=""
    :upload-factory="uploadFile"
  />
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'Uploader',
  methods: {
    uploadFile (file, updateProgress) {
      // "file" is an Object containing file's props, including content

      // for updating progress (as 0-1 floating number), we need to call:
      // updateProgress (bytesTransferred / totalBytes)

      this.uploadFilesSend({'file': file, 'type': file.type}).then(console.log('upload ok'))

      // we need to return a Promise
      // (resolves when upload is done, rejects when there's an error)
    },
    ...mapActions('uploads', {
      uploadFilesSend: 'create'
    })
  }
}
</script>

I am using feathersjs as a server with connection socket.io, the server complains that when I send a big file the timeout, to even increase that team more I verified that it is trying to send only as a whole file and not in parts ....

I would like to know if you have and how to enable this multipart / form-data method ..

Grateful

Answer 1

You'll have to split the file up into manageable chunks on the UI and send each of those in a separate message. On the server, you have to collect all of the chunks and put them somewhere. Most file storage APIs have some sort of chunked uploading API.

In a few projects, I just used window.fetch to send a multipart request to my API.

There are some tutorials and libraries in this other post: Can I upload a file to server by socket.io in node.js?