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).
This commit is contained in:
Mitja Bezenšek 2024-07-09 15:05:31 +02:00 committed by GitHub
parent ec0ec71c69
commit adbb0e9b3b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 29 additions and 1 deletions

View file

@ -117,6 +117,8 @@
"action.zoom-to-100": "Zoom to 100%", "action.zoom-to-100": "Zoom to 100%",
"action.zoom-to-fit": "Zoom to fit", "action.zoom-to-fit": "Zoom to fit",
"action.zoom-to-selection": "Zoom to selection", "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.files.upload-failed": "Upload failed",
"assets.url.failed": "Couldn't load URL preview", "assets.url.failed": "Couldn't load URL preview",
"theme.dark": "Dark", "theme.dark": "Dark",

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

@ -122,6 +122,8 @@ export const DEFAULT_TRANSLATION = {
'action.zoom-to-100': 'Zoom to 100%', 'action.zoom-to-100': 'Zoom to 100%',
'action.zoom-to-fit': 'Zoom to fit', 'action.zoom-to-fit': 'Zoom to fit',
'action.zoom-to-selection': 'Zoom to selection', '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.files.upload-failed': 'Upload failed',
'assets.url.failed': "Couldn't load URL preview", 'assets.url.failed': "Couldn't load URL preview",
'theme.dark': 'Dark', 'theme.dark': 'Dark',