show error message on thumbnail/cover photo upload fail

This commit is contained in:
Sean Yesmunt 2020-03-13 15:54:31 -04:00
parent 9b95b4994e
commit f9284b6e1a
3 changed files with 11 additions and 4 deletions

View file

@ -1,4 +1,5 @@
[ignore] [ignore]
.*\.typeface\.json
[include] [include]

View file

@ -101,7 +101,9 @@ export class FormField extends React.PureComponent<Props> {
} else if (type === 'select') { } else if (type === 'select') {
input = ( input = (
<fieldset-section> <fieldset-section>
{label && <label htmlFor={name}>{label}</label>} {(label || errorMessage) && (
<label htmlFor={name}>{errorMessage ? <span className="error-text">{errorMessage}</span> : label}</label>
)}
<select id={name} {...inputProps}> <select id={name} {...inputProps}>
{children} {children}
</select> </select>

View file

@ -26,10 +26,11 @@ function SelectAsset(props: Props) {
const [pathSelected, setPathSelected] = useState(''); const [pathSelected, setPathSelected] = useState('');
const [fileSelected, setFileSelected] = useState<any>(null); const [fileSelected, setFileSelected] = useState<any>(null);
const [uploadStatus, setUploadStatus] = useState(SPEECH_READY); const [uploadStatus, setUploadStatus] = useState(SPEECH_READY);
const [error, setError] = useState();
function doUploadAsset(file) { function doUploadAsset(file) {
const uploadError = (error = '') => { const uploadError = (error = '') => {
console.log('error', error); setError(error);
}; };
const setUrl = path => { const setUrl = path => {
@ -53,6 +54,7 @@ function SelectAsset(props: Props) {
.then(json => (json.success ? setUrl(`${json.data.serveUrl}`) : uploadError(json.message))) .then(json => (json.success ? setUrl(`${json.data.serveUrl}`) : uploadError(json.message)))
.catch(err => uploadError(err.message)); .catch(err => uploadError(err.message));
} }
return ( return (
<fieldset-section> <fieldset-section>
<fieldset-group className="fieldset-group--smushed"> <fieldset-group className="fieldset-group--smushed">
@ -71,7 +73,8 @@ function SelectAsset(props: Props) {
</option> </option>
</FormField> </FormField>
{assetSource === SOURCE_UPLOAD && ( {assetSource === SOURCE_UPLOAD && (
<> <div>
{error && <div className="error-text">{error}</div>}
{!pathSelected && ( {!pathSelected && (
<FileSelector <FileSelector
label={'File to upload'} label={'File to upload'}
@ -96,13 +99,14 @@ function SelectAsset(props: Props) {
onClick={() => { onClick={() => {
setPathSelected(''); setPathSelected('');
setFileSelected(null); setFileSelected(null);
setError(null);
}} }}
> >
Clear Clear
</Button> </Button>
</div> </div>
)} )}
</> </div>
)} )}
{assetSource === SOURCE_URL && ( {assetSource === SOURCE_URL && (
<FormField <FormField