Google Image Search plugin

Uppy
1

Hi all!

I’m trying to build out a plugin to use Google Image Search as an external source (like with Unsplash). I’ve been fiddling around and can’t quite seem to get it working and don’t really understand where I’m going wrong.

I have a small backend service that lets me do the searching via Google’s Search API. But don’t understand how I should be taking the selected file (from the search view) and sending that information correctly up to Transloadit.

It seems as though if I use a custom backend to do the searching (a “companion” in the nomenclature) then I won’t be able to use a different companion for the upload of the selected image url? (similar to how the Url plugin does it.

Any help here would be greatly appreciated!

Thanks,
Nic

2

Hi, I think it’s best to fork the @uppy/unsplash plugin as a starting point for the client. Then I recommend making a custom provider for Companion. The docs there list how to show a list or how to download a specific file.

3

Thanks for the quick reply!

I think where I’m coming unstuck is that I’m using Transloadit as my hosted-companion so I couldn’t figure out how take my selected image and then have it be uploaded to Transloadit etc.

Is there no way to make that happen and I have to use a custom-hosted-companion & custom-plugin?

4

Any uploader plugin, so @uppy/transloadit as well, will send meta data to Companion when requesting a remote file so Companion knows which uploader to use in its server to be able to use the same destination as local files. This makes it possible to just use XHR, Tus, or AWS S3 and it will end up in the same destination if you add Companion in the mix. Since @uppy/transloadit uses @uppy/tus under the hood, it should still end up in Transloadit, even with your own Companion.

It’s not possible to add a custom provider to hosted Companion, you do need self-hosting for this.

5

Ok digging in to how to host my own Companion & custom-provider. I’m getting an exception I don’t understand… taking the example at uppy/examples/custom-provider/server at main · transloadit/uppy · GitHub

If I run this and visit an example “search list” url such as http://localhost:3020/search/myunsplash/list?q=123

I get:

TypeError: Cannot read properties of undefined (reading 'list')
    at /Users/nic/projects/companion-mvp/node_modules/@uppy/companion/lib/server/controllers/list.js:15:51
    at Generator.next (<anonymous>)
    at /Users/nic/projects/companion-mvp/node_modules/@uppy/companion/lib/server/controllers/list.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/nic/projects/companion-mvp/node_modules/@uppy/companion/lib/server/controllers/list.js:3:12)
    at list (/Users/nic/projects/companion-mvp/node_modules/@uppy/companion/lib/server/controllers/list.js:12:12)
    at Layer.handle [as handle_request] (/Users/nic/projects/companion-mvp/node_modules/@uppy/companion/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/nic/projects/companion-mvp/node_modules/@uppy/companion/node_modules/express/lib/router/route.js:144:13)
    at exports.loadSearchProviderToken (/Users/nic/projects/companion-mvp/node_modules/@uppy/companion/lib/server/middlewares.js:68:5)
    at Layer.handle [as handle_request] (/Users/nic/projects/companion-mvp/node_modules/@uppy/companion/node_modules/express/lib/router/layer.js:95:5)

Note I had to add some extra config for it to work:

const uppyOptions = {
  providerOptions: {
    myunsplash: {
      key: 1,
    },

As without this config the custom provider doesn’t get properly loaded.

6

Hi. How did you add your custom provider? could you share some code?
Did you follow the steps from this page Companion — Uppy and add this code?

import providerModule from './path/to/provider/module'

const options = {
  customProviders: {
    myprovidername: {
      config: {
        authorize_url: 'https://mywebsite.com/authorize',
        access_url: 'https://mywebsite.com/token',
        oauth: 2,
        key: '***',
        secret: '***',
        scope: ['read', 'write'],
      },
      module: providerModule,
    },
  },
}

uppy.app(options)
7

Hi there! I tried adding it just like that. I made a little repo here: GitHub - n1c/uppy-companion-mvp

My expectation is when running it I should be able to hit http://127.0.0.1:3020/search/myunsplash/list?q=123

But I get the errors mentioned previously.

8

Happy New Year!

Following up on this - would it be possible to get any guidance?

Thanks in advance :pray:

9

Hi and happy new year! Actually looking at the code I can see that Unsplash is actually a Search Provider. Search Providers are different from other providers in that they don’t require auth. Unsplash is currently the only Search Provider available, and unfortunately currently it’s not possible to create custom Search Providers, only custom normal Providers. So I think it’s a bit confusing that our example custom provider code is based on Unsplash, because that doesn’t make any sense to me. I’m not sure which provider you want to implement, but as it stands now you need to implement one of the traditional Authenticated Providers similar to google drive, Dropbox etc. This also means that the URL will be http://127.0.0.1:3020/myunsplash/list?q=123

The Uppy team will consider whether it makes sense to also allow customizing Search Providers.

10

Ah that’s a pity.

I was trying to implement a custom search provider that would utilise Google Image Search.

Thanks for the response & help! Unsplash being the example for a custom provider was indeed confusing in my case where it was the search part I wanted to replicate :smiley: