Uploading large files axios ->feathers on IIS forwarding to node

[kimbodker]

Hi All

I have a Vue.js application with a feathers backend - where i upload files - and is is working fine with small files (27231 KB works great)
but i need to be able to upload large files (1 GB) and that is not working

in the devtools console i get the following two messages:
Access to XMLHttpRequest at 'https://api.granbysolutions.com//upload' from origin 'http://localhost:3000' has been blocked by CORS policy
AND
xhr.js?b50d:184 POST https://api.granbysolutions.com//upload net::ERR_FAILED 413

I am running my backend on IIS where I user URL rewrite to point to a node.js application hosting feathers

I am quite new to both vue, feathers and node and setting up IIS is also

I can see that the 413 means: the request was larger than the server is able to handle - can anyone point me in the right direction.
I am not sure about the CORS error but i am thinking if i get the the problem witn the 413 solved the other might dissapear

my vue application looks like this

await this.$axios.post(${process.env.BACKEND}/${that.service}, formData, {

          timeout: -1,
          headers: { Authorization: `Bearer ${that.$store.state.auth.accessToken}` },

          cancelToken: this.$options.source.token,
          onUploadProgress: (event) => {
            that.progress = Math.round((event.loaded * 100) / event.total)
          },
          onError: (error) => {
            systemlog.create({ user: that.$store.state.auth.user == null ? 'unknown' : that.$store.state.auth.user.username, component: 'fileupload', method: 'submin', logtype: 'info', module: 'client', text: 'error:' + error })
          }

        })

[suleimanas]

For large files better to stream it, it's express after all.
check this to get the idea:
https://medium.com/@vecera.petr/how-to-handle-large-file-upload-with-nodejs-express-server-7de9ab3f7af1
https://bytearcher.com/articles/formidable-vs-busboy-vs-multer-vs-multiparty/

[suleimanas]

sure you can extend your service and do the same
https://docs.feathersjs.com/api/express.html#params

[kimbodker]

sulemail> thank a lot - i now managed to put it togethers and the file is saved - now i just need to store file info i the database. (I have been creating a feathers sequalize service - How Can i do that ?

[kimbodker]

my service looks like this:
In below service i need to set it up filename by specifying req.body.filename=filename; (then filename is stored in the database)- how can i get the remaining data from my formData (axios call) and store it in the database (this was working automaticly when i was using multer - dident have to do anything) the req.body was prefilled

// Initializes the uploadb service on path /uploadb
const { Uploadb } = require('./uploadb.class');
const createModel = require('../../models/uploadb.model');
const hooks = require('./uploadb.hooks');
const fs = require('fs');
const feathers = require('@feathersjs/feathers');
const configuration = require('@feathersjs/configuration');

const appconfig = feathers().configure(configuration());
const path = require('path');
const destbase = appconfig.get('uploadpath');

module.exports = function (app) {
const options = {
Model: createModel(app),
paginate: app.get('paginate')
};

// Initialize our service with any options it requires
app.use('/uploadb', async (req, res,next) => {

console.log(res);
req.pipe(req.busboy); // Pipe it trough busboy
req.busboy.on('file', (fieldname, file, filename) => {

  // req.body.serverpath is undefined here
  // I have set serverPath in the forData object like this
  // formData.append('serverPath', that.newserverpath)

  let dest = destbase+'/'+req.body.serverPath;
  console.log(`Upload of '${path.join(dest, filename)}' started`);
  // the values i set here is stored in the database
  req.body.filename=filename;

  // Create a write stream of the new file
  const fstream = fs.createWriteStream(path.join(dest, filename));
  // Pipe it trough
  file.pipe(fstream);

  // On finish of the upload
  fstream.on('close', () => {
    console.log(`Upload of '${filename}' finished`);
    //res.send(res.data);
    next();
      
  });
});

},new Uploadb(options, app));
// Get our initialized service so that we can register hooks
const service = app.service('uploadb');
service.hooks(hooks);
};

[kimbodker]

Found out i could do it like this:

req.busboy.on('field', (fieldname, value,boolval) =>
{
req.body[fieldname]=value;

});

[suleimanas]

:) Yes that's what I love about feathers more flexible than others
Good luck