Global public key not set

[Yaroslav Perets]

Hi!

I use this library with gatsby, I added UPLOADCARE_PUBLIC_KEY using react-helmet

And I got this warning:

What am I doing wrong?

[Aleksandr Grenishin]

Hi Yaroslav! Thanks for report.

Please make sure that uploadcare.min.js script is loaded after the script with public key.

<script>UPLOADCARE_PUBLIC_KEY = 'demopublickey';</script>
<script charset="utf-8" src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>

I think that something like that should work for you.

<React.Helmet>
  <script>UPLOADCARE_PUBLIC_KEY = 'demopublickey';</script>
  <script charset="utf-8" src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
</React.Helmet>

[Yaroslav Perets]

@nd0ut

I use this official guide, as I understand it, in this case, I shouldn't add uploadcare.min.js to the react-helmet, is this correct?

[Aleksandr Grenishin]

@yaroslav-perec
Sorry for the late response.

You can use the widget in two ways: using script tag or npm package. In the guide you provide it is used through npm package. But I noticed that the warning on your screenshot is caused by script that means that you used the widget through the script tag or both.

Could you provide your code so that I can go deep in it to solve your problem?

[Yaroslav Perets]

@nd0ut

I did not add the script tag manually, I use the widget only through the npm package.

The place where I add my key looks like this:

<Helmet {...some code}>
   <script>UPLOADCARE_PUBLIC_KEY = 'MY_KEY';</script>
</Helmet>

My component:

import React, { Component } from 'react';
import uploadcare from 'uploadcare-widget';
import PropTypes from 'prop-types';

class Uploader extends Component {
  componentDidMount() {
    const widget = uploadcare.Widget(this.uploader);
    const { value, onChange, onUploadComplete } = this.props;

    if (typeof value !== 'undefined') {
      widget.value(value);
    }
    if (typeof onChange === 'function') {
      widget.onChange(files => {
        if (files) {
          this.files = (this.files && this.files.files) ? this.files.files() : [this.files];
        } else {
          this.files = null;
        }

        onChange(files);
      });
    }
    if (typeof onUploadComplete === 'function') {
      widget.onUploadComplete(onUploadComplete);
    }
    widget.onDialogOpen(dialog => { this.dialog = dialog; });
  }

  componentWillUnmount() {
    if (this.dialog) {
      this.dialog.reject();
    }
    if (this.files) {
      uploadcare.jQuery.when.apply(null, this.files).cancel();
    }

    const widgetElement = uploadcare.jQuery(this.uploader).next('.uploadcare--widget');
    const widget = widgetElement.data('uploadcareWidget');

    if (widget && widget.inputElement === this.uploader) {
      widgetElement.remove();
    }
  }

  getInputAttributes() {
    const attributes = Object.assign({}, this.props);

    delete attributes.value;
    delete attributes.onChange;
    delete attributes.onUploadComplete;

    return attributes;
  }

  render() {
    const attributes = this.getInputAttributes();

    return (
      <input
        type="hidden"
        ref={input => { this.uploader = input; }}
        {...attributes}
      />
    );
  }
}

Uploader.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
  onUploadComplete: PropTypes.func
};

Uploader.defaultProps = {
  value: '',
  onChange: () => {
  },
  onUploadComplete: () => {
  }
};

export default Uploader;

[Dmitry Ivakhnenko]

Hi @yaroslav-perec!

In development mode helmet add script asynchronously, and when you import uploadcare, the key is not in head.
Try import uploadcare asynchronously, after helmet work is done
Or use require for import module, and before it add global vars to window directly

[Yaroslav Perets]

Hi @jeetiss!

Thanks for the answer

Or use require for import module, and before it add global vars to window directly

Can you please provide a code example? Because the second part is not quite clear to me.

[Dmitry Ivakhnenko]

https://codesandbox.io/s/5k6lmw7w6l

see files /pages/index.js and /components/widget.js

[Yaroslav Perets]

@jeetiss

Works! Great thanks!