Added progress spinner in ImageUplaod (#91)

This commit is contained in:
Ajay Bura 2021-09-13 12:27:55 +05:30
parent 95bb0ac6d4
commit 09f7225eb7
6 changed files with 115 additions and 54 deletions

View file

@ -1,3 +0,0 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58173 0 0 3.58173 0 8V72C0 76.4183 3.58173 80 8 80H72C76.4183 80 80 76.4183 80 72V26H62C57.5817 26 54 22.4183 54 18V0H8Z" fill="#E24444"/>
</svg>

Before

Width:  |  Height:  |  Size: 298 B

View file

@ -1,48 +1,73 @@
import React, { useRef } from 'react'; import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './ImageUpload.scss';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg'; import Text from '../../atoms/text/Text';
import Avatar from '../../atoms/avatar/Avatar'; import Avatar from '../../atoms/avatar/Avatar';
import Spinner from '../../atoms/spinner/Spinner';
import RawIcon from '../../atoms/system-icons/RawIcon';
import './ImageUpload.scss';
function ImageUpload({ function ImageUpload({
text, bgColor, imageSrc, onUpload, text, bgColor, imageSrc, onUpload, onRequestRemove,
}) { }) {
const [uploadPromise, setUploadPromise] = useState(null);
const uploadImageRef = useRef(null); const uploadImageRef = useRef(null);
// Uploads image and passes resulting URI to onUpload function provided in component props. async function uploadImage(e) {
function uploadImage(e) {
const file = e.target.files.item(0); const file = e.target.files.item(0);
if (file !== null) { // TODO Add upload progress spinner if (file === null) return;
initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false }).then((res) => { try {
if (res.content_uri !== null) { const uPromise = initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false });
onUpload({ content_uri: res.content_uri }); setUploadPromise(uPromise);
}
}, (err) => { const res = await uPromise;
console.log(err); // TODO Replace with alert banner. if (typeof res?.content_uri === 'string') onUpload(res.content_uri);
}); setUploadPromise(null);
} catch {
setUploadPromise(null);
} }
uploadImageRef.current.value = null;
}
function cancelUpload() {
initMatrix.matrixClient.cancelUpload(uploadPromise);
setUploadPromise(null);
uploadImageRef.current.value = null;
} }
return ( return (
<button type="button" className="img-upload" onClick={() => { uploadImageRef.current.click(); }}> <div className="img-upload__wrapper">
<div className="img-upload__mask"> <button
type="button"
className="img-upload"
onClick={() => {
if (uploadPromise !== null) return;
uploadImageRef.current.click();
}}
>
<Avatar <Avatar
imageSrc={imageSrc} imageSrc={imageSrc}
text={text.slice(0, 1)} text={text.slice(0, 1)}
bgColor={bgColor} bgColor={bgColor}
size="large" size="large"
/> />
</div> <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
<div className="img-upload__icon"> {uploadPromise === null && <Text variant="b3">Upload</Text>}
<RawIcon size="small" src={SettingsIC} /> {uploadPromise !== null && <Spinner size="small" />}
</div> </div>
</button>
{ (typeof imageSrc === 'string' || uploadPromise !== null) && (
<button
className="img-upload__btn-cancel"
type="button"
onClick={uploadPromise === null ? onRequestRemove : cancelUpload}
>
<Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
</button>
)}
<input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" /> <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
</button> </div>
); );
} }
@ -50,14 +75,14 @@ ImageUpload.defaultProps = {
text: null, text: null,
bgColor: 'transparent', bgColor: 'transparent',
imageSrc: null, imageSrc: null,
onUpload: null,
}; };
ImageUpload.propTypes = { ImageUpload.propTypes = {
text: PropTypes.string, text: PropTypes.string,
bgColor: PropTypes.string, bgColor: PropTypes.string,
imageSrc: PropTypes.string, imageSrc: PropTypes.string,
onUpload: PropTypes.func, onUpload: PropTypes.func.isRequired,
onRequestRemove: PropTypes.func.isRequired,
}; };
export default ImageUpload; export default ImageUpload;

View file

@ -1,20 +1,50 @@
.img-upload__wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.img-upload { .img-upload {
display: flex; display: flex;
flex-direction: row-reverse;
width: 80px;
height: 80px;
}
.img-upload:hover {
cursor: pointer; cursor: pointer;
} position: relative;
.img-upload__mask { &__process {
mask: url('../../../../public/res/svg/avatar-clip.svg'); width: 100%;
-webkit-mask: url('../../../../public/res/svg/avatar-clip.svg'); height: 100%;
} border-radius: var(--bo-radius);
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .6);
.img-upload__icon { position: absolute;
z-index: 1; left: 0;
position: absolute; right: 0;
z-index: 1;
& .text {
text-transform: uppercase;
font-weight: 600;
color: white;
}
&--stopped {
display: none;
}
& .donut-spinner {
border-color: rgb(255, 255, 255, .3);
border-left-color: white;
}
}
&:hover .img-upload__process--stopped {
display: flex;
}
&__btn-cancel {
margin-top: var(--sp-extra-tight);
cursor: pointer;
& .text {
color: var(--tc-danger-normal)
}
}
} }

View file

@ -18,15 +18,22 @@ function ProfileEditor({
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const displayNameRef = useRef(null); const displayNameRef = useRef(null);
const bgColor = colorMXID(userId); const bgColor = colorMXID(userId);
const [imageSrc, updateImgSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl)); const [avatarSrc, setAvatarSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl, 80, 80, 'crop') || null);
const [disabled, setDisabled] = useState(true); const [disabled, setDisabled] = useState(true);
let username = mx.getUser(mx.getUserId()).displayName; let username = mx.getUser(mx.getUserId()).displayName;
// Sets avatar URL and updates the avatar component in profile editor to reflect new upload // Sets avatar URL and updates the avatar component in profile editor to reflect new upload
function handleUpload(e) { function handleAvatarUpload(url) {
mx.setAvatarUrl(e.content_uri); if (url === null) {
updateImgSrc(mx.mxcUrlToHttp(e.content_uri)); if (confirm('Are you sure you want to remove avatar?')) {
mx.setAvatarUrl('');
setAvatarSrc(null);
}
return;
}
mx.setAvatarUrl(url);
setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop'));
} }
function saveDisplayName() { function saveDisplayName() {
@ -44,7 +51,13 @@ function ProfileEditor({
return ( return (
<form className="profile-editor"> <form className="profile-editor">
<ImageUpload text={username} bgColor={bgColor} imageSrc={imageSrc} onUpload={handleUpload} /> <ImageUpload
text={username}
bgColor={bgColor}
imageSrc={avatarSrc}
onUpload={handleAvatarUpload}
onRequestRemove={() => handleAvatarUpload(null)}
/>
<div className="profile-editor__input-container"> <div className="profile-editor__input-container">
<Text variant="b3"> <Text variant="b3">
Display name of&nbsp; Display name of&nbsp;

View file

@ -3,14 +3,10 @@
align-items: end; align-items: end;
} }
.img-upload {
margin-right: var(--sp-normal)
}
.profile-editor__input-container { .profile-editor__input-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-right: var(--sp-normal); margin: 0 var(--sp-normal);
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
} }

View file

@ -30,7 +30,7 @@ function GeneralSection() {
return ( return (
<div className="settings-content"> <div className="settings-content">
<SettingTile <SettingTile
title="Profile" title=""
content={( content={(
<ProfileEditor userId={initMatrix.matrixClient.getUserId()} /> <ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
)} )}