direct image upload feature added in ProductEdtScr

frontend/src/screens/ProductEditScreen.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
+import axios from 'axios'
 import { Link } from 'react-router-dom'
-import { Form, Button } from 'react-bootstrap'
+import { Row, Col, Card, Form, Button } from 'react-bootstrap'
 import { useDispatch, useSelector } from 'react-redux'
 import Message from '../components/Message'
 import Loader from '../components/Loader'
@@ -9,6 +10,7 @@ import { listProductDetails, updateProduct } from '../actions/productActions'
 import {
   PRODUCT_DETAILS_RESET,
   PRODUCT_UPDATE_RESET,
+  PRODUCT_UPDATE_FAIL
 } from '../constants/productConstants'
 
 const ProductEditScreen = ({ match, history }) => {
@@ -22,7 +24,7 @@ const ProductEditScreen = ({ match, history }) => {
   const [category, setCategory] = useState('')
   const [countInStock, setCountInStock] = useState(0)
   const [description, setDescription] = useState('')
-  // const [uploading, setUploading] = useState(false)
+  const [uploading, setUploading] = useState(false)
 
   const dispatch = useDispatch()
 
@@ -57,28 +59,35 @@ const ProductEditScreen = ({ match, history }) => {
     }
   }, [dispatch, history, product, productId, successUpdate])
 
-  // const uploadFileHandler = async (e) => {
-  //   const file = e.target.files[0]
-  //   const formData = new FormData()
-  //   formData.append('image', file)
-  //   setUploading(true)
-
-  //   try {
-  //     const config = {
-  //       headers: {
-  //         'Content-Type': 'multipart/form-data',
-  //       },
-  //     }
-
-  //     const { data } = await axios.post('/api/upload', formData, config)
-
-  //     setImageSrc(data)
-  //     setUploading(false)
-  //   } catch (error) {
-  //     console.error(error)
-  //     setUploading(false)
-  //   }
-  // }
+  const uploadFileHandler = async (e) => {
+    const file = e.target.files[0]
+    const formData = new FormData()
+    formData.append('image', file)
+    setUploading(true)
+
+    try {
+      const config = {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      }
+
+      const { data } = await axios.post('/api/upload', formData, config)
+
+      setImageSrc(data)
+      setUploading(false)
+    } catch (error) {
+      const message =error.response && error.response.data.message
+      ? error.response.data.message
+      : error.message
+      dispatch({
+        type: PRODUCT_UPDATE_FAIL ,
+        payload: message
+      })
+      setImageSrc('')
+      setUploading(false)
+    }
+  }
 
   const submitHandler = (e) => {
     e.preventDefault()
@@ -139,22 +148,24 @@ const ProductEditScreen = ({ match, history }) => {
               ></Form.Control>
             </Form.Group>
 
-            <Form.Group controlId="image">
-              <Form.Label>Image Src</Form.Label>
-              <Form.Control
-                type="text"
-                placeholder="Enter Image URL"
-                value={imageSrc}
-                onChange={(e) => setImageSrc(e.target.value)}
-              ></Form.Control>
-              {/* <Form.File
-                id='image-file'
-                label='Choose File'
-                custom
-                onChange={uploadFileHandler}
-              ></Form.File>
-              {uploading && <Loader />} */}
-            </Form.Group>
+          <Form.Group controlId='image-file'>
+            <Row>
+              <Col>   
+                <Form.Label>Upload Product Image</Form.Label>
+                <Form.File
+                  id='image-file'
+                  size='sm'
+                  custom
+                  variant='secondary'
+                  onChange={uploadFileHandler}
+                ></Form.File>
+              </Col>
+              <Col>
+                {uploading && <Loader />}
+                {!uploading && imageSrc && <img src={imageSrc} className={'m-2'} width={100} height={100} alt="product" />}
+              </Col>
+            </Row>
+          </Form.Group>
 
             <Form.Group className="my-3" controlId="imageAlt">
               <Form.Label>Image Alt</Form.Label>