2016-04-13 3 views
0

Wie kann ich uploadcare in ein react.js-Projekt importieren?Wie kann ich uploadcare in ein react.js-Projekt importieren?

sieht Mein Einfuhren Abschnitt wie diese

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

Und dann würde Ich mag, wie diese verwenden uploadcare (über die 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" 
    }); 
}, 

Mein Code die Openlinie erreicht, und dann wirft diesen Fehler:

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

Früher, beim Laden der Seite, meine Konsole Protokolle:

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 

Die Tatsache, dass ich diese braun Warnmeldung oben bekommen (was ich bin ok mit, weil ich hoffe, den öffentlichen Schlüssel direkt über die JavaScript-API eingestellt) lässt mich denken, dass uploadcare.js Datei hat gewesen korrekt aufgenommen, aber der uploadCareMin2-Fehler lässt mich denken, dass ich es nicht richtig importiere.

TL; DR; Wie kann ich die uploadcare Javascript API in ein react.js Projekt importieren?

Vielen Dank für jede Hilfe.

+0

Bitte beachten Sie, was wir hinzugefügt haben CommonJS-Kompatibilität nur in Version [2.8.0] (https://github.com/uploadcare/uploadcare-widget/blob/master/HISTORY.markdown#280-14032016). Ich bin mir nicht sicher, wie React funktioniert, aber wir füllen 'module.exports', wenn es vorhanden ist (nicht' window.uploadcare'). – homm

Antwort

1

nicht sicher, was uploadcare aber versuchen

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

Es sieht aus wie Sie die Datei direkt Bedeutung importieren würden Sie der Autor hoffen, müssen Sie die Datei als export default, um den Weg zu importieren exportiert Sie zeigten . Wahrscheinlich halten sie es einfach im globalen Raum.

Wenn nicht, ist es auch möglich ist, exportiert sie ein benannter Wert so versuchen:

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

omg danke, die erste wichtige Aussage funktioniert! – maxfowler

0

können Sie nun auch installieren verwenden npm wie auf uploadcare's website dokumentiert:

NPM 
npm install uploadcare-widget 

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

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