2016-04-13 10 views
0

Как импортировать uploadcare в проект react.js?Как импортировать uploadcare в проект react.js?

Мой импорт раздел выглядит следующим образом

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

И тогда я хотел бы использовать uploadcare как это (через 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" 
    }); 
}, 

Мой код достигает линии OpenDialog, а затем эта ошибка:

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

Раньше во время загрузки страницы мои журналы в консоли:

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 

Тот факт, что я получаю эту коричневую предупреждение выше (что я в порядке с, потому что я надеюсь установить открытый ключ непосредственно через JavaScript API) заставляет меня думать, что uploadcare.js файл был правильно, но ошибка uploadCareMin2 заставляет меня думать, что я не импортирую ее совершенно правильно.

TL; DR; Как я могу импортировать API Javascript для загрузки в проект react.js?

Благодарим за помощь.

+0

Пожалуйста, обратите внимание, что мы добавили Совместимость с CommonJS только в версии [2.8.0] (https://github.com/uploadcare/uploadcare-widget/blob/master/HISTORY.markdown#280-14032016). Я не уверен, как работает React, но мы заполняем 'module.exports', если он присутствует (не' window.uploadcare'). – homm

ответ

1

Не уверен, что uploadcare будет, но попробовать

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

Похоже, вы импортируете файл непосредственно означает, что вы должны надеяться, что автор экспортировал файл как export default для того, чтобы импортировать его так, как вы показали , Скорее всего, они просто придерживаются его в глобальном пространстве.

Если нет, то это также возможно, что они экспортируются поименованный значение так попробовать:

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

omg спасибо, первое важное заявление сработало! – maxfowler

0

Теперь Вы можете также использовать НПМ установить как документировано на uploadcare's website:

NPM 
npm install uploadcare-widget 

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

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