Issue with icon when using custom provider

[serverdevil]

I'm trying to build a custom provider. Have ironed out a lot of shit (mainly because the provider is not available in purest, so ended up plugging in passport.js that we already use) looking at how you guys implemented the Google Drive provider.

My plugin icon won't show. I have the SVG code set via same way as in Google Drive provider. But there is problem rendering it. I'm sure this not a bug and something to do with my project compilation. Sorry, new to the nodejs world and JSX.

JSX doesn't seem to be compiling (I don't know how else to say this)?

NOTE: I haven't developed this custom provider in isolation and it currently sits pretty within my project code.

[arturi]

Hi! Could you please share some code, where is that icon you are trying to display? What’s your babel config like, we have

uppy/.babelrc

Line 11 in 7ed10a1

["transform-react-jsx", { "pragma":"h" }]

for JSX.

[serverdevil]

Thanks @arturi
I ended up using transformed react jsx code based on what the Google Drive plugin was showing me. We have a roadhog based build that I still haven't got my head around to understanding.

I changed as follows and the icon renders fine

this.icon = () => (
   <svg aria-hidden="true" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
     ...
   </svg>
 );

to

this.icon = () => h(
   'svg',
   { 'aria-hidden': 'true', width: '48px', height: '48px', viewBox: '0 0 48 48', version: '1.1' },
   h(
     'g',
     { 'fill-rule': 'evenodd' },
     h('path', { ... }),
   )
);

I'll try to see if your babel suggestion works, but the project is very large and i'm not sure if doing that would break something elsewhere. I intend to package the custom provider (its for OneDrive, i noticed that I failed to state that earlier) separately soon.

Any suggestion on how I can go about it? Would I have 2 separate projects (one for client and another for companion)?

[arturi]

Any suggestion on how I can go about it? Would I have 2 separate projects (one for client and another for companion)?

Yeah, you’d need a separate plugin for Uppy Client (you can use excising Google Drive or Instagram as an example, as you are already doing) and a module for Companion, as described in docs here: https://uppy.io/docs/companion/#Adding-custom-providers.

[arturi]

This might also be relevant to the icon issue: https://uppy.io/docs/writing-plugins/#JSX

[kvz]

Hi there, did the Babel suggestion work? And did I understand correctly you have a OneDrive plugin in the works? We'd love to check it out if you think it's in an ok state to share!

[serverdevil]

Just tried out switching to preact, as Artur suggested, works and I'm able to use JSX normally. Switching to this babel configuration in my project might not be feasible but I'm outlining what needs to be done to use it with Uppy.

Step 1: Add ["transform-react-jsx", { "pragma":"h" }] to your .babelrc
Step 2: Add /** @jsx h */ to your provider plugin file
Step 3: Import preact. E.g. import { h } from 'preact'; or const { h } = require('preact')
Step 4: Use normal JSX to specify an icon. E.g.

this.icon = () => (
      <svg aria-hidden="true" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
        <g fill-rule="evenodd">
          <path fill="#1565C0" d="M40.429,35.999c0,0,2.89-0.393,3.47-3.185C43.964,32.502,44,32.161,44,31.787  c0-0.233-0.015-0.454-0.044-0.665c-0.428-3.158-3.852-3.868-3.852-3.868s0.595-3.401-2.543-5.183c-3.138-1.78-6.005,0-6.005,0  s-1.678-3.401-6.222-3.401c-5.843,0-6.817,6.64-6.817,6.64S13,25.636,13,30.493C13,35.352,18.031,36,18.031,36L40.429,35.999  L40.429,35.999z" />
          <path fill="#1565C0" d="M11,30.493c0-4.395,3.286-6.319,5.875-6.945c0.898-2.954,3.384-6.878,8.46-6.878  c0.006,0,0.011,0.001,0.017,0.001c0.007,0,0.013-0.001,0.02-0.001c3.522,0,5.71,1.646,6.892,2.953  c0.65-0.191,1.448-0.343,2.347-0.343c0.004,0,0.007,0.001,0.011,0.001c0.003,0,0.006,0,0.01,0c0.02,0,0.039,0.004,0.059,0.004  C34.729,19,34.063,12,26.013,12c-5.503,0-7.446,4.691-7.446,4.691s-3.992-2.965-8.092,1.133c-2.105,2.104-1.619,5.338-1.619,5.338  S4,23.648,4,28.825C4.001,33.515,9.018,34,9.018,34h2.807C11.32,33.041,11,31.886,11,30.493z" />
        </g>
      </svg>
    );

The OneDrive plugin is working although it is only for proof of concept and uses the following library onedrive-api and passport-js that is already integrated into our project.
The onedrive-api library seems very bare-bones and I haven't resolved rendering thumbnails for it in Uppy. Might have to contribute certain things to this too.

I'd like to share but it is currently part of our project. I have it on my agenda to package it separately and make it available to you.

[kvz]

That would be amazing @serverdevil, looking forward! And thank you for sharing how you worked around this problem, I'm sure it'll help other people searching and stumbling upon this thread!