createUploadWidget

[zhen1asemen1uk]

What about "createUploadWidget" in "cloudinary" types?

[tamaracloudinary]

Hi there @zhen1asemen1uk,
Can you please elaborate on what you think is missing? createUploadWidget is a method, not a type. We have a working example in our docs you can check out here, and you can read more on our JS SDK here:
https://cloudinary.com/documentation/javascript_image_and_video_upload

[zhen1asemen1uk]

Yes, it's a method, but it is not described in types, and my typescript says createUploadWidget not assigning to cloudinary

[skalahasti-cloudinary]

Hi @zhen1asemen1uk ,

Can you please provide us your sample code here or you can create a support ticket at:
https://support.cloudinary.com/hc/en-us/requests/new.

Thanks
Sree

[zhen1asemen1uk]

`
import React, { useRef } from "react";
import { Script } from "gatsby";
import { Cloudinary } from "@cloudinary/url-gen";

interface IUploadWidget {
children: (props: { open: () => void }) => React.ReactElement;
onUpload: (error: any, result: any, widget?: any) => void; // Use 'any' for widget type
}

const UploadWidget: React.FC = ({ children, onUpload }) => {
const cloudinary = useRef<Cloudinary | null>(null);
const widget = useRef<any | null>(null); // Use 'any' for widget type

const createWidget = () => {
	const options = {
		cloudName: process.env.GATSBY_CLOUD_NAME,
		uploadPreset: process.env.GATSBY_UPLOAD_PRESET,
		folder: "qr-codes",
	};

	return cloudinary.current?.createUploadWidget( // 👈🏻 here error
		options,
		(error: any, result: any) => {
			if (error || result.event === "success") {
				onUpload(error, result);
			}
		}
	);
};

const open = () => {
	if (!widget?.current) {
		widget.current = createWidget();
	}

	widget?.current && widget.current.open();
};

const handleOnLoad = () => {
	cloudinary.current = window?.cloudinary;
};

return (
	<>
		{children({ open })}
		<Script
			id='cloudinary'
			src='https://widget.cloudinary.com/v2.0/global/all.js'
			onLoad={handleOnLoad}
		/>
	</>
);

};

export default UploadWidget;
`

[tamaracloudinary]

Hi there @zhen1asemen1uk, I couldn't replicate the issue. Do you still get that error?
Can you please copy the full error message you get? and tell us your cloud name? any info will help here.
If you don't want to share these details publicly, please open a new Support ticket.
Thanks,
Tamara

[zhen1asemen1uk]

I can provide a screenshot code and error. It's a problem with types. Try past my provide code and u will see the same

Error: "Property 'createUploadWidget' does not exist on type 'Cloudinary'.ts(2339)"

[zhen1asemen1uk]

See type createUploadWidget in node_modules Cloudinary ??

[ecpa-cldtools]

Hi @zhen1asemen1uk The Upload Widget javascript package can be loaded from:

<script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript">  
</script>

See https://cloudinary.com/documentation/upload_widget#how_to_set_up_and_integrate_the_upload_widget_into_your_site_or_app

Could you help to add this to your web app and see if it helps to resolve the issue?

[zhen1asemen1uk]

The same error. This script doesn't add any types to my project.

[ecpa-cldtools]

Additionally, as you are calling the JavaScript on your typescript component - you may need to allow the loading of the javascript as described in this documentation