0

I am trying to upload a photo using Ajax so that photo can be posted after clicking of submit button.

Flow: user uploads image -> Ajax call is made to upload photo, user clicks submit -> Post is shown to the user along with photo

Here is my php file for upload image:

            <div class="box-footer">
                <div id='preview' style="max-width:50px;max-height:60px;padding:5px;></div>
                <div id="button_bar">
                    <!-- <div id="icons">
                    <div class="filebutton" title="Image Upload"> -->
                    <form id="imageform" method="post" enctype="multipart/form-data" action='WallPost1/ajax_image.php'>
                        <span><input type="file" name="photoimg" id="photoimg" onchange= PhotoUpload()></span>
                    </form>
                </div>
                <button type="submit" class="btn btn-primary"  id="tweet_submit" onclick=TweetSubmit()>Submit</button>
                </div>
            </div>

Here is my JS code:

            function PhotoUpload(){
                    alert ('got photo');         
                    $("#preview").html('');
                    $("#preview").html('<small>Loading...</small>');
                    $("#imageform").ajaxForm({
                        target: '#preview'
                    }).submit();
            }

Here is my ajax_image.php code

            <?php
            include('includes/dbconnection.php');
            include("session.php");
            $path = "uploads/";
            $valid_formats = array("jpg", "png", "gif","JPG","JPEG","jpeg","PNG");
            if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
            {
                $name = $_FILES['photoimg']['name'];
                $size = $_FILES['photoimg']['size'];
                if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats))
                    {
                        if($size<(1024*1024))
                        {
                            $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;

                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if(move_uploaded_file($tmp, $path.$actual_image_name))
                            {
                                $command="Insert into uploads(image_name) values('$actual_image_name')";
                                if (!mysqli_query($con,$command))
                                {
                                    die('Error: ' . mysqli_error($con));
                                }
                                else
                                {
                                    $msg ="<br> 1 record added";
                                }
                                //echo "-----Images here----".$msg;
                                $query=mysqli_query($con,"Select upload_id,image_name from uploads where image_name='$actual_image_name'"); 
                                $result=mysqli_fetch_array($query);
                                $id=$result['upload_id'];

                                echo "<img src='BootStrapProject/WallPost1/uploads/".$actual_image_name."' class='preview' id='$id'>";          
                            }
                            else
                            echo "failed";
                        }
                        else
                            echo "Image file size max 250k";                    
                    }
                    else
                        echo "Invalid file format..";    
                }

                else
                    echo "Please select image..!";
                exit;
            }
            ?>

Whenever i select a file using the input form, JS is called and i see 'loading...' message on UI but nothing happens after that.

Can somebody help me to understand why my ajax_image.php file is not being called.

Thanks in advance!

Amandeep Singh
  • 297
  • 4
  • 19
  • You need to send the POST request using JavaScript in this case. In your JS code, I don't see the corresponding AJAX POST request. – Maximus2012 Mar 31 '15 at 16:40
  • See if this helps: http://stackoverflow.com/questions/4105211/jquery-ajax-post-to-php – Maximus2012 Mar 31 '15 at 16:41
  • What is `.ajaxForm()`? A jQuery plugin? – D4V1D Mar 31 '15 at 16:46
  • @D4V1D: Yes, this is a plugin. More details can be found at: http://malsup.com/jquery/form/ – Amandeep Singh Mar 31 '15 at 17:06
  • @Maximus2012, I do not think that i need a ajax Post with ajaxForm. It will automatically do that for me. Can you please correct me if i am wrong – Amandeep Singh Mar 31 '15 at 17:08
  • 1
    Maybe the problem lays out in the plugin then. – D4V1D Mar 31 '15 at 17:09
  • Can you possibly use Firebug or Web Developer plugins to track the POST request to see that the values are indeed getting passed to your PHP code ? http://stackoverflow.com/questions/1622457/is-it-possible-to-see-the-data-of-a-post-request-in-firefox-or-chrome http://stackoverflow.com/questions/1350779/to-see-the-content-post-data-trasferred-by-jquery – Maximus2012 Mar 31 '15 at 17:11
  • @Maximus2012, i tried to use chrome developer tool and got following message at the JS call to ajaxForm: TypeError: undefined is not a function Add-WallPost.php:104 PhotoUpload Add-WallPost.php:687 onchange Could this be the problem? if yes, how to rectify it? – Amandeep Singh Mar 31 '15 at 17:17
  • That may be an entirely different error. I am not sure about that. You just need to make sure that the AJAX/JS code is actually sending the POST data to your PHP script. – Maximus2012 Mar 31 '15 at 17:24

1 Answers1

0

I was ale to solve the problem, i beleive the issue was that JQuery library was somehow overridden with older version which did not support ajaxForm.

Thanks for all your valuable inputs.

Amandeep Singh
  • 297
  • 4
  • 19