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

Merge branch 'develop' into 'devops-staging'

Browse Source 
Fixing Preview Image

See merge request empatnusabangsa/ppob/ppob-frontend!70
This commit is contained in:
ajat sudrajat 2022-01-13 11:03:51 +00:00
commit cfb5d0cac6
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 [loading, setLoading] = useState(false);
const [loadingStore, setLoadingStore] = useState(false);
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage1, setPreviewImage1] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
useEffect(() => {
if (initialData.id) {
@ -58,6 +61,28 @@ export const MembershipModal = ({
return () => {};
}, [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) => {
let isLt2M;
let allowedFile = ["image/jpeg", "image/png"];
@ -292,11 +317,11 @@ export const MembershipModal = ({
<Upload
listType="picture-card"
fileList={fileList}
onPreview={(file) => {
setPreviewImage(file.url || file.filename);
}}
// onPreview={(file) => {
// setPreviewImage(file.url || file.filename);
// }}
showUploadList={true}
onPreview={previewImage}
onPreview={handlePreviewData}
onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)}
@ -309,6 +334,18 @@ export const MembershipModal = ({
>
{image === "" ? uploadButton : null}
</Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5
style={{
marginTop: 12,
@ -363,11 +400,11 @@ export const MembershipModal = ({
<Upload
listType="picture-card"
fileList={fileList}
onPreview={(file) => {
setPreviewImage(file.url || file.filename);
}}
// onPreview={(file) => {
// setPreviewImage(file.url || file.filename);
// }}
showUploadList={true}
onPreview={previewImage}
onPreview={handlePreviewData}
onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)}
@ -379,6 +416,18 @@ export const MembershipModal = ({
>
{image === "" ? uploadButton : null}
</Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5
style={{
marginTop: 12,
@ -436,11 +485,11 @@ export const MembershipModal = ({
<Upload
listType="picture-card"
fileList={fileList}
onPreview={(file) => {
setPreviewImage(file.url || file.filename);
}}
// onPreview={(file) => {
// setPreviewImage(file.url || file.filename);
// }}
showUploadList={true}
onPreview={previewImage}
onPreview={handlePreviewData}
onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)}
@ -452,6 +501,18 @@ export const MembershipModal = ({
>
{image === "" ? uploadButton : null}
</Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5
style={{
marginTop: 12,
@ -467,11 +528,11 @@ export const MembershipModal = ({
<Upload
listType="picture-card"
fileList={fileStore}
onPreview={(file) => {
setPreviewImageStore(file.url || file.filename);
}}
// onPreview={(file) => {
// setPreviewImageStore(file.url || file.filename);
// }}
showUploadList={true}
onPreview={previewImageStore}
onPreview={handlePreviewData}
onChange={handleChangeStore}
beforeUpload={(file) => beforeUploadStore(file)}
customRequest={(args) => uploadHandlerStore(args)}
@ -484,6 +545,18 @@ export const MembershipModal = ({
>
{fileStore.length >= 3 ? null : uploadButtonStore}
</Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5
style={{
marginTop: 12,