CODEWITHSUNDEEP
javascriptimagereactjsuploadcare
Arslan Tariq
Arslan Tariq

Reputation: 2528

uploadcare is undefined in reactjs app

I am trying to use uploadcare for my reactjs application to store images. But I am unable to make it work. I have followed the documentation but I'm getting an error "Uncaught TypeError: Cannot read property 'tabs' of undefined at Object.u.openDialog (uploadcare.min.js:24)". Although I have npm installed uploadcare-widget and importing it in my file but it doesn't work. Here is the relevant code:

First I am adding script tag in the index.html like this:

<script>
  UPLOADCARE_PUBLIC_KEY = "demopublickey";
</script>

Then in my component I'm doing this:

import uploadcare  from 'uploadcare-widget';

class ImageComponent extends React.Component {
  componentDidMount() {
    uploadcare.start({publicKey: 'demopublickey'})
  }

  addImage(e) {
    uploadcare.openDialog(null, {
      imagesOnly: true,
      multiple: false,
    }).done((file) => {
      file.promise().done((fileInfo) => {
        console.log(fileInfo.cdn)
      })
    })
  }

  render () {
    const imageInput = (
      <div className='image-box'>
        <Button onClick={this.addImage}>Add Image</Button>
      </div>
    )

    return (
      <div>
        { this.state.imgSrc && this.renderImageView() }
        { !this.state.imgSrc && imageInput }
      </div>
    )
  }
}

I am stuck on this for a very long time now. Please help!

Upvotes: 2

Views: 477

Answers (3)

Zmoki
Zmoki

Reputation: 71

You probably use the 3.0.0 version. In this version there is an error in openDialog. Reported in the issue on github.

Temporary solution: set up second parameter (tab) and add tabs property for third parameter (settings), see docs,

uploadcare.openDialog(null, 'file', {
  tabs: 'all',
  imagesOnly: true,
  multiple: false,
}).done((file) => {
  file.promise().done((fileInfo) => {
    console.log(fileInfo.cdn)
  })
})

Today I'll release new version of widget with fix of this bug. You'll can update and remove the temporary solution.

Upvotes: 2

headphones
headphones

Reputation: 81

You are missing the second parameter, as specified here in the docs: https://uploadcare.com/documentation/javascript_api/#dialog

uploadcare.openDialog(null, 'file', {
              publicKey: 'your_key',
              imagesOnly: true,
              tabs: ['file', 'url'],
            }).done((file) => {
              file.done((fileInfo) => {
                console.log('UPLOADED: ' + fileInfo.cdnUrl);
              });
            });

Upvotes: 1

pirs
pirs

Reputation: 2463

If i trust this repository https://github.com/uploadcare/uploadcare-widget-react-demo, you should put tabs:"all" in the start function.

uploadcare.start({
  publicKey: "demopublickey",
  tabs: "all"
});

Upvotes: 0

Related Questions