META-INF.resources.js.ImageInput.es.js Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.journal.web

Liferay Journal Web

There is a newer version: 5.0.177

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */

import ClayButton from '@clayui/button';
import ClayForm, {ClayInput} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import {sub} from 'frontend-js-web';
import React, {useRef, useState} from 'react';

export default function ImageInput({name, portletNamespace, previewURL}) {
	const [fileName, setFileName] = useState(previewURL || '');
	const imageTitleId = `${portletNamespace}${name}`;
	const inputRef = useRef();

	return (
		
			{previewURL ? (
				
					
				
			) : null}

			{name ? (
				
					
						{Liferay.Language.get('image')}
					

					
						
							
									setFileName(
										event.target.files?.[0]?.name || ''
									)
								}
								ref={inputRef}
								type="file"
							/>

							 inputRef.current?.click()}
								placeholder={Liferay.Language.get(
									'select-image'
								)}
								readOnly
								sizing="sm"
								value={fileName}
							/>
						

						
							 inputRef.current?.click()}
								small
								title={sub(
									fileName
										? Liferay.Language.get('change-x')
										: Liferay.Language.get('select-x'),
									Liferay.Language.get('image')
								)}
							>
								
							
						
					
				
			) : null}
		
	);
}