mirror of
https://github.com/array-in-a-matrix/xinny.git
synced 2024-05-08 16:03:34 -04:00
62e0821be2
* Bump matrix-js-sdk from 20.1.0 to 21.0.0 Bumps [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk) from 20.1.0 to 21.0.0. - [Release notes](https://github.com/matrix-org/matrix-js-sdk/releases) - [Changelog](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CHANGELOG.md) - [Commits](https://github.com/matrix-org/matrix-js-sdk/compare/v20.1.0...v21.0.0) --- updated-dependencies: - dependency-name: matrix-js-sdk dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * Bump matrix-js-sdk from 20.1.0 to 21.0.1 Bumps [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk) from 20.1.0 to 21.0.1. - [Release notes](https://github.com/matrix-org/matrix-js-sdk/releases) - [Changelog](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CHANGELOG.md) - [Commits](https://github.com/matrix-org/matrix-js-sdk/compare/v20.1.0...v21.0.1) --- updated-dependencies: - dependency-name: matrix-js-sdk dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * Fix upload content * Change min supported node Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>
99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
import React, { useState, useRef } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './ImageUpload.scss';
|
|
|
|
import initMatrix from '../../../client/initMatrix';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import Avatar from '../../atoms/avatar/Avatar';
|
|
import Spinner from '../../atoms/spinner/Spinner';
|
|
import RawIcon from '../../atoms/system-icons/RawIcon';
|
|
|
|
import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
|
|
|
|
function ImageUpload({
|
|
text, bgColor, imageSrc, onUpload, onRequestRemove,
|
|
size,
|
|
}) {
|
|
const [uploadPromise, setUploadPromise] = useState(null);
|
|
const uploadImageRef = useRef(null);
|
|
|
|
async function uploadImage(e) {
|
|
const file = e.target.files.item(0);
|
|
if (file === null) return;
|
|
try {
|
|
const uPromise = initMatrix.matrixClient.uploadContent(file);
|
|
setUploadPromise(uPromise);
|
|
|
|
const res = await uPromise;
|
|
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 (
|
|
<div className="img-upload__wrapper">
|
|
<button
|
|
type="button"
|
|
className="img-upload"
|
|
onClick={() => {
|
|
if (uploadPromise !== null) return;
|
|
uploadImageRef.current.click();
|
|
}}
|
|
>
|
|
<Avatar
|
|
imageSrc={imageSrc}
|
|
text={text}
|
|
bgColor={bgColor}
|
|
size={size}
|
|
/>
|
|
<div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
|
|
{uploadPromise === null && (
|
|
size === 'large'
|
|
? <Text variant="b3" weight="bold">Upload</Text>
|
|
: <RawIcon src={PlusIC} color="white" />
|
|
)}
|
|
{uploadPromise !== null && <Spinner size="small" />}
|
|
</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" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ImageUpload.defaultProps = {
|
|
text: null,
|
|
bgColor: 'transparent',
|
|
imageSrc: null,
|
|
size: 'large',
|
|
};
|
|
|
|
ImageUpload.propTypes = {
|
|
text: PropTypes.string,
|
|
bgColor: PropTypes.string,
|
|
imageSrc: PropTypes.string,
|
|
onUpload: PropTypes.func.isRequired,
|
|
onRequestRemove: PropTypes.func.isRequired,
|
|
size: PropTypes.oneOf(['large', 'normal']),
|
|
};
|
|
|
|
export default ImageUpload;
|