CODEWITHSUNDEEP
javascriptreactjsuploadcare
maxfowler
maxfowler

Reputation: 1288

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

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

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.

Upvotes: 0

Views: 825

Answers (2)

claireablani
claireablani

Reputation: 8204

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);

Upvotes: 0

ZekeDroid
ZekeDroid

Reputation: 7209

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';

Upvotes: 1

Related Questions