55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import React, { useState, useRef, useEffect } from "react";
|
|
import { updatePhoto, removePhoto } from "actions/userActions";
|
|
import { useDispatch } from "react-redux";
|
|
|
|
import DisplayImageUpload from "components/ads/DisplayImageUpload";
|
|
|
|
import UserApi from "api/UserApi";
|
|
import Uppy from "@uppy/core";
|
|
|
|
function FormDisplayImage() {
|
|
const [file, setFile] = useState<any>();
|
|
const [imageURL, setImageURL] = useState(`/api/${UserApi.photoURL}`);
|
|
const dispatch = useDispatch();
|
|
const dispatchActionRef = useRef<(uppy: Uppy.Uppy) => void | null>();
|
|
|
|
const onUploadComplete = (uppy: Uppy.Uppy) => {
|
|
uppy.reset();
|
|
setImageURL(`/api/${UserApi.photoURL}?${new Date().getTime()}`);
|
|
};
|
|
|
|
const onSelectFile = (file: any) => {
|
|
setFile(file.data);
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatchActionRef.current = (uppy: Uppy.Uppy) => {
|
|
dispatch(updatePhoto({ file, callback: () => onUploadComplete(uppy) }));
|
|
};
|
|
}, [file]);
|
|
|
|
const upload = (uppy: Uppy.Uppy) => {
|
|
if (typeof dispatchActionRef.current === "function")
|
|
dispatchActionRef.current(uppy);
|
|
};
|
|
|
|
const removeProfileImage = () => {
|
|
dispatch(
|
|
removePhoto(() => {
|
|
setImageURL(`/api/${UserApi.photoURL}?${new Date().getTime()}`);
|
|
}),
|
|
);
|
|
};
|
|
|
|
return (
|
|
<DisplayImageUpload
|
|
onChange={onSelectFile}
|
|
onRemove={removeProfileImage}
|
|
submit={upload}
|
|
value={imageURL}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default FormDisplayImage;
|