Uppy: Please use the community forum (or paid support) instead

[tomaslgomes]

Hey guys!
I am trying to use uppy in a node(express) project and I am having a bad time trying to use it.

Here is my Companion config:

const optionsCompanion = {
    providerOptions: {
      google: {
        key: process.env.GOOGLE_CLIENT_ID,
        secret: process.env.GOOGLE_SECRET_KEY_CLIENT
      },
      dropbox: {
        key: process.env.DROPBOX_KEY,
        secret: process.env.DROPBOX_SECRET_KEY
      }
    },
    server: {
      host: 'localhost:3020',
      protocol: 'http',
    },
    filePath: './public/upload',
    secret: 'xxxx', //same session secret
  }

app.use(companion.app(optionsCompanion))
var serverUppy = app.listen(3020)
companion.socket(serverUppy, optionsCompanion) 

And here is my uppy client config:

var uppy = Uppy.Core({
  restrictions: { 
    maxFileSize: 52428800,  
    minNumberOfFiles: 1, 
    allowedFileTypes: arrayExtensoes(),
  },
  meta: {
    TamanhoMaxPorDocumento: document.querySelector('#TamanhoMaxPorDocumento').value,
    MaxDocsPorEnvelope: document.querySelector('#MaxDocsPorEnvelope').value,
    latitude: document.querySelector('[name="latitude"]').value,
    longitude: document.querySelector('[name="longitude"]').value,
    browser: document.querySelector('[name="browser"]').value,
    so: document.querySelector('[name="so"]').value,
    ip: document.querySelector('[name="ip"]').value,
    idpasta: document.querySelector('[name="idpasta"]').value,
    repositorio: document.querySelector('[name="repositorio"]').value,
    gerarTags: document.querySelector('[name="gerarTags"]').value,
    descricao: document.querySelector('[name="descricao"]').value,
    nomerepositorio: document.querySelector('[name="nomerepositorio"]').value,
  }
})

uppy.use(Uppy.Dashboard, { 
  target: 'body',
  trigger: '#add-documents',
  closeModalOnClickOutside: true,
  closeAfterFinish: true,
  showProgressDetails: true,
  height: 300,
  locale: Uppy.locales.pt_BR,
  proudlyDisplayPoweredByUppy: false,
  showRemoveButtonAfterComplete: false,
  browserBackButtonClose: true
})
.use(Uppy.GoogleDrive, {
  target: Uppy.Dashboard,
  companionUrl: 'http://localhost:3020', 
  companionHeaders: {
    "Acess-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "OPTIONS, GET, POST, PATCH, PUT",
    "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization, Extra-Data"
  }
}) 
.use(Uppy.Dropbox, { 
  target: Uppy.Dashboard, 
  companionUrl: 'http://localhost:3020', 
  companionHeaders: {
    "Acess-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "OPTIONS, GET, POST, PATCH, PUT",
    "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization, Extra-Data"
  }
})
.use(Uppy.XHRUpload, {
  method: 'post',
  endpoint: 'http://localhost:3000/envelopes', 
  formData: true,
  fieldName: 'files',
  headers: {
    "Acess-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "OPTIONS, GET, POST, PATCH, PUT",
    "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization, Extra-Data"
  }
})

I am trying to send some input hidden (you can see those inputs in meta) with XHRUpload, but I am having a lot of troubles. I can't find the inputs values in my controller when debugging my request variable.
The other problems was solved with this line: app.use(bodyParser.json({ type: ['application/json', 'text/plain'] })), app.use(cors() and app.options('*', cors()).
But I am still having some troubles with cors policy.
The upload seems to work as you can see here in companion log:

companion: 2020-08-05T19:30:12.418Z [debug] 009bbf7a uploader.upload.progress 1102331 1102331 100.00%
But after i got this error: companion: 2020-08-05T19:30:12.428Z [error] upload.multipart.error upload failed with status: 400
````

And in console i got this errors: 

Access to fetch at 'http://localhost:3020/drive/list/root' from origin 'http://localhost:3000' has been blocked by CORS policy: Method OPTIONS is not allowed by Access-Control-Allow-Methods in preflight response.
RequestClient.js:1 OPTIONS http://localhost:3020/drive/list/root net::ERR_FAILED.
Access to fetch at 'http://localhost:3020/drive/get/1zz-IOdBjEZyvX2_Z_rd6sx1YPeBZ7f-a' from origin 'http://localhost:3000' has been blocked by CORS policy: Method OPTIONS is not allowed by Access-Control-Allow-Methods in preflight response.
OPTIONS http://localhost:3020/drive/get/1zz-IOdBjEZyvX2_Z_rd6sx1YPeBZ7f-a net::ERR_FAILED.
[Uppy] [16:18:37] Failed to upload Assinatura Tomás.jpg Bad Request.
```
I was trying using Form too, but when an input hidden with the file was attached in my

the data value of file was a blank object, and when i submit the form i was not able to save the file in database.

I also would like to know how to send a array of files to my endpoint, because my users should be able to select multiples files. At the moment when i select multiple files only the last one is sent to my controller.

I would love any help.
Thanks

Tomás Loureiro Gomes

[goto-bus-stop]

Access-Control-* headers must be added on the server, not the client. Configuring them as companionHeaders on the client doesn't do anything.

app.use(cors())
app.options('*', cors())

but ^ like what you're already doing, should work on the server-side i think…

With XHRUpload, you need to support multipart/form-data in the upload endpoint. That requires a specialised module. A popular one is multer: https://www.npmjs.com/package/multer

[tomaslgomes]

Hey, thank you for the reply.
I am using multer as you can see below:

In my controller I have:

const multer = require("multer")
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

router.post("/", upload.array('files'), async (req, res) => {
//saving files and other data to my database
}

I have set companion to port 3020 while my app is running in 3000 because I was not being able to use in port 3000 too. It was showing some websocket errors. I'm kinda lost trying to use Uppy.
I think documentation should be more clear.
I would love to use Uppy cause is easy configurable and pretty. But this errors without fix is terrible.
Anyways, thanks for the helping.

Tomás

[tomaslgomes]

Hey, I fixed. It was a problem in sending meta fields to my controller.
Thank you very much for your attention.
Bye!

Tomás

[goto-bus-stop]

great, thanks for the update :)