Ajax Form Error submitting an image

Question

I'm having a difficult time trying to make AJAX edit changes when the form is submitted on the same page and make the changes appear, but the image throws error: Undefined index: image in update.php on line 22 and 24. It refuses to pass the values.

Form (editForm.php):

<div class="modal-content editDisplay">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  <h4 class="modal-title" id="editModalLabel">Edit Item</h4>
</div>
<form class="editForm" method="post" enctype="multipart/form-data">
  <div class="modal-body">
        <div class="form-group">
            <label for="inputName">Name</label>
            <input type="text" class="form-control" id="inputName" name="Product_Name" placeholder="Name" value="<?php echo $product ?>">
            <input type="hidden" name="oldProduct" value="<?php echo $oldProduct ?>">
        </div>
        <div class="form-group">
            <label for="inputDescription">Description</label>
            <textarea class="form-control" id="inputDescription" name="Description" placeholder="Description"><?php echo $description ?></textarea>
        </div>
        <div class="form-group">
            <label for="inputPrice">Price</label>
            <input type="text" class="form-control" id="inputPrice" name="Price" placeholder="Price" value="<?php echo $price ?>">
        </div>
        <div class="form-group">
            <label for="inputQuantity">Quantity</label>
            <input type="number" class="form-control" id="inputQuantity" name="Quantity" placeholder="Quantity" value="<?php echo $quantity ?>">
        </div>
        <div class="form-group">
            <label for="inputSalePrice">Sale Price</label>
            <input type="text" class="form-control" id="inputSalePrice" name="Sale_Price" placeholder="Sale Price" value="<?php echo $salePrice ?>">
        </div>
        <div class="form-group">
            <label for="inputImage">Image Upload</label><br>
            <fieldset class="file-fieldset">
                <span class="btn btn-default btn-file">
                    <span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Browse Browse <input name="image" type="file" id="inputImage"/><br>
                </span>
                <input type="hidden" name="prevPicture" value="<?php $image ?>"/>
                <span style="margin-left:8px;" value=""><?php echo $image ?></span>

            </fieldset>
        </div>
  </div>
  <div class="modal-footer">
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary" id="saveButton" name="update">Save Changes</button>
  </div>
 </form>
</div>

PHP (update.php):

<?php

include('connection.php');
include('LIB_project1.php');

$productName = $_POST['Product_Name'];
$productDescription = $_POST['Description'];
$price = $_POST['Price'];
$quantity = $_POST['Quantity'];
$salePrice = $_POST['Sale_Price'];
$oldImage = $_POST['prevPicture'];
$oldProduct = $_POST['oldProduct'];


//$productName = 'Jaime';
//$productDescription = 'This is crazy';
//$price = '0';
//$quantity = '12234';
//$salePrice = '0';
//$oldImage = $_POST['prevPicture'];
//$oldProduct = $_POST['oldProduct'];
$imageName= $_FILES['image']['name']; //TODO line 22
echo ' The image is '.$imageName;
$image_temp = $_FILES['image']['tmp_name']; // line 24
echo 'Product name is: '.$productName;

//$productName = 'Dodo Square';
//$productDescription = 'Flower on a Bee. Such Beauty!';
//$price = 9;
//$quantity = 8;
//$salePrice = 230;
//$newImage = '038.jpg';
//$oldProduct = 'Times Square';

//working under the assumption that the image already exist in the database
$targetDirectory = 'productImages'; 
$files = scandir($targetDirectory,1);
//code passed
for($i=0; $i<sizeof($files); $i++)
{
    if($oldImage==$files[$i])
    {
        unlink('productImages/'.$oldImage);
    }
}

$target = "productImages";

//add the image to the directory
$target = $target.'/'.$imageName;
move_uploaded_file($image_temp,$target);  

updateProduct($conn,'product',':productName', ':productDescription', ':price', ':quantity', ':imageName', ':salePrice',                          'Product_Name', 'Description', 'Price', 'Quantity', 'Image_Name', 'Sale_Price', $productName, $productDescription, $price, $quantity,$imageName, $salePrice, $oldProduct, ':oldProduct');
//header('location:admin.php');

?>

updateProduct(...)

/*
 * This is a function to update Product
 * 
 */
 function updateProduct(PDO $connection,$table,$bindProductName, $bindProductDescription, $bindPrice, $bindQuantity, $bindImageName, $bindSalePrice,$productNameColumn, $productDescriptionColumn, $priceColumn, $quantityColumn, $imageNameColumn, $salePriceColumn,                                    $productName, $productDescription, $price, $quantity, $imageName, $salePrice, $oldProduct, $bindOldProduct)
 {
     $result = false;

     $sql = 'UPDATE ' . $table . ' SET ' . $productNameColumn . ' = ' . $bindProductName . ',' . $productDescriptionColumn . ' = ' .                            $bindProductDescription . ',' . $priceColumn . ' = ' . $bindPrice . ',' . $quantityColumn . ' = ' . 
       $bindQuantity . ',' . $salePriceColumn . ' = ' . $bindSalePrice . ',' . $imageNameColumn . ' = ' . $bindImageName . ' WHERE ' .                      $productNameColumn . ' = ' . $bindOldProduct;

    $smtp = $connection->prepare($sql);
    $smtp -> bindParam($bindProductName, $productName);
    $smtp -> bindParam($bindProductDescription, $productDescription);
    $smtp -> bindParam($bindPrice, $price);
    $smtp -> bindParam($bindQuantity, $quantity);
    $smtp -> bindParam($bindImageName, $imageName);
    $smtp -> bindParam($bindSalePrice, $salePrice);
    $smtp -> bindParam($bindOldProduct, $oldProduct);

    if($smtp->execute() )
    {
        $result = true;
    }

    return $result;
}

AJAX (display edited changes) Problem: Need to submit those edited changes

 $(document).ready(function() 
 {
           //the user click save edit
   $(".edit").on("submit",function(e)
   { 
       e.preventDefault();
       $.ajax({
            type:"POST",
            url:'update.php', //I will put project id here as well
            data:$(".editForm").serialize(),
            success:function(smsg)
            {
                alert(smsg);
               //update the number of items the user has in their shopping cart
                $.get('admin.php',function(data){
                $('#refresh').load("admin.php #refresh");
                    //alert('success');
                });
            }
        });


   });


   });

Plus, what's this `updateProduct($conn,'product',':productName', ':productDescription', ':price', ':quantity', ':imageName', ':salePrice', 'Product_Name', 'Description', 'Price', 'Quantity', 'Image_Name', 'Sale_Price', $productName, $productDescription, $price, $quantity,$imageName, $salePrice, $oldProduct, ':oldProduct');`? You also have quotes around your binds. If you're using PDO, remove the quotes for the binds. Yet, it's really hard to say what your query is or should be. — Funk Forty Niner, Oct 04 '14 at 19:36
Thanks for the fix, but I still get the error. `updateProduct()` is a function to reuse when updating a product. — TheAmazingKnight, Oct 04 '14 at 19:40
You're welcome. You have `var url='editForm.php?';` shouldn't that be `var url='update.php?';` ? — Funk Forty Niner, Oct 04 '14 at 19:56

score 1 · Answer 1 · answered Oct 04 '14 at 20:12

Add a series of tests to your PHP and you'll figure it out quite quickly yourself.

You are already alerting the response sent by the PHP ajax processor file:

alert(smsg);

So, use that to troubleshoot/diagnose where things are going wrong.

First test can be to put a "I got here" message at the top of the PHP file -- at least then you know the ajax itself is working. So, modify the top of update.php to read:

<?php
echo "Got to here";
die();

If that alerts, then get rid of the die() and echo out a few more such tests at various places in the file. Use this method to narrow down the location (in the PHP file) of the error.

Echo out the data received so you know what is coming in. Modify update.php to be:

$productName = $_POST['Product_Name'];
$productDescription = $_POST['Description'];
$price = $_POST['Price'];
$quantity = $_POST['Quantity'];
$salePrice = $_POST['Sale_Price'];
$oldImage = $_POST['prevPicture'];
$oldProduct = $_POST['oldProduct'];

echo "$productName: " .$productName. " -- $productDescription: " .$productDescription. " - etc etc etc";
die();

I'm sure you'll find the error pretty quick -- certainly quicker than composing a detailed SO question and awaiting the answer...

Good luck!

score 1 · Accepted Answer · answered Oct 04 '14 at 20:23

var inputImage = $("#inputImage");
var fd = new FormData(document.getElementById("editform")); 

fd.append("image", inputImage);

$.ajax({
    url: "",
    type: "POST",
    data: fd,
    processData: false, 
    contentType: false, 
    success: function(response) {

    }
});

By default the image is not being added to the form during your post, you need to get the entire form and append the image to it before sending it. I did this for asp.net, it should work for php too though.

score 1 · Answer 3 · edited May 23 '17 at 11:56

1

Maybe it's because the image never send to server via ajax, so $_FILES have nothing under 'image' index. Take a look at how to do file upload using jquery serialization

or consider to use FormData object.

edited May 23 '17 at 11:56

Community

1
1

answered Oct 04 '14 at 20:29

alquist42

739
1
8
21

score 0 · Answer 4 · answered Oct 04 '14 at 19:40

0

Change <input name="image" type="file" id="inputImage"/ to <input name="image" type="file" id="inputImage"/>

answered Oct 04 '14 at 19:40

Harutyun Abgaryan

2,013
1
12
15

Fixed, but still the same problem. Updated Post. – TheAmazingKnight Oct 04 '14 at 19:45
Yes i can help you :) – Harutyun Abgaryan Oct 04 '14 at 19:51
Harutyun Abgaryan, the update function is working perfectly well. I tested it independently by giving each variables values and they were correctly posted in the database. – TheAmazingKnight Oct 04 '14 at 20:04

Ajax Form Error submitting an image

4 Answers4