Documantation needed for Remote Sources

Uppy
1

Hello there,

I have a problem with remote sources. Before I was housing just drag & drop. Now I want to use remoteSources either but I couldn’t find any step-by-step guidance. I read the documentation, I followed the steps but I stuck on the companion step. Do you have any working examples for remote sources? I think I am also struggling to understand the logic of your system. I hope you can help me.

I have a basic skeleton for drag and drop. I imported RemoteSources into js file and used it. now I can see icons on the front end and when I click other want to upload images from Facebook and Google Drive. I have keys and secrets. I have a node server. then the rest is missing…

2

Hi, did you see the note in the docs?

Remote Sources requires Dashboard and automatically installs all its plugins to it.

You are trying to use it with Drag & Drop plugin. Can you try switching?

3

Hello Merlijn,

I solved it thanks a lot. but now I have one more problem. when I click on any option I get " GET http://companion.example.com:3020/drive/list/root 401 (Unauthorized) fetchWithNetworkError.js:12 " error on the console. I didn’t understand how can I sent a key or secret from Uppy to Companion. How can I catch that key and secret in the Companion? or is the 401 error about that?

4

You don’t sent a secret from Uppy (then it also wouldn’t be a secret :slight_smile:) but you configure Companion with your secrets. You need to go through the approval process of all providers you want to use and add your key/secret to Companion.

All Companion plugins have docs for how to get started. For example:

If you signup for Transloadit, we give you temporary credentials so you don’t have to wait for the approval of yours to go live.

5

I already signup for a test.
Maybe I explained myself in the wrong way. I installed Companion on my nodeJs server. I get my keys from Google and Facebook. I used them in providerOptions. In the Dashboard, When I click Google or Facebook, for instance, It gives that error on the console. I mean on “Sign in with Google” before the redirecting page.

6

In that case please share all your integration code as there is not enough information to help.

7

here is my server.js file for companion, just removed the keys and secrets.

import express from 'express';
import bodyParser from 'body-parser';
import session from 'express-session';
import fetch from 'node-fetch';
import companion from '@uppy/companion';
const app = express()

app.use(bodyParser.json())
app.use(session({
  secret: 'some-secret',
  resave: true,
  saveUninitialized: true,
}))

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*')
  next()
})

// Routes
app.get('/', (req, res) => {
  res.setHeader('Content-Type', 'text/plain')
  res.send('Welcome to Companion')
})

// initialize uppy
const companionOptions = {
  providerOptions: {
    drive: {
      key: 'GOOGLE_DRIVE_KEY',
      secret: 'GOOGLE_DRIVE_SECRET',
    },
    facebook: {
			key: 'Facebook API key',
			secret: 'Facebook API secret',
    },
    // you can also add options for additional providers here
  },
  server: {
    host: 'localhost:3020',
    protocol: 'http',
  },
  filePath: './uploads',
  secret: 'some-secret',
  debug: true,
}

const { app: companionApp } = companion.app(companionOptions)
app.use(companionApp)

// handle 404
app.use((req, res) => {
  return res.status(404).json({ message: 'Not Found' })
})

// handle server errors
app.use((err, req, res) => {
  console.error('\x1b[31m', err.stack, '\x1b[0m')
  res.status(err.status || 500).json({ message: err.message, error: err })
})

companion.socket(app.listen(3020))

console.log('Welcome to Companion!')
console.log(`Listening on http://0.0.0.0:${3020}`)```
8

Code looks okay. Are you sure you have setup your Google Drive app correctly? 401 indicates Companion successfully attempted to get something but wasn’t allowed, making me think it’s your app settings.

9

Thank you, Do you think that can be about the Uppy? Because I am sure that keys and secrets are correct. But If there is any specific setting to check I can control it.
here is my uppy app:

import Uppy from '../node_modules/@uppy/core'
import Dashboard from '../node_modules/@uppy/dashboard'
import Webcam from '../node_modules/@uppy/webcam'
import RemoteSources from '@uppy/remote-sources';
import '../node_modules/@uppy/core/dist/style.css'
import '../node_modules/@uppy/dashboard/dist/style.css'
import '../node_modules/@uppy/webcam/dist/style.min.css'


const uppy = new Uppy({
  id: 'uppy',
  autoProceed: true,
  allowMultipleUploadBatches: true,
  debug: false,
  locale: lang,
  restrictions: {
    allowedFileTypes: allowedfiletypes,
    maxFileSize: null,
    minFileSize: null,
    maxTotalFileSize: null,
    maxNumberOfFiles: maximages,
    minNumberOfFiles: minimages,
    requiredMetaFields: []
  }
})

.use(Dashboard, {
    inline: true,
    width: "100%",
    height: "100%",
    doneButtonHandler: () => {
      //this.uppy.cancelAll()
      openEditor()
    },
    proudlyDisplayPoweredByUppy: false,
    target: '#imgupload',
    thumbnailWidth: 120,
    showProgressDetails: true,
    note: tekst1 + allowedfiletypes.join(" "),
    waitForThumbnailsBeforeUpload: false,
    locale: {
      strings: {
        dropPasteFiles: ` ${tekst3}
        %{browseFiles}`,
        browseFiles:` ${tekst4} `,
      }
    }  
  })
.use(Webcam)
.use(RemoteSources, {
	companionUrl: "http://companion.example.com:3020",
	sources: ['Instagram', 'GoogleDrive', 'Unsplash', 'Box', 'Dropbox', 'Facebook', 'OneDrive', 'Zoom', 'Url'],
})