45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
import resizeImage from 'pl-fe/utils/resize-image';
|
|
|
|
import { useSettings } from '../use-settings';
|
|
|
|
import { usePreview } from './use-preview';
|
|
|
|
interface UseImageFieldOpts {
|
|
/** Resize the image to the max dimensions, if defined. */
|
|
maxPixels?: number;
|
|
/** Fallback URL before a file is uploaded. */
|
|
preview?: string;
|
|
}
|
|
|
|
/** Returns props for `<input type="file">`, and optionally resizes the file. */
|
|
const useImageField = (opts: UseImageFieldOpts = {}) => {
|
|
const { stripMetadata } = useSettings();
|
|
|
|
const [file, setFile] = useState<File | null>();
|
|
const src = usePreview(file) || (file === null ? undefined : opts.preview);
|
|
|
|
const onChange = async (files: FileList | null) => {
|
|
const file = files?.item(0);
|
|
if (!file) return;
|
|
|
|
if (typeof opts.maxPixels === 'number') {
|
|
setFile(await resizeImage(file, opts.maxPixels, stripMetadata));
|
|
} else {
|
|
setFile(file);
|
|
}
|
|
};
|
|
|
|
const onClear = () => setFile(null);
|
|
|
|
return {
|
|
src,
|
|
file,
|
|
onChange,
|
|
onClear,
|
|
};
|
|
};
|
|
|
|
export { useImageField };
|