Dashboard: "showProgressDetails: true" not working

[Grovespaz]

I've set the Dashboard up to show progress details, but it does not show:

aining upload size and time, set this to true.

I would expect it to say "Uploading: 45%・43 MB of 101 MB・8s left" instead of "Uploading: 45%", as per the documentation

I've included the full code I use to setup Uppy just to be complete:

const uppy = Uppy({
	restrictions: {
		allowedFileTypes: ['video/*'],
	},
	onBeforeUpload: (files) => {
		const updatedFiles = Object.assign({}, files)
		Object.keys(updatedFiles).forEach(fileId => {
			(updatedFiles[fileId].meta as any).categoryId = this.$props.category;
		})
		return updatedFiles
	} 
}).use(Dashboard, {
	target: this.$refs.uploadThing,
	inline: true,
	showLinkToFileUploadResult: false,
	showProgressDetails: true,
	proudlyDisplayPoweredByUppy: false,
	disableThumbnailGenerator: true,
}).use(Tus, {
	endpoint: process.env.backendUrl + '/files/',
	resume: true,
	retryDelays: [0, 1000, 3000, 5000],
	limit: 5,
	metadata: {
		categoryId: '123123',
	}
})

[paulbellamy]

I just got bit by the same thing when using the React StatusBar component. After some digging, I think it is because I had it mounted inside a container of the wrong size, but I can't quite track down how the containerWidth prop gets initialized. There's a check if it doesn't have the .uppy-size--md html class, the additional info line gets display: none. I worked around it for now by adding the CSS:

.uppy-Root:not(.uppy-size--md) .uppy-StatusBar-additionalInfo {
  display: block;
}

/* Stolen from the styles.css to make sure the statusBar is tall enough to hold both lines. */
.uppy-StatusBar {
  height: 46px;
}

[goto-bus-stop]

Right, it looks like this is intended behaviour to prevent cluttering the mobile UI, but maybe we can be a bit more granular about the sizing constraints…

[Murderlon]

Closed in #3174