I'm trying to use the Cloudinary Upload Widget in Angular. I followed to example code provided by cloudinary but it doesn't seem to work. It looks like I'm missing an import or a package to get access to the function cloudinary.createUploadWidget
I've installed and imported:
import { CloudinaryModule } from '#cloudinary/ng';
In app.module.ts. and I have added
<script
src="https://upload-widget.cloudinary.com/global/all.js"
type="text/javascript"
></script>
in the index.html file.
but I still get the Cannot find name 'cloudinary' error in my component.
What import am I missing to get access to 'cloudinary' in my angular component. The cloudinary documentation doesn't clarifies it and in their Sandbox Example they have the same error.
ngOnInit() {
this.myWidget = cloudinary.createUploadWidget( /// this is where the error occurs
{
cloudName: this.cloudName,
uploadPreset: this.uploadPreset
},
(error, result) => {
if (!error && result && result.event === "success") {
console.log("Done! Here is the image info: ", result.info);
document
.getElementById("uploadedimage")
.setAttribute("src", result.info.secure_url);
}
}
);
Does anybody had any luck making the cloudinary upload widget work in angular?
Any insight of what I'm missing is very welcome.
Can you try following these steps:
https://cloudinary.com/documentation/angular_quick_start
Related
I want to use github's kadena-io/cardano-crypto.js.This is the cardano-crypto.js Link: https://github.com/kadena-io/cardano-crypto.js. But it is an error when used. I've tried a lot to fix the error, but it doesn't work. To get lib.js file in cardano-crypto.js, first I have to install npm. I did that. Then came the lib.js file. Then I tried to import cardano-crypto.js's mnemonicToRootKeyPair function to my react-native wallet. But there is an error. To solve the error, first I tried to import cardano-crypto.js with node module. Then I tried to import without node_module. I have imported in several ways.
import {} from 'path'
,
_importDefault (require ('path'))
. But somehow Cardano-crypto.js's mnemonicToRootKeyPair could not run/import. Error says lib.js: path could not be found. But the lib.js file is there. Now how do I solve this how to use mnemonicToRootKeyPair of cardano-crypto.js in our react native wallet?
This is the cardano-crypto.js mnemonicToRootKeyPair function code that I want to use:
async function mnemonicToRootKeypair(mnemonic, derivationScheme) {
validateDerivationScheme(derivationScheme)
if (derivationScheme === 1) {
return mnemonicToRootKeypairV1(mnemonic)
} else if (derivationScheme === 2) {
return mnemonicToRootKeypairV2(mnemonic, '')
} else {
throw Error(`Derivation scheme ${derivationScheme} not implemented`)
}
}
And this is the error when I use the function in my react native wallet:
Failed building JavaScript bundle.
Unable to resolve module path from C:\Users\DCL\Desktop\app\cardanoCrypto\lib.js: path could not be found within the project.
So i'm beginning to use three.js, trying to import a OBJ file using OBJLoader2.js locally (no npm). But when try to add import {OBJLoader2} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/loaders/OBJLoader2.js';
It comes up with 404 not found errors for three.module.js,Mesh Reciever.js and OBJLoaderParser. And checking inside the OBJLoader2 file, it has imports for those files
import {
FileLoader,
Object3D,
Loader
} from "../../../build/three.module.js";
import { OBJLoader2Parser } from "./obj2/OBJLoader2Parser.js";
import { MeshReceiver } from "./obj2/shared/MeshReceiver.js";
import { MaterialHandler } from "./obj2/shared/MaterialHandler.js";
Does this mean to use the OBJLoader2.js i need to use the whole three.js.master file then?. Because ive watched youtube tutorials and they seem to just copy and paste the OBJLoader2.js file inside their directory without errors. Thanks
I resolved the problem thanks #Mugen97. It is because I took the OBJloader.js file from jsm not the js folder.
I'm using pdf.js to load a pdf in react. Before the promise in getDocument can resolve, I get the error: fullReader is null (in Firefox). In Chrome, I get a different error: Expected a function, which is strange because I'm passing a callback.
I've tried different ways to import pdf.js and looked at multiple examples. I was able to get this example running successfully (https://github.com/yurydelendik/pdfjs-react) but can't get it working in my own app.
Importing pdf.js:
import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;
The componentDidMount function in my component:
componentDidMount() {
const loadingTask = pdfjsLib.getDocument(`examplePDFUrl`);
loadingTask.promise.then((doc) => {
console.log(`Document loaded ${doc.numPages} page(s)`);
}, (error) => {
console.error(`Error during loading: ${error}`);
});
}
If anyone has any insight into this, I would greatly appreciate some help. Thank you!
I am trying to figure out how to use <script> loading in an existing React app that uses React modules.
All external libraries in my app are loaded with a module loader , e.g :
import Module from /path/to/module;
My task is to incorporate google recaptcha which in all examples that I have seen uses
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
method to load api.js script file. Is there a way to wrap loading into a module?
thanks, forgive me if the question is dumb, total React noob here.
UPDATE:
I can't use npm , its disabled in my world. But I may be able to leverage this bit from the package.
import ReCAPTCHA from "./recaptcha";
import makeAsyncScriptLoader from "react-async-script";
const callbackName = "onloadcallback";
const lang = typeof window !== "undefined" && (window.recaptchaOptions && window.recaptchaOptions.lang) ?
`&hl=${window.recaptchaOptions.lang}` :
"";
const URL = `https://www.google.com/recaptcha/api.js?onload=${callbackName}&render=explicit${lang}`;
const globalName = "grecaptcha";
export default makeAsyncScriptLoader(ReCAPTCHA, URL, {
callbackName,
globalName,
exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"],
});
`
This is probably what you are looking for :
react-google-recaptcha npm package
I am following the offical angular2 guide for testing on an existing project.
I use a custom libary, downloadjs which works just fine when I run the application. But I get an error in the console in case of test running:
"__zone_symbol__zoneAwareStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/downloadjs/download.js\n\tError: XHR error (404 Not Found) loading node_modules/downloadjs/download.js\n\tError loading node_modules/downloadjs/download.js as \"downloadjs\" from app/utilities/file-handler.utility.js"
I used npm install downloadjs to get the tool.
file-handler.utility.js is the following:
import {Injectable} from "#angular/core";
import downloadjs=require("downloadjs");
#Injectable()
export class FileHandler{
public static download(fileToDownload: any) {
downloadjs(fileToDownload, "filename.txt" ,"text/plain");
}
}
I have created a defs.spec.ts file in the same folder:
declare module 'downloadjs'{
function download(data:any, strFileName:string, strMimeType:string):void;
export = download;
}
and added the path to systemjs.config.js:
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'downloadjs': 'npm:downloadjs/download.js'
So this runs just fine with npm start.
But as the guide states, after creating 1st.spec.ts with this:
describe('1st tests', () => {
it('true is true', () => expect(true).toBe(true));
});
this throws the error I pasted on the top. Thank you for your time!
The problem was related to defs.spec.ts location. We decided to use an existing angular 2 template, and after integrating with it, the tests works now.