Rocket.Chat/client/views/admin/settings/inputs/AssetSettingInput.js

import { Button, Field, Icon } from '@rocket.chat/fuselage';
import { Random } from 'meteor/random';
import React from 'react';

import { useMethod } from '../../../../contexts/ServerContext';
import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext';
import { useTranslation } from '../../../../contexts/TranslationContext';
import './AssetSettingInput.css';

function AssetSettingInput({ _id, label, value = {}, asset, fileConstraints = {} }) {
	const t = useTranslation();

	const dispatchToastMessage = useToastMessageDispatch();
	const setAsset = useMethod('setAsset');
	const unsetAsset = useMethod('unsetAsset');

	const handleUpload = (event) => {
		event = event.originalEvent || event;

		let { files } = event.target;
		if (!files || files.length === 0) {
			if (event.dataTransfer && event.dataTransfer.files) {
				files = event.dataTransfer.files;
			} else {
				files = [];
			}
		}

		Object.values(files).forEach((blob) => {
			dispatchToastMessage({ type: 'info', message: t('Uploading_file') });
			const reader = new FileReader();
			reader.readAsBinaryString(blob);
			reader.onloadend = async () => {
				try {
					await setAsset(reader.result, blob.type, asset);
					dispatchToastMessage({ type: 'success', message: t('File_uploaded') });
				} catch (error) {
					dispatchToastMessage({ type: 'error', message: error });
				}
			};
		});
	};

	const handleDeleteButtonClick = async () => {
		try {
			await unsetAsset(asset);
		} catch (error) {
			dispatchToastMessage({ type: 'error', message: error });
		}
	};

	return (
		<>
			<Field.Label htmlFor={_id} title={_id}>
				{label}
			</Field.Label>
			<Field.Row>
				<div className='settings-file-preview'>
					{value.url ? (
						<div className='preview' style={{ backgroundImage: `url(${value.url}?_dc=${Random.id()})` }} />
					) : (
						<div className='preview no-file background-transparent-light secondary-font-color'>
							<Icon name='upload' />
						</div>
					)}
					<div className='action'>
						{value.url ? (
							<Button onClick={handleDeleteButtonClick}>
								<Icon name='trash' />
								{t('Delete')}
							</Button>
						) : (
							<div className='rc-button rc-button--primary'>
								{t('Select_file')}
								<input
									className='AssetSettingInput__input'
									type='file'
									accept={fileConstraints.extensions && fileConstraints.extensions.length && `.${fileConstraints.extensions.join(', .')}`}
									onChange={handleUpload}
								/>
							</div>
						)}
					</div>
				</div>
			</Field.Row>
		</>
	);
}

export default AssetSettingInput;