{"size": 1905, "ext": "js", "max_stars_repo_path": "client/components/admin/settings/inputs/AssetSettingInput.js", "max_stars_repo_name": "dirkmueller/Rocket.Chat", "max_stars_repo_stars_event_min_datetime": "2020-06-21T13:49:17.000Z", "max_stars_repo_stars_event_max_datetime": "2020-06-21T13:49:19.000Z", "max_issues_repo_path": "client/components/admin/settings/inputs/AssetSettingInput.js", "max_issues_repo_name": "dirkmueller/Rocket.Chat", "max_issues_repo_issues_event_min_datetime": "2021-08-04T00:37:51.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-04T00:37:51.000Z", "max_forks_repo_path": "client/components/admin/settings/inputs/AssetSettingInput.js", "max_forks_repo_name": "dirkmueller/Rocket.Chat", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 28.0147058824, "max_line_length": 129, "alphanum_fraction": 0.6236220472}
import { Button, Icon, Label } from '@rocket.chat/fuselage';
import { Random } from 'meteor/random';
import React from 'react';
import toastr from 'toastr';

import { call } from '../../../../../app/ui-utils/client/lib/callMethod';
import { useTranslation } from '../../../providers/TranslationProvider';

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

	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) => {
			toastr.info(t('Uploading_file'));
			const reader = new FileReader();
			reader.readAsBinaryString(blob);
			reader.onloadend = () =>
				call('setAsset', reader.result, blob.type, asset)
					.then(() => {
						toastr.success(t('File_uploaded'));
					});
		});
	};

	const handleDeleteButtonClick = () => {
		call('unsetAsset', asset);
	};

	return <>
		<Label htmlFor={_id} text={label} title={_id} />
		<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 icon='icon-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
							type='file'
							accept={fileConstraints.extensions && fileConstraints.extensions.length && `.${ fileConstraints.extensions.join(', .') }`}
							onChange={handleUpload}
						/>
					</div>}
			</div>
		</div>
	</>;
}
