# Google Image Search plugin

**URL:** <https://community.transloadit.com/t/google-image-search-plugin/16363>\
**Category:** Uppy\
**Created:** [December 5, 2022, 3:06pm UTC](https://community.transloadit.com/t/google-image-search-plugin/16363 "2022-12-05T15:06:29Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![n1c](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/n1c/32/723_2.png) [@n1c](https://community.transloadit.com/u/n1c)\
**Post date:** [December 5, 2022, 3:06pm UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/1 "2022-12-05T15:06:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [December 5, 2022, 3:22pm UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/2 "2022-12-05T15:22:02Z")

</div>

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](https://uppy.io/docs/companion/#Adding-custom-providers) for Companion. The docs there list how to show a list or how to download a specific file.

---

<div class="post-metadata">

**Author:** ![n1c](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/n1c/32/723_2.png) [@n1c](https://community.transloadit.com/u/n1c)\
**Post date:** [December 5, 2022, 4:56pm UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/3 "2022-12-05T16:56:05Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [December 5, 2022, 5:06pm UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/4 "2022-12-05T17:06:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![n1c](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/n1c/32/723_2.png) [@n1c](https://community.transloadit.com/u/n1c)\
**Post date:** [December 6, 2022, 2:11pm UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/5 "2022-12-06T14:11:47Z")

</div>

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](https://github.com/transloadit/uppy/tree/main/examples/custom-provider/server)

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

I get:

```auto
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:

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

```

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

---

<div class="post-metadata">

**Author:** ![mifi](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/mifi/32/603_2.png) [@mifi](https://community.transloadit.com/u/mifi)\
**Post date:** [December 12, 2022, 9:57am UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/6 "2022-12-12T09:57:43Z")

</div>

Hi. How did you add your custom provider? could you share some code?  
Did you follow the steps from this page [Companion — Uppy](https://uppy.io/docs/companion/#Adding-custom-providers) and add this code?

```nohighlight
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)

```

---

<div class="post-metadata">

**Author:** ![n1c](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/n1c/32/723_2.png) [@n1c](https://community.transloadit.com/u/n1c)\
**Post date:** [December 14, 2022, 8:31am UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/7 "2022-12-14T08:31:05Z")

</div>

Hi there! I tried adding it just like that. I made a little repo here: [GitHub - n1c/uppy-companion-mvp](https://github.com/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](http://127.0.0.1:3020/search/myunsplash/list?q=123)

But I get the errors mentioned previously.

---

<div class="post-metadata">

**Author:** ![n1c](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/n1c/32/723_2.png) [@n1c](https://community.transloadit.com/u/n1c)\
**Post date:** [January 4, 2023, 7:38am UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/8 "2023-01-04T07:38:15Z")

</div>

Happy New Year!

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

Thanks in advance 🙏

---

<div class="post-metadata">

**Author:** ![mifi](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/mifi/32/603_2.png) [@mifi](https://community.transloadit.com/u/mifi)\
**Post date:** [January 5, 2023, 3:35pm UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/9 "2023-01-05T15:35:24Z")

</div>

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](https://github.com/transloadit/uppy/blob/main/examples/custom-provider/server/index.cjs) 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.

---

<div class="post-metadata">

**Author:** ![n1c](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/n1c/32/723_2.png) [@n1c](https://community.transloadit.com/u/n1c)\
**Post date:** [January 6, 2023, 6:51am UTC](https://community.transloadit.com/t/google-image-search-plugin/16363/10 "2023-01-06T06:51:54Z")

</div>

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 😃