Added S3 Image Upload API and Frontend

Author: hackstarsj

Backend/EcommerceInventory/.env

@@ -1,7 +1,18 @@
 DEBUG='True'
+# SECRET_KEY='django-insecure-n==@#u@5goj0o27k8isfo%6!k3fs(2u@3r7+n!ovu-uu1#p=gd'
+# DATABASE_NAME='ecommerce'
+# DATABASE_USER='ecommerce'
+# DATABASE_PASSWORD='ecommerce'
+# DATABASE_HOST='ecommerce.cfamkce00xa3.ap-south-1.rds.amazonaws.com'
+# DATABASE_PORT='3306'
 SECRET_KEY='django-insecure-n==@#u@5goj0o27k8isfo%6!k3fs(2u@3r7+n!ovu-uu1#p=gd'
-DATABASE_NAME='ecommerce'
-DATABASE_USER='ecommerce'
-DATABASE_PASSWORD='ecommerce'
-DATABASE_HOST='ecommerce.cfamkce00xa3.ap-south-1.rds.amazonaws.com'
-DATABASE_PORT='3306'
+DATABASE_NAME='ecommerceproject'
+DATABASE_USER='ecommerceproject'
+DATABASE_PASSWORD='ecommerceproject'
+DATABASE_HOST='localhost'
+DATABASE_PORT='3306'
+
+AWS_ACCESS_KEY_ID='ACCESS_KEY_ID'
+AWS_ACESS_KEY_SECRET='AWS_ACESS_KEY_SECRET'
+AWS_STORAGE_BUCKET_NAME='AWS_BUCKET_NAME'
+AWS_S3_REGION_NAME='AWS_S3_REGION_NAME'

Backend/EcommerceInventory/EcommerceInventory/__pycache__/Helpers.cpython-311.pyc

@@ -172,3 +172,9 @@
     'SLIDING_TOKEN_LIFETIME': timedelta(minutes=5),
     'SLIDING_TOKEN_REFRESH_LIFETIME': timedelta(days=1),
 }
+
+
+AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
+AWS_ACESS_KEY_SECRET = os.getenv('AWS_ACESS_KEY_SECRET')
+AWS_STORAGE_BUCKET_NAME=os.getenv('AWS_STORAGE_BUCKET_NAME')
+AWS_S3_REGION_NAME=os.getenv('AWS_S3_REGION_NAME')

Backend/EcommerceInventory/EcommerceInventory/__pycache__/settings.cpython-311.pyc

@@ -17,20 +17,22 @@
 from django.contrib import admin
 from django.urls import include, path, re_path
 
-from EcommerceInventory.views import index
+from EcommerceInventory.views import index,FileUploadViewInS3
 from EcommerceInventory import settings
 from UserServices.Controller.DynamicFormController import DynamicFormController
 from UserServices.Controller.SuperAdminDynamicFormController import SuperAdminDynamicFormController
 from UserServices.Controller.SidebarController import ModuleView
 from django.conf.urls.static import static
 
+
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('api/auth/', include('UserServices.urls')),
     path('api/getForm/<str:modelName>/',DynamicFormController.as_view(),name='dynamicForm'),
     path('api/superAdminForm/<str:modelName>/',SuperAdminDynamicFormController.as_view(),name='superadmindynamicForm'),
     path('api/getMenus/',ModuleView.as_view(),name='sidebarmenu'),
     path('api/products/',include('ProductServices.urls')),
+    path('api/uploads/',FileUploadViewInS3.as_view(),name='fileupload')
 ]
 
 if settings.DEBUG:

Backend/EcommerceInventory/EcommerceInventory/__pycache__/urls.cpython-311.pyc

@@ -1,3 +1,38 @@
 from django.shortcuts import render
+from rest_framework.views import APIView
+from rest_framework.parsers import MultiPartParser,FormParser
+from rest_framework.response import Response
+from boto3.session import Session
+from EcommerceInventory.settings import AWS_ACCESS_KEY_ID,AWS_ACESS_KEY_SECRET,AWS_S3_REGION_NAME,AWS_STORAGE_BUCKET_NAME
+import os
+
 def index(request):
-    return render(request, 'index.html')
+    return render(request, 'index.html')
+
+class FileUploadViewInS3(APIView):
+    parser_classes=(MultiPartParser,FormParser)
+
+    def post(self,request,*args,**kwargs):
+        uploaded_files_urls=[]
+        for file_key in request.FILES:
+            file_obj=request.FILES[file_key]
+            s3_client=Session(
+                aws_access_key_id=AWS_ACCESS_KEY_ID,
+                aws_secret_access_key=AWS_ACESS_KEY_SECRET,
+                region_name=AWS_S3_REGION_NAME
+            ).client("s3")
+
+            uniqueFileName=os.urandom(24).hex()+"_"+file_obj.name.replace(" ","_")
+            file_path="uploads/"+uniqueFileName
+
+            s3_client.upload_fileobj(
+                file_obj,
+                AWS_STORAGE_BUCKET_NAME,
+                file_path,
+                ExtraArgs={
+                    'ContentType':file_obj.content_type
+                }
+            )
+            s3url=f"https://{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com/{file_path}"
+            uploaded_files_urls.append(s3url)
+        return Response({'message':'File uploaded successfully','urls':uploaded_files_urls},status=200)

Backend/EcommerceInventory/EcommerceInventory/__pycache__/views.cpython-311.pyc

@@ -0,0 +1,110 @@
+import {useFormContext} from 'react-hook-form';
+import { Box,FormControl,InputLabel,Select,MenuItem, FormControlLabel, Switch, TextField,Alert, Typography, IconButton, LinearProgress } from "@mui/material";
+import useApi from '../hooks/APIHandler';
+import { useEffect,useState } from 'react';
+import DescriptionIcon from '@mui/icons-material/Description';
+import { Delete } from '@mui/icons-material';
+import Button from '@mui/material/Button';
+import { toast } from 'react-toastify';
+
+const FileInputComponent = ({field}) => {
+    const {register,formState:{errors},watch,setValue} = useFormContext();
+    const {callApi,loading}=useApi();
+    const [selectedFiles,setSelectedFiles]=useState([]);
+    const [filePreviews,setFilePreviews]=useState([]);
+    const [fileUploaded,setFileUploaded]=useState(false);
+
+    const handleDeleteImage=(index)=>{
+        // Delete File Actual
+        const updatedFiles=[...selectedFiles]
+        updatedFiles.splice(index,1);
+        setSelectedFiles(updatedFiles);
+
+        //Delete File preview
+        const updatedPreviews=[...filePreviews];
+        updatedPreviews.splice(index,1);
+        setFilePreviews(updatedPreviews);
+
+        setFileUploaded(false);
+    }
+
+    const uploadFiles=async()=>{
+        try{
+            const formData=new FormData();
+            selectedFiles.forEach((file,index)=>{
+                formData.append(`file${index}`,file);
+            })
+
+            const response=await callApi({url:'uploads/',method:'post',body:formData,header:{'Content-Type':'multipart/form-data'}});
+            setValue(field.name,JSON.stringify(response?.data?.urls));
+            toast.success(response?.data?.message);
+            setFileUploaded(true);
+        }
+        catch(err){
+            toast.error(err?.message);   
+        }
+    }
+
+    const deleteAllFiles=()=>{
+        setSelectedFiles([]);
+        setFilePreviews([]);
+        setFileUploaded(false);
+    }
+
+    useEffect(()=>{
+        if(!selectedFiles.length && watch(field.name)){
+            console.log(watch(field.name));
+            const fileArray=Array.from(watch(field.name)) || [];
+            setSelectedFiles(fileArray);
+            const preview=fileArray.map((file,index)=>({
+                url:URL.createObjectURL(file),
+                name:file.name,
+                type:file.type.split('/')[0]
+            }))
+            console.log(preview);
+            setFilePreviews(preview);
+            setFileUploaded(false);
+        }
+    },[watch(field.name)]);
+
+    return (
+        <>
+        {
+            filePreviews.length>0 && filePreviews.map((file,index)=>(
+                <Box key={index} sx={{display:'flex',alignItems:'center',mb:2}}>
+                    {
+                        file.type==='image'?<img src={file.url} alt={file.name} style={{width:'60px',height:'60px'}} />:<DescriptionIcon sx={{width:'60px',height:'60px'}} />
+                    }
+                   <Typography variant='body1' p={1}>{file.name}</Typography>
+                   <IconButton onClick={()=>handleDeleteImage(index)} sx={{color:'red'}}>
+                        <Delete/>
+                   </IconButton>
+                </Box>
+            ))
+        }
+        {!filePreviews.length && 
+            <Box p={1} mb={1}>
+                    <Typography variant='title'>{field.label}</Typography>
+                    <Box component={"div"} className='fileInput' mt={1}>
+                        <input type='file' multiple {...register(field.name,{required:field.required})} />
+                    </Box>
+                    {
+                    !!errors[field.name] && <Alert variant="outlined" severity='error'>
+                        This Field is Required  
+                    </Alert>
+                    }
+            </Box>
+        }
+        {
+            selectedFiles.length>0 && !fileUploaded && (
+                loading?<LinearProgress sx={{width:'100%'}}/>:
+                <Box mt={2} display="flex" justifyContent="space-between">
+                    <Button onClick={uploadFiles} variant='contained' color='primary'>Upload Files</Button>
+                    <Button onClick={deleteAllFiles} color='primary' variant='contained'>Delete All Files</Button>
+                </Box>
+            )
+        }
+        </>
+    )
+}
+export default FileInputComponent;

Backend/EcommerceInventory/EcommerceInventory/settings.py

@@ -0,0 +1,6 @@
+import { isValidUrl,getImageUrl } from "../utils/Helper";
+import { Typography } from "@mui/material";
+const RenderImage=({data,name})=>{
+    return (data && data!=='' && isValidUrl(data))?<img src={getImageUrl(data)} alt={name} style={{width:70,height:70,padding:'5px'}}/>:<Typography variant="body2" pt={3} pb={3}>No Image</Typography> 
+}
+export default RenderImage;

Backend/EcommerceInventory/EcommerceInventory/urls.py

@@ -1,23 +1,12 @@
 import {useFormContext} from 'react-hook-form';
 import { Box,FormControl,InputLabel,Select,MenuItem, FormControlLabel, Switch, TextField,Alert } from "@mui/material";
+import FileInputComponent from './FileInputComponents';
 
-const StepFileComponents = ({formConfig,fieldType}) => {
-    const {register,formState:{errors}} = useFormContext();
-    const fileFields=formConfig.data.file;
+const StepFileComponents = ({formConfig }) => {
     return (
         <Box>
-            {fileFields.map((field,index)=>(
-                <>
-                <Box component={"div"} className='fileInput'>
-                    <label>{field.label}</label>
-                    <input type='file' {...register(field.name,{required:field.required})} />
-                 </Box>
-                    {
-                    !!errors[field.name] && <Alert variant="outlined" severity='error'>
-                        This Field is Required  
-                    </Alert>
-                  }
-                </>
+            {formConfig?.data?.file?.map((field,index)=>(
+                <FileInputComponent field={field} key={index} />
             ))}
         </Box>
     )

Backend/EcommerceInventory/EcommerceInventory/views.py

@@ -103,7 +103,8 @@ const DynamicForm=()=>{
                     </>  : <LinearProgress/>}
             <Box mt={2} display="flex" justifyContent="space-between">
             {currentStep>0 && (<Button type='button' variant="contained" color="primary" onClick={()=>goToStep(currentStep-1)}><ArrowBackIosIcon sx={{fontSize:'18px',marginRight:'5px'}}/> Back</Button>)}
-            {currentStep<steps.length-1?<Button type='button' variant="contained" color="primary" onClick={()=>nextStep()}> Next <ArrowForwardIosIcon sx={{fontSize:'18px',marginLeft:'5px'}}/></Button>:<Button variant="contained" color="primary" type="submit"><SaveIcon sx={{fontSize:'18px',marginRight:'5px'}}/> Submit</Button>}
+            {currentStep<steps.length-1 && <Button type='button' variant="contained" color="primary" onClick={()=>nextStep()}> Next <ArrowForwardIosIcon sx={{fontSize:'18px',marginLeft:'5px'}}/></Button>}
+            {<Button sx={{display:currentStep==steps.length-1?'block':'none'}} variant="contained" color="primary" type="submit"><SaveIcon sx={{fontSize:'20px',marginRight:'5px',margingTop:'8px'}}/> Submit</Button>}
             </Box>
             </form>
             </FormProvider>

Backend/EcommerceInventory/UserServices/Controller/__pycache__/DynamicFormController.cpython-311.pyc

@@ -3,6 +3,7 @@ import { Box, Collapse, Typography } from "@mui/material"
 import { DataGrid, GridRow, GridToolbar } from "@mui/x-data-grid"
 import { IconButton } from "@mui/material"
 import { Add, Delete, Edit } from "@mui/icons-material"
+import RenderImage from "../../components/RenderImage"
 
 const ExpanableRow=({row,props,onEditClick,onDeleteClick})=>{
     let columns=[]
@@ -11,8 +12,11 @@ const ExpanableRow=({row,props,onEditClick,onDeleteClick})=>{
             field:key,
             headerName:key.charAt(0).toUpperCase()+key.slice(1).replaceAll("_"," "),
             width:150,
-        })).filter((item)=>item.field!=='children')
+        })).filter((item)=>item.field!=='children').filter((item)=>item.field!=='image');
 
+        columns.push({field:'image',headerName:'Image',width:150,sortable:false,renderCell:(params)=>{
+            return <RenderImage data={params.row.image} name={params.row.name}/>
+        }});
         columns=[{field:'action',headerName:'Action',width:180,sortable:false,renderCell:(params)=>{
             return <>
                 <IconButton onClick={()=>onEditClick(params)}>

Frontend/ecommerce_inventory/src/components/FileInputComponents.js

@@ -10,6 +10,7 @@ import Edit from '@mui/icons-material/Edit';
 import ExpandLessRounded from '@mui/icons-material/ExpandLessRounded';
 import ExpandMoreRounded from '@mui/icons-material/ExpandMoreRounded';
 import ExpanableRow from "./ExpandableRow";
+import RenderImage from "../../components/RenderImage";
 
 const ManageCategories = () => {
     const [data,setData]=useState([]);
@@ -105,7 +106,7 @@ const ManageCategories = () => {
                 }
                 else if(key==='image'){
                     columns.push({field:key,headerName:key.charAt(0).toUpperCase()+key.slice(1).replaceAll("_"," "),width:150,sortable:false,renderCell:(params)=>{
-                        return (params.row.image && params.row.image!=='' && isValidUrl(params.row.image))?<img src={params.row.image} alt={params.row.name} style={{width:70,height:70,padding:'5px'}}/>:<Typography variant="body2" pt={3} pb={3}>No Image</Typography> 
+                        return <RenderImage data={params.row.image} name={params.row.name}/>
                     }})
                 }
                 else{

Frontend/ecommerce_inventory/src/components/RenderImage.js

@@ -43,14 +43,48 @@ export const getUser=()=>{
 
 export const isValidUrl=(url)=>{
     try{
-        new URL(url);
+        if(Array.isArray(url)){
+            let image=url.filter((item)=>item.match(/\.(jpeg|jpg|gif|png)$/)!=null);
+            new URL(image[0]);
+        }
+        else if(checkIsJson(url) && JSON.parse(url).length>0){
+            let image=JSON.parse(url).filter((item)=>item.match(/\.(jpeg|jpg|gif|png)$/)!=null);
+            new URL(image[0]);
+        }
+        else{
+            new URL(url);
+        }
         return true;
     }
     catch(e){
         return false;
     }
 }
 
+export const getImageUrl=(url)=>{
+    if(Array.isArray(url)){
+        let image=url.filter((item)=>item.match(/\.(jpeg|jpg|gif|png)$/)!=null);
+        return image[0];
+    }
+    else if(checkIsJson(url) && JSON.parse(url).length>0){
+        let image=JSON.parse(url).filter((item)=>item.match(/\.(jpeg|jpg|gif|png)$/)!=null);
+        return image[0];
+    }
+    else{
+        return url;
+    }
+}
+
+export const checkIsJson=(str)=>{
+    try{
+        JSON.parse(str);
+    }
+    catch(e){
+        return false;
+    }
+    return true;
+}
+
 export const getFormTypes=()=>{
     return [
         {component:StepSelectComponents,label:"Basic Details",fieldType:'select'},