maximusfowler maximusfowler - 23 days ago 7
React JSX Question

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.

Answer

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