upload file

src/pages/pnspsUserDetailPage_Public/UserInformationCard_Public.js

@@ -9,8 +9,7 @@ import {useEffect, useState} from "react";
 import Checkbox from "@mui/material/Checkbox";
 import LoadingComponent from "../extra-pages/LoadingComponent";
 
-import {POST_UP_FILE} from "../../utils/ApiPathConst";
-import axios from "axios";
+import { HttpFileDownload,HttpFileUpload } from 'utils/HttpUtils';
 //import {useParams} from "react-router-dom";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -54,28 +53,33 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
 
 
     const uploadFile = (event)=>{
-        var formData = new FormData();
-        formData.append("multipartFile", event.target.files[0]);
-        formData.append("refType", "userId");
-        formData.append("refId", currentUserData.id);
-        axios.post(POST_UP_FILE,formData,{
-            headers: {
-                "Content-Type":"multipart/form-data"
+        HttpFileUpload(
+            {
+                refType:"identification",
+                refId: currentUserData.id,
+                file: event.target.files[0],
+                onSuccess: (response)=>{
+                    console.log(response);
+                    setOpen(true);
+                }
             }
-        }).then(
-            (response)=>{
+        );
+    };
+
+    const downloadFile = ()=>{
+        HttpFileDownload({
+            fileId: 1,
+            skey: "W6biVNvk50YVC2T6",
+            filename: "idCardSample.jpg",
+            onSuccess: function(response){
                 console.log(response);
                 setOpen(true);
             }
-        ).catch(error => {
-            console.log(error);
-            return false;
         });
     };
 
     const [open, setOpen] = React.useState(false);
     const handleClose = () => {
-
         setOpen(false);
     };
    
@@ -94,7 +98,7 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
                 <form>
                     <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
                         <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
-                        This is a success message!
+                            Upload success.
                         </Alert>
                     </Snackbar>
                     <Grid container>
@@ -163,14 +167,14 @@ const UserInformationCard_Public = ({isCollectData, updateUserObject,userData})
                         </Grid>
 
             <input
-                //accept="image/*"
+                accept="image/*"
                 //className={classes.input}
                 id="contained-button-file"
                 multiple
                 type="file"
                 onChange={uploadFile}
             />
-                        <Button variant="contained" >View Identification File</Button>
+                        <Button variant="contained" onClick={downloadFile} >View Identification File</Button>
 
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                             <Grid container alignItems={"center"}>

src/utils/ApiPathConst.js

@@ -15,8 +15,8 @@ export const GET_USER_COMBO_LIST = '/user/combo';
 
 
 //File Up/Download
-export const POST_UP_FILE = apiPath+'/file/ul';
-export const GET_DOWN_FILE = apiPath+'/file/dl/{id}/{skey}/{filename}';
+export const FILE_UP_POST = apiPath+'/file/ul';
+export const FILE_DOWN_GET = apiPath+'/file/dl/{id}/{skey}/{filename}';
 
 // POST request
 //Login

src/utils/HttpUtils.js

@@ -0,0 +1,68 @@
+import axios from "axios";
+import {FILE_UP_POST, FILE_DOWN_GET} from "../utils/ApiPathConst";
+
+export const HttpGet = ({url, onSuccess, onFail, onError}) =>{
+    axios.get(url).then(
+        (response)=>{onResponse(response, onSuccess, onFail);}
+    ).catch(error => {
+        return handleError(error,onError);
+    });
+};
+
+export const HttpFileDownload = ({fileId, skey, filename, onSuccess, onFail, onError}) =>{
+    axios.get(
+        FILE_DOWN_GET
+        .replace("{id}",fileId)
+        .replace("{skey}",skey)
+        .replace("{filename}", filename)
+    ).then(
+        (response)=>{onResponse(response, onSuccess, onFail);}
+    ).catch(error => {
+        return handleError(error,onError);
+    });
+};
+
+export const HttpFileUpload = ({ refType, refId, file,refCode, onSuccess, onFail, onError}) =>{
+    var formData = new FormData();
+        formData.append("multipartFile", file);
+        formData.append("refType", refType);
+        formData.append("refId", refId);
+        if(refCode){
+            formData.append("refCode", refCode);
+        }
+        axios.post(FILE_UP_POST,formData,{
+            headers: {
+                "Content-Type":"multipart/form-data"
+            }
+        }).then(
+            (response)=>{
+                onResponse(response,onSuccess,onFail);
+            }
+        ).catch(error => { return handleError(error, onError); });
+};
+
+
+const onResponse= (response, onSuccess, onFail) =>{
+    if (response.status >= 300 ||response.status < 200) {
+        console.log("onFail");
+        if(onFail){
+            onFail(response);
+        }else{
+            console.log(response);
+        }
+        return;
+    }
+    
+    if(onSuccess){
+        onSuccess(response.data);
+    }
+}
+
+const handleError= (error, onError) =>{
+    if(onError){
+        return onError(error);
+    }else{
+        console.log(error);
+        return false;
+    }
+}