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:
parent
ec0ec71c69
commit
adbb0e9b3b
5 changed files with 29 additions and 1 deletions
|
@ -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
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in a new issue