PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixing Preview Image

Browse Source
This commit is contained in:
ajat91.sudrajat 2022-01-13 18:03:12 +07:00
parent 86bc7ce98e
commit d8df8ee4dd
1 changed files with 89 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/Membership/MembershipModal.js
View File

@ -35,6 +35,9 @@ export const MembershipModal = ({
const [responseFilenameStore, setResponseFilenameStore] = useState(""); const [responseFilenameStore, setResponseFilenameStore] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingStore, setLoadingStore] = useState(false); const [loadingStore, setLoadingStore] = useState(false);
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage1, setPreviewImage1] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
useEffect(() => { useEffect(() => {
if (initialData.id) { if (initialData.id) {
@ -58,6 +61,28 @@ export const MembershipModal = ({
return () => {}; return () => {};
}, [initialData]); }, [initialData]);
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
};
const handlePreviewData = async (file) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage1(file.url || file.preview);
setPreviewVisible(true);
setPreviewTitle(
file.name || file.url.substring(file.url.lastIndexOf("/") + 1)
);
};
const handleCancel1 = () => { setPreviewVisible(false) };
const beforeUpload = (file) => { const beforeUpload = (file) => {
let isLt2M; let isLt2M;
let allowedFile = ["image/jpeg", "image/png"]; let allowedFile = ["image/jpeg", "image/png"];
@ -292,11 +317,11 @@ export const MembershipModal = ({
<Upload <Upload
listType="picture-card" listType="picture-card"
fileList={fileList} fileList={fileList}
onPreview={(file) => { // onPreview={(file) => {
setPreviewImage(file.url || file.filename); // setPreviewImage(file.url || file.filename);
}} // }}
showUploadList={true} showUploadList={true}
onPreview={previewImage} onPreview={handlePreviewData}
onChange={handleChange} onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)} beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)} customRequest={(args) => uploadHandler(args)}
@ -309,6 +334,18 @@ export const MembershipModal = ({
> >
{image === "" ? uploadButton : null} {image === "" ? uploadButton : null}
</Upload> </Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5 <h5
style={{ style={{
marginTop: 12, marginTop: 12,
@ -363,11 +400,11 @@ export const MembershipModal = ({
<Upload <Upload
listType="picture-card" listType="picture-card"
fileList={fileList} fileList={fileList}
onPreview={(file) => { // onPreview={(file) => {
setPreviewImage(file.url || file.filename); // setPreviewImage(file.url || file.filename);
}} // }}
showUploadList={true} showUploadList={true}
onPreview={previewImage} onPreview={handlePreviewData}
onChange={handleChange} onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)} beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)} customRequest={(args) => uploadHandler(args)}
@ -379,6 +416,18 @@ export const MembershipModal = ({
> >
{image === "" ? uploadButton : null} {image === "" ? uploadButton : null}
</Upload> </Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5 <h5
style={{ style={{
marginTop: 12, marginTop: 12,
@ -436,11 +485,11 @@ export const MembershipModal = ({
<Upload <Upload
listType="picture-card" listType="picture-card"
fileList={fileList} fileList={fileList}
onPreview={(file) => { // onPreview={(file) => {
setPreviewImage(file.url || file.filename); // setPreviewImage(file.url || file.filename);
}} // }}
showUploadList={true} showUploadList={true}
onPreview={previewImage} onPreview={handlePreviewData}
onChange={handleChange} onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)} beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)} customRequest={(args) => uploadHandler(args)}
@ -452,6 +501,18 @@ export const MembershipModal = ({
> >
{image === "" ? uploadButton : null} {image === "" ? uploadButton : null}
</Upload> </Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5 <h5
style={{ style={{
marginTop: 12, marginTop: 12,
@ -467,11 +528,11 @@ export const MembershipModal = ({
<Upload <Upload
listType="picture-card" listType="picture-card"
fileList={fileStore} fileList={fileStore}
onPreview={(file) => { // onPreview={(file) => {
setPreviewImageStore(file.url || file.filename); // setPreviewImageStore(file.url || file.filename);
}} // }}
showUploadList={true} showUploadList={true}
onPreview={previewImageStore} onPreview={handlePreviewData}
onChange={handleChangeStore} onChange={handleChangeStore}
beforeUpload={(file) => beforeUploadStore(file)} beforeUpload={(file) => beforeUploadStore(file)}
customRequest={(args) => uploadHandlerStore(args)} customRequest={(args) => uploadHandlerStore(args)}
@ -484,6 +545,18 @@ export const MembershipModal = ({
> >
{fileStore.length >= 3 ? null : uploadButtonStore} {fileStore.length >= 3 ? null : uploadButtonStore}
</Upload> </Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5 <h5
style={{ style={{
marginTop: 12, marginTop: 12,