Client hangs when uploading

Using for Client: Angular 7.1.3 (latest at this time) and imported {Dashboard, Webcam, XHRUpload, DefaultStore, Tus} from ‘uppy’;

Using for Server: Expressjs 4.16.4 @uppy/companion": “^0.16.0”, // tus-node-server": “^0.3.2”

1. I am trying using XHRUpload on angular, and can communicate with my server. However, when I check the network tab in Chrome tools, I get 2 ‘uploads’ under the name tab:

My configuration in angular is:

this.uppy.use(XHRUpload, {
      id: 'XHRUpload',
      endpoint: 'http://localhost:1080/uploads',
      method: 'post',
      formData: true,
      metaFields: null,
      /*headers: {
        contentType: 'image/png'
      }*/
});

My upload begins and hangs on the client. I believe the client is configured properly (see Angular config code on top). I select an image, click on upload, and the upload hangs (at 71%) up to the timeout. The test image file is 1.2Mb (2nd reference pic on the top).

I tried adding headers (according to your docs). But I believe the issue is server side. I setup a basic expressjs test server for uppy, and it loads up. But I can never see when a file is incoming. I copied the code from the companion site. I tried many, many different ways to get things working (including using Tus from Angular:

/*this.uppy.use(Tus, {
      endpoint: 'http://localhost:1080/'
    });*/

) and the tus_node_server. I did manage to get 0 byte cryptically named files though (but I think I was using tus-node-server). But lets stick to XHRUpload for now.

My server at the moment of typing this looks like this:

const express = require('express');
// const tus = require('tus-node-server');
const companion = require('@uppy/companion');
const cors = require('cors');

const app = express();
/*server.datastore = new tus.FileStore({
  path: 'uploads/files'
});
server.on(EVENTS.EVENT_UPLOAD_COMPLETE, (event) => {
  console.log(`Upload complete for file ${event.file.id}`);
});*/

app.use(cors());
app.use((req, res, next) => { // not sure this in necessary or in the right place.
  res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*')
  res.setHeader(
    'Access-Control-Allow-Methods',
    'GET, POST, OPTIONS, PUT, PATCH, DELETE'
  );
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Authorization, Origin, Content-Type, Accept'
  );
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  next();
});
// Routes
app.get('/', (req, res) => {
  res.setHeader('Content-Type', 'text/plain');
  res.send('Welcome to Companion');
});
app.post('/uploads', (req, res) => {
  /* Because I am posting an image.  I have checked the request for a files property on previous 
     attempt.  I don't know what to check for here, or even if app.post is necessary.
  */
  res.status(200);
});

const options = {
  server: {
    host: 'http://localhost:1080',
    protocol: 'http',
  },
  filePath: '/uploads/files', // tried including http://localhost:1080/uploads/files and other combos
  debug: true
};
app.use(companion.app(options));
const host = '127.0.0.1';
const port = 1080;
app.listen(port, () => console.log('Example app listening on port ', host', ':', port, '!'));

I am liking uppy a lot, and feel like I am close to finding the solution, but google has helped a bit, but not enough. I checked the community site, and gained a bit more knowledge, but nothing to fully fix my problem. I don’t know if my routes are off, or if I need more configuration in the options.

Excuse the long post. If there are any more details you need, please ask.

[goto-bus-stop]

There may be a misunderstanding of Uppy Companion here—you don’t upload files to it, instead it’s a tool that downloads files from third party services like Dropbox and then uploads them to your server. This was a major cause of confusion in the past and we’ve improved our messaging a bit but clearly it’s still not perfect 😄 The filePath argument is used for temporary storage while it’s still downloading things.

The upload to your own server has to be implemented separately. You’ve already got the POST /uploads route—that is the correct way to go for XHRUpload, but you still need to implement the multipart handling. With express you can use multer to do that (use the multer().single() version of the API). Basically, the upload should be implemented as if Companion isn’t there at all. Companion aims to be transparent. If it works without Companion, it should work by tacking on a Companion server and some remote provider plugins on the client without further changes.

(You’re seeing 2 ‘uploads’ because of CORS preflight. The second request is the real upload request.)

[Shoroh]

@goto-bus-stop

Is there a way to disable CORS preflight at all? I don’t need it, and my server doesn’t support it.