Channel Thumbnail: handle json errors
1. Added size-specific error message. 2. Route whatever Vanwa's error instead of showing "unexpected json token". It's ugly, but at least it contains the reason string.
This commit is contained in:
parent
ed0f574339
commit
47fa736bdc
1 changed files with 20 additions and 2 deletions
|
@ -1,5 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { THUMBNAIL_CDN_SIZE_LIMIT_BYTES } from 'config';
|
||||||
import FileSelector from 'component/common/file-selector';
|
import FileSelector from 'component/common/file-selector';
|
||||||
import { IMG_CDN_PUBLISH_URL } from 'constants/cdn_urls';
|
import { IMG_CDN_PUBLISH_URL } from 'constants/cdn_urls';
|
||||||
import { FormField, Form } from 'component/common/form';
|
import { FormField, Form } from 'component/common/form';
|
||||||
|
@ -24,6 +25,7 @@ function SelectAsset(props: Props) {
|
||||||
const { onUpdate, onDone, assetName, currentValue, recommended, title, inline } = props;
|
const { onUpdate, onDone, assetName, currentValue, recommended, title, inline } = props;
|
||||||
const [pathSelected, setPathSelected] = React.useState('');
|
const [pathSelected, setPathSelected] = React.useState('');
|
||||||
const [fileSelected, setFileSelected] = React.useState<any>(null);
|
const [fileSelected, setFileSelected] = React.useState<any>(null);
|
||||||
|
const [fileSize, setFileSize] = React.useState(0);
|
||||||
const [uploadStatus, setUploadStatus] = React.useState(STATUS.READY);
|
const [uploadStatus, setUploadStatus] = React.useState(STATUS.READY);
|
||||||
const [useUrl, setUseUrl] = usePersistedState('thumbnail-upload:mode', false);
|
const [useUrl, setUseUrl] = usePersistedState('thumbnail-upload:mode', false);
|
||||||
const [url, setUrl] = React.useState(currentValue);
|
const [url, setUrl] = React.useState(currentValue);
|
||||||
|
@ -53,7 +55,14 @@ function SelectAsset(props: Props) {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: data,
|
body: data,
|
||||||
})
|
})
|
||||||
.then((response) => response.json())
|
.then((res) => res.text())
|
||||||
|
.then((text) => {
|
||||||
|
try {
|
||||||
|
return text.length ? JSON.parse(text) : {};
|
||||||
|
} catch {
|
||||||
|
throw new Error(text);
|
||||||
|
}
|
||||||
|
})
|
||||||
.then((json) => {
|
.then((json) => {
|
||||||
return json.type === 'success'
|
return json.type === 'success'
|
||||||
? onSuccess(`${json.message}`)
|
? onSuccess(`${json.message}`)
|
||||||
|
@ -62,7 +71,15 @@ function SelectAsset(props: Props) {
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
uploadError(err.message);
|
if (fileSize >= THUMBNAIL_CDN_SIZE_LIMIT_BYTES) {
|
||||||
|
uploadError(
|
||||||
|
__('Thumbnail size over %max_size%MB, please edit and reupload.', {
|
||||||
|
max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
uploadError(err.message);
|
||||||
|
}
|
||||||
setUploadStatus(STATUS.READY);
|
setUploadStatus(STATUS.READY);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -106,6 +123,7 @@ function SelectAsset(props: Props) {
|
||||||
onFileChosen={(file) => {
|
onFileChosen={(file) => {
|
||||||
if (file.name) {
|
if (file.name) {
|
||||||
setFileSelected(file);
|
setFileSelected(file);
|
||||||
|
setFileSize(file.size);
|
||||||
// what why? why not target=WEB this?
|
// what why? why not target=WEB this?
|
||||||
// file.path is undefined in web but available in electron
|
// file.path is undefined in web but available in electron
|
||||||
setPathSelected(file.name || file.path);
|
setPathSelected(file.name || file.path);
|
||||||
|
|
Loading…
Add table
Reference in a new issue