48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
/**
|
|
* Obtain an onchange event handler that updates an <Avatar> component
|
|
* with a new image uploaded via a file input element.
|
|
*/
|
|
export const get_avatar_preview_event_handler = (id: string): ((event: Event) => void) => {
|
|
const handler = (event: Event): void => {
|
|
const target: HTMLInputElement = event.target as HTMLInputElement;
|
|
const files: FileList | null = target.files;
|
|
|
|
if (files && files.length > 0) {
|
|
const src: string = URL.createObjectURL(files[0]);
|
|
const preview: HTMLImageElement = document.querySelector(
|
|
`#${id} > img:first-of-type`,
|
|
) as HTMLImageElement;
|
|
|
|
if (preview) {
|
|
preview.src = src;
|
|
preview.hidden = false;
|
|
}
|
|
}
|
|
};
|
|
|
|
return handler;
|
|
};
|
|
|
|
/**
|
|
* Obtain an onchange event handler that updates an <img> element
|
|
* with a new image uploaded via a file input element.
|
|
*/
|
|
export const get_image_preview_event_handler = (id: string): ((event: Event) => void) => {
|
|
const handler = (event: Event): void => {
|
|
const target: HTMLInputElement = event.target as HTMLInputElement;
|
|
const files: FileList | null = target.files;
|
|
|
|
if (files && files.length > 0) {
|
|
const src: string = URL.createObjectURL(files[0]);
|
|
const preview: HTMLImageElement = document.getElementById(id) as HTMLImageElement;
|
|
|
|
if (preview) {
|
|
preview.src = src;
|
|
preview.hidden = false;
|
|
}
|
|
}
|
|
};
|
|
|
|
return handler;
|
|
};
|