How can I import uploadcare into a react.js project?

Question

My imports section looks like this

    // main imports
    import React from 'react';
    import {render} from 'react-dom';
    import { Router, Route, hashHistory } from 'react-router'
    import jQuery from '../scripts/jquery-1.8.3.min.js'
    import uploadcare from '../lib/uploadcare.min.js'

And then I would like to use uploadcare like this (via the javascript API):

onAddPhotosClick: function() {
    console.log("++ add photos");
    uploadcare.openDialog(null, {
        publicKey: "xxxxxxxxxxxx",
        imagesOnly: true,
        tabs: "file url facebook gdrive dropbox instagram evernote flickr skydrive"
    });
},

My code reaches the openDialog line, and then throws this error:

:8081/static/react_build/bundle.js:86 Uncaught TypeError: _uploadcareMin2.default.openDialog is not a function

Earlier, during the page load, my console logs:

Global public key not set. Uploads may not work!
Add this to the <head> tag to set your key:

<script>
UPLOADCARE_PUBLIC_KEY = 'your_public_key';
</script>
:8081/static/react_build/bundle.js:85 ++ add photos

The fact that I get this brown warning message above (which I am ok with because I am hoping to set the public key directly through the javascript API) makes me think that uploadcare.js file has been included properly, but the uploadCareMin2 error makes me think that I am not importing it quite correctly.

TL;DR; How can I import the uploadcare Javascript API into a react.js project?

Thank you for any help.

Please note what we've added CommonJS compatibility only in [2.8.0 version](https://github.com/uploadcare/uploadcare-widget/blob/master/HISTORY.markdown#280-14032016). I'm not sure how React works, but we populate `module.exports` if it is present (not `window.uploadcare`). — homm, Apr 14 '16 at 10:48

score 1 · Accepted Answer · answered Apr 13 '16 at 22:24

Not sure what uploadcare is but try

import '../lib/uploadcare.min.js'

It looks like you're importing the file directly meaning you would have to hope the author exported the file as export default in order to import it the way you showed. It's likely they just stick it in global space.

If not, it's also possible they exported a named value so try:

import { uploadcare } from '../lib/uploadcare.min.js';

score 0 · Answer 2 · answered Nov 14 '16 at 08:07

0

You can now also use npm install as documented on uploadcare's website:

NPM
npm install uploadcare-widget

ES6 usage way:
import uploadcare from 'uploadcare-widget';

CommonJS usage way:
var uploadcare = require('uploadcare-widget);

answered Nov 14 '16 at 08:07

claireablani

7,804
5
16
19

How can I import uploadcare into a react.js project?

2 Answers2