mirror of
https://github.com/array-in-a-matrix/xinny.git
synced 2024-05-07 23:43:33 -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>
74 lines
2.4 KiB
JavaScript
74 lines
2.4 KiB
JavaScript
import React, { useState, useRef } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './ImagePackUpload.scss';
|
|
|
|
import initMatrix from '../../../client/initMatrix';
|
|
import { scaleDownImage } from '../../../util/common';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import Button from '../../atoms/button/Button';
|
|
import Input from '../../atoms/input/Input';
|
|
import IconButton from '../../atoms/button/IconButton';
|
|
import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
|
|
|
|
function ImagePackUpload({ onUpload }) {
|
|
const mx = initMatrix.matrixClient;
|
|
const inputRef = useRef(null);
|
|
const shortcodeRef = useRef(null);
|
|
const [imgFile, setImgFile] = useState(null);
|
|
const [progress, setProgress] = useState(false);
|
|
|
|
const handleSubmit = async (evt) => {
|
|
evt.preventDefault();
|
|
if (!imgFile) return;
|
|
const { shortcodeInput } = evt.target;
|
|
const shortcode = shortcodeInput.value.trim();
|
|
if (shortcode === '') return;
|
|
|
|
setProgress(true);
|
|
const image = await scaleDownImage(imgFile, 512, 512);
|
|
const { content_uri: url } = await mx.uploadContent(image);
|
|
|
|
onUpload(shortcode, url);
|
|
setProgress(false);
|
|
setImgFile(null);
|
|
shortcodeRef.current.value = '';
|
|
};
|
|
|
|
const handleFileChange = (evt) => {
|
|
const img = evt.target.files[0];
|
|
if (!img) return;
|
|
setImgFile(img);
|
|
shortcodeRef.current.value = img.name.slice(0, img.name.indexOf('.'));
|
|
shortcodeRef.current.focus();
|
|
};
|
|
const handleRemove = () => {
|
|
setImgFile(null);
|
|
inputRef.current.value = null;
|
|
shortcodeRef.current.value = '';
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="image-pack-upload">
|
|
<input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" accept=".png, .gif, .webp" required />
|
|
{
|
|
imgFile
|
|
? (
|
|
<div className="image-pack-upload__file">
|
|
<IconButton onClick={handleRemove} src={CirclePlusIC} tooltip="Remove file" />
|
|
<Text>{imgFile.name}</Text>
|
|
</div>
|
|
)
|
|
: <Button onClick={() => inputRef.current.click()}>Import image</Button>
|
|
}
|
|
<Input forwardRef={shortcodeRef} name="shortcodeInput" placeholder="shortcode" required />
|
|
<Button disabled={progress} variant="primary" type="submit">{progress ? 'Uploading...' : 'Upload'}</Button>
|
|
</form>
|
|
);
|
|
}
|
|
ImagePackUpload.propTypes = {
|
|
onUpload: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default ImagePackUpload;
|