passing php variables with ajax

Question

I've been trying to get php to rename an image in an S3 bucket . There's three stages

1. upload image (you can see a previous question I asked to see my solution to that) I've included the code I used below.
2. Use ajax to take the name I want for a file (the user ID) and pass it to a PHP renaming script.
3. run the renaming script.

Step two is giving me problems. If i hard code the names into the PHP script then it will find the source file and rename it. However I can't get it to rename the files using variables drawn from the page.

Here's the HTML button code

            <input type="file" id="file-chooser" />
        <button onclick= "pass()" id="upload-button">Upload to S3</button>
        <div id="results"></div>

Here's the JS code

    <script type="text/javascript">
                        var bucket = new AWS.S3({params: {Bucket: 'MY BUCKET'}});

                        var fileChooser = document.getElementById('file-chooser');
                        var button = document.getElementById('upload-button');
                        var results = document.getElementById('results');
                                            button.addEventListener('click', function() {


                            var file = fileChooser.files[0];
                            if (file) {
                                results.innerHTML = '';
                            var filename = file.name;
                                var params = {Key: file.name, ContentType: file.type, Body: file};
                                bucket.upload(params, function (err, data) {

                                    results.innerHTML = err ? 'ERROR!' : 'UPLOADED';
                                    ajax_post();
                                });
                            } else {
                                results.innerHTML = 'Nothing to upload.';
                            }
                        }, false);

                        function pass() {
                            $.get("test.php");
                            return false;
                        }

                        function ajax_post() {
var ref = new 

Firebase("https://MY FIREBASE .firebaseio.com/");
            var authData = ref.getAuth();

                            // Create our XMLHttpRequest object
                            var fileChooser = document.getElementById('file-chooser');
                            var file = fileChooser.files[0];
                            var filename = file.name;
var userID = authData.uid;


                            var userID = USERS USER ID;
                            //alert($(this).attr('id'));
                            $.ajax({
                                type: "POST",
                                url: 'test.php',
                                data:  { userID : userID },
                                data: { filename : filename },
                                success: function (data) {
                                    alert("success!");
                                }
                            };
                            pass();
                        }

                    </script>

Here's the PHP.

    <?php
require 'vendor/autoload.php';
use Aws\S3\S3Client;


$sourceBucket = "MY BUCKET";
$sourcename1 = $_POST['filename'];
$targetKeyname = $_POST['userID'];
$targetBucket = "MY BUCKET";


$s3 = S3Client::factory(array(
    'key'    => "MY KEY",
    'secret' => "MY SECRET KEY"
));

$s3->copyObject(array(
    'Bucket'     => $targetBucket,
    'Key'        => $targetKeyname,
    'CopySource' => "{$sourceBucket}/{$sourcename}",
));

?>

EDITING TO ADD I've been running test after test. If I hard code the variables into the PHP file it works. If I hard code the variables into the JS script it fails. The ajax is running the php file it's just not passing the variables to it. I've tried with and without the ISSET on the PHP side it just fails to take in the variables each time.

Any ideas?

Answer 1

I suspect this is your issue var userID = USERS USER ID; I'm not sure where that information is coming from. But without seeing the html/js where that is derived from, its difficult to determine the problem.

If its text input with an id of userID, it should be something like:

<input type="text" name="userID" id="userID">

js:

var userID = $("#userID").val();

AJAX Update

merge BOTH data into one object:

                        data:  { userID : userID },
                        data: { filename : filename },

will become

data:  { userID : userID , filename : filename },

Answer 2

I found out what the issue was. It was Firebase. Firebase was returning the values I required however the PHP script was retrieving an error from AWS. I had assumed that the AJAX was failing to pass the value on but I was only half right. the AJAX failed because it didn't have the value at that point. I added in a 3 second delay before the upload occurs and it works fine. Firebase was just slower than the PHP.