Add a toast for file upload failures. (#4114)

Adds toasts for cases when the file type is not allowed or the file is
too big.

Resolves
https://github.com/orgs/tldraw/projects/53?pane=issue&itemId=70298205

### Change type

- [ ] `bugfix`
- [x] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`

### Test plan

1. Upload a file that is either too big (over 10mb) or of incorrect file
type (pdf, docx,...).
2. You should see a toast explaining what went wrong.

### Release notes

- Show a toast when uploading an unsupported file type or a file that is
too large (more than 10mb).

assets/translations/main.json

@@ -117,6 +117,8 @@
 	"action.zoom-to-100": "Zoom to 100%",
 	"action.zoom-to-fit": "Zoom to fit",
 	"action.zoom-to-selection": "Zoom to selection",
+	"assets.files.size-too-big": "File size is too big",
+	"assets.files.type-not-allowed": "File type is not allowed",
 	"assets.files.upload-failed": "Upload failed",
 	"assets.url.failed": "Couldn't load URL preview",
 	"theme.dark": "Dark",

packages/tldraw/src/lib/defaultExternalContentHandlers.ts

@@ -71,7 +71,20 @@ export function registerDefaultExternalContentHandlers(
 		const isImageType = acceptedImageMimeTypes.includes(file.type)
 		const isVideoType = acceptedVideoMimeTypes.includes(file.type)
 
+		if (!isImageType && !isVideoType) {
+			toasts.addToast({
+				title: msg('assets.files.type-not-allowed'),
+				severity: 'error',
+			})
+		}
 		assert(isImageType || isVideoType, `File type not allowed: ${file.type}`)
+
+		if (file.size > maxAssetSize) {
+			toasts.addToast({
+				title: msg('assets.files.size-too-big'),
+				severity: 'error',
+			})
+		}
 		assert(
 			file.size <= maxAssetSize,
 			`File size too big: ${(file.size / 1024).toFixed()}kb > ${(maxAssetSize / 1024).toFixed()}kb`
@@ -256,6 +269,11 @@ export function registerDefaultExternalContentHandlers(
 		await Promise.all(
 			files.map(async (file, i) => {
 				if (file.size > maxAssetSize) {
+					toasts.addToast({
+						title: msg('assets.files.size-too-big'),
+						severity: 'error',
+					})
+
 					console.warn(
 						`File size too big: ${(file.size / 1024).toFixed()}kb > ${(
 							maxAssetSize / 1024
@@ -273,6 +291,10 @@ export function registerDefaultExternalContentHandlers(
 
 				// We can only accept certain extensions (either images or a videos)
 				if (!acceptedImageMimeTypes.concat(acceptedVideoMimeTypes).includes(file.type)) {
+					toasts.addToast({
+						title: msg('assets.files.type-not-allowed'),
+						severity: 'error',
+					})
 					console.warn(`${file.name} not loaded - Extension not allowed.`)
 					return null
 				}

packages/tldraw/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -121,6 +121,8 @@ export type TLUiTranslationKey =
 	| 'action.zoom-to-100'
 	| 'action.zoom-to-fit'
 	| 'action.zoom-to-selection'
+	| 'assets.files.size-too-big'
+	| 'assets.files.type-not-allowed'
 	| 'assets.files.upload-failed'
 	| 'assets.url.failed'
 	| 'theme.dark'

packages/tldraw/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -122,6 +122,8 @@ export const DEFAULT_TRANSLATION = {
 	'action.zoom-to-100': 'Zoom to 100%',
 	'action.zoom-to-fit': 'Zoom to fit',
 	'action.zoom-to-selection': 'Zoom to selection',
+	'assets.files.size-too-big': 'File size is too big',
+	'assets.files.type-not-allowed': 'File type is not allowed',
 	'assets.files.upload-failed': 'Upload failed',
 	'assets.url.failed': "Couldn't load URL preview",
 	'theme.dark': 'Dark',