React-How can i edit a product for whitch i use an uploaded image? - Hack The Tech - Latest News related to Computer and Technology

Hack The Tech - Latest News related to Computer and Technology

Get Daily Latest News related to Computer and Technology and hack the world.

Thursday, June 15, 2023

React-How can i edit a product for whitch i use an uploaded image?

I have a site that displays cosmetic products.This is a simplified code. I made a form to post a product , therefore to post a product name and to upload a product image, that works fine,with the simplified code below.I only wrote this code to see that i used form data . The problem is at update the product, at PUT/PATCH.I don't know how to catch the form data. It seems that i cannot acces the image in my php with

$_FILES 

nor with

json_decode(file_get_contents('php://input'),true) 

that return null al PUT/PATCH. Also for product name is the same, i cannot acces it at all. What are some other ideas to catch form data (strings and files) at PUT/PATCH? Thank you!


    const [selectedProductImage, setSelectedProductImage] = useState(null)
    const [productName, setProductName] = useState('')

    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="file" onChange={(e) =>setSelectedProductImage(e.target.files[0]} />
    <input value={productName} type="text" onChange={(event) =>    setProductName(event.target.value)}/>
    <button type="submit" className="btn btn-info">Submit</button>
 </form>
And onSubmit i have:
const handleSubmit = (e) => {
    e.preventDefault()
    const formData = new FormData()
     formData.append('product_image', selectedProductImage)
     formData.append('productName', productName)

     const config = {
            method: 'POST',
            body: formData,
          }
          fetch('http://localhost/site-lucille-1/POST-product.php',config,).
            then(() => { alert('Succes') })         
            
         
}

In my POST-product.php i have:
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Max-Age: 3600');
header('Access-Control-Allow-Headers: Content-Type, Accept');
header('Content-Type: application/json; charset=UTF-8');

$conn = mysqli_connect('localhost', 'root', '', 'site-lucille-1');
if (mysqli_connect_errno()) {
    die('Connection failed: ' . mysqli_connect_error());}
mysqli_set_charset($conn, 'utf8');

function executaPOST($conn){
$response=[]
 $name = $_POST['productName'];

//I put the image in my folder images and save the path that i will put it in my DB 
 if (isset($_FILES['product_image'])) {
        $file = $_FILES['product_image'];
        $uniqueFileName = uniqid() . '_' . $file['name'];
    
        $uploadPath =
            'E:/apliReact/site-lucille-1/public/images/product-images/' .
            $uniqueFileName;
         if (move_uploaded_file($file['tmp_name'], $uploadPath)) {
            $image = '/images/product-images/' . $uniqueFileName;}

}

//Insert the product with the image path in my database:
$stmt = mysqli_prepare(
        $conn,
        'INSERT INTO products(Image,Name) VALUES (?,?)'
    );
 mysqli_stmt_bind_param(
        $stmt,
        'ss',
        $image,
        $name,       
    );
 if (mysqli_stmt_execute($stmt)) {
 $response[] = ['added product with id' => mysqli_stmt_insert_id($stmt)];
}
echo json_encode($response);
}

$metoda = $_SERVER['REQUEST_METHOD'];
switch ($metoda) {
    case 'POST': 
        executePOST($conn);
        break;
}


?>



source https://stackoverflow.com/questions/76476046/react-how-can-i-edit-a-product-for-whitch-i-use-an-uploaded-image

No comments:

Post a Comment