Role="uploadcare-uploader" -- Where to Get Error Message?

Questions / Help
1

I’m using:

<input type="hidden" role="uploadcare-uploader" [.....]

I’m using the code shown in this CodePen.

It usually works great but yesterday a user got an error message that only said, “Ooops! Something went wrong during upload.” She sent me the image and there was nothing unusual about it – it was a 333KB jpeg.

Is there a way I can show a more detailed error message?

2

Hi @vik , you can handle upload errors this way

const widget = uploadcare.Widget("[role=uploadcare-uploader]");

widget.onDialogOpen((dialog) => {
  dialog.fileColl.onAdd.add((file) => {
    file.fail((errKind, fileInfo, errInfo) => {
      console.error(errInfo);
    });
    file.done((fileInfo) => {
      console.log(fileInfo.cdnUrl);
    });
  });
});

See Widget docs to learn more.

Also, you can enable Debugging mode with this setting: UPLOADCARE_DEBUG_UPLOADS

I’m using the code shown in this CodePen.

Can you please elaborate on that? Do you use the codepen demo itself or do you have the same code in your app?

3

I have code in my app that follows the CodePen demo.

My app uses React. I have a component that adds the UploadCare image field:

function Uploader(props) {
	const {value, onChange, onUploadComplete, targetId, targetFileName} = props;

	useLayoutEffect(() => {
		// get a widget instance
		var widget = uploadcare.Widget('[id=' + targetId + ']');
		// listen to the "upload completed" event
		widget.onUploadComplete(function (fileInfo) {
			// get CDN URL from file information. Here you can generate a thumbnail using the fie URL, save the URL to DB, and so on.
			// console.log(fileInfo.cdnUrl);
			onUploadComplete(fileInfo);
		});
	}, []);

	return (
		<input type="hidden" role="uploadcare-uploader" name={targetFileName} id={targetId}/>
	)
}

This is working fine as is, without a call to widget.onDialogOpen. Will it be okay if I update it like this?

	function Uploader(props) {
		const {value, onChange, onUploadComplete, targetId, targetFileName} = props;

		useLayoutEffect(() => {
			// get a widget instance
			var widget = uploadcare.Widget('[id=' + targetId + ']');

			widget.onDialogOpen((dialog) => {
			  dialog.fileColl.onAdd.add((file) => {
				file.fail((errKind, fileInfo, errInfo) => {
				  console.error(errInfo);
				});
				file.done((fileInfo) => {
				  console.log(fileInfo.cdnUrl);
				});
			  });
			});

			// listen to the "upload completed" event
			widget.onUploadComplete(function (fileInfo) {
				// get CDN URL from file information. Here you can generate a thumbnail using the fie URL, save the URL to DB, and so on.
				// console.log(fileInfo.cdnUrl);
				onUploadComplete(fileInfo);
			});
		}, []);

		return (
			<input type="hidden" role="uploadcare-uploader" name={targetFileName} id={targetId}/>
		)
	}

	widget.onUploadComplete(function (fileInfo) {
		// get CDN URL from file information. Here you can generate a thumbnail using the fie URL, save the URL to DB, and so on.
		// console.log(fileInfo.cdnUrl);
		onUploadComplete(fileInfo);
	});
4

Yes, it should work. If you use React, you may want to take a look at GitHub - uploadcare/react-widget: Uploadcare React Widget

1 Like