scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 08:31:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Use client-side image preview instead of server response

Browse source
This commit is contained in:
Paul Kaplan 2021-05-14 16:00:15 -04:00
parent 8984f2cedc
commit 5be42442f6
2 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/redux/studio-mutations.js
View file

@ -194,6 +194,18 @@ const mutateStudioImage = input => ((dispatch, getState) => {
const error = normalizeError(err, body, res);
dispatch(completeMutation('image', error ? currentImage : body.thumbnail_url, error));
});
// Return a promise with the data-url of the uploaded image
return new Promise((resolve, reject) => {
try {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(input.files[0]);
} catch (e) {
reject(e);
}
});
});
const mutateStudioCommentsAllowed = shouldAllow => ((dispatch, getState) => {

7
src/views/studio/studio-image.jsx
View file

@ -25,11 +25,13 @@ const blankImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA
const StudioImage = ({
imageError, isFetching, isMutating, image, canEditInfo, handleUpdate
}) => {
const [uploadPreview, setUploadPreview] = React.useState(null);
const fieldClassName = classNames('studio-info-section', {
'mod-fetching': isFetching,
'mod-mutating': isMutating
});
const src = isMutating ? blankImage : (image || blankImage);
let src = image || blankImage;
if (uploadPreview && !imageError) src = uploadPreview;
return (
<div className={fieldClassName}>
<img
@ -43,7 +45,8 @@ const StudioImage = ({
type="file"
accept="image/*"
onChange={e => {
handleUpdate(e.target);
handleUpdate(e.target)
.then(dataUrl => setUploadPreview(dataUrl));
e.target.value = '';
}}
/>