Custom Provider: first attempt

[Alagaesia93]

Hey guys,

I have a Rails app with OAuth2 up and running. I'm trying to create my own custom provider, but I'm not so good in js develpment.

Here you say to add let options = {...} uppy.app(options)

Where should I add that code? I tried in src/uppy.js, with module defined in src/server/provider, but there are undefined errors.

So I tried to find every Dropbox word and add with sense MyProvider, but still does not work. The error client side is

Uncaught TypeError: Expected a plugin class, but got undefined. Please verify that the plugin was imported and spelled correctly.

In my client side code should I use .use(Uppy.MyProvider, {target: Uppy.Dashboard, host: 'http://localhost:3020'}) ?

Thank you!

[ifedapoolarewaju]

@Alagaesia93 I understand this might be a bit a bit of a bumpy ride considering the documentation might require some iterations. I am going to create a PoC example and share it here with you.

[ifedapoolarewaju]

@Alagaesia93 I added a PoC example here https://github.com/transloadit/uppy/tree/master/examples/custom-provider

Please let me know if you still have challenges with this

[Alagaesia93]

I have been playing around all this afternoon, here are my questions!

• client code gives me an error: ERROR in ./app/javascript/packs/MyCustomProvider.js Module not found: Error: Can't resolve 'uppy/lib/server' in '/Users//Desktop/development//app/javascript/packs' @ ./app/javascript/packs/MyCustomProvider.js 11:15-41. Cut and paste code.

• should I npm install uppy-server on my client?

• server code must be put on my localhost:3020? which folder? I put it with drive etc, and require("./server/provider/MyCustomProvider.js")

Thank you for your help!

[ifedapoolarewaju]

Hmm, for the first issue, I think we might need the next uppy release to fix this. It works on the dev env but it hasn't been released yet.

For the second question, no you don't need to install uppy-server on the client. But you need to extend uppy-server on your own node express project, where you'd add the server part of your custom provider. Just like this one which I added to the example.

which folder? I put it with drive etc, and require("./server/provider/MyCustomProvider.js")

For the 3rd question, you can either go with my suggestion above ☝️ Or if you instead cloned the uppy-server repo then yes, you can continue with the way you currently have it.

If any of these answers aren't clear, please let me know 😉

[Alagaesia93]

Works like a charm,

thank you!

https://media1.tenor.com/images/2601727303fa5726e90b3b62dbd27fa6/tenor.gif?itemid=5841761

[Alagaesia93]

Hey @ifedapoolarewaju, I'm back. I know you missed me :-D

Sorry for bothering you again, but it's still not working as I wish. Spoiler, again: I don't know node, so maybe it's a noob problem.

I tried two approaches, none of them works as requested. I have a Rails app with doorkeeper up and working on port 3452.

First approach: as you did. I copied and pasted your client folder in my javascript folder. Then I cloned uppy-server, added in /server/providers your file server/customprovider.js. Then I edited standalone/helper.js to include custom provider options. Run it, does not work because I miss this

app.get('/oauth/authorize', (req, res) => {
  // skips the default oauth process.
  // ideally this endpoint should handle the actual oauth process
  res.redirect(`http://localhost:3020/mycustomprovider/callback?state=${req.query.state}&access_token=randombytes`)
})

Added. Now it works and prompts the three files as requested. Problems: where should I redirect to oauth2 permissions? Will I have cookies to make authenticated requests to my server?

Second attempt. I wanted to dig more in your excellent code and tried to add mycustomprovider as a native provider (like insta, drive and dropbox). It returns a grant error error=grant:missing session or misconfigured provider

The problem is here because that variable is undefined. I added in grant js this

customprovider: {
    authorize_url: 'http://localhost:3452/oauth/authorize',
    access_url: 'http://localhost:3452/oauth/authorize',
    callback: '/customprovider/callback'
}

I have been digging for a couple of hours, with no results. Could you explain me what is wrong? Which of the two solutions is better?

Thank you very much in advance!