Implementing Uppy status bar in react

Uppy
1

Hi I am trying to create a react component using Uppy status bar. Are there any example code sandboxes I could look at ? The component renders an empty page and I cant figure out why. If I replace the Status bar wrapper with DrapDrop then it works. My component code looks like:

const UppyUpload = ({ uploadPayload }) => {
	const [uppy] = useState(
		new Uppy({
			meta: { CaseId: '29670', CustomerId: '107', projectTitle: 'Trial' },
			restrictions: { maxNumberOfFiles: 1 },
			autoProceed: true,
		})
			.use(XHRUpload, {
				endpoint: 'api/FormController/Upload',
				formData: true,
				fieldName: 'Files',
			})
			.on('complete', (result) => {
				const url = result.successful[0].uploadURL;
				store.dispatch({
					type: 'SET_USER_AVATAR_URL',
					payload: { url },
				});
			}),
	);

	return (
		<div>
			<StatusBar
				uppy={uppy}
				hideUploadButton
				hideAfterFinish={false}
				showProgressDetails
			/>
		</div>
	);
};

Am new to Uppy and any help would be appreciated.

2

I haven’t used status bar standalone so I’m not sure. Unfortunately I think the component is relatively tightly coupled to Dashboard and DragDrop. But I can at least tell you that you shouldn’t put uppy in state but rather use our hook: Initializing Uppy — Uppy