Question

I am working on a piece of code that I am wanting to “spice” up with jQuery but I can’t think of a way to actually make it work. I am sure its simple, I just need a little advice to get me going.

I am wanting to create a piece of code that makes an Ajax request out to start a big loop that will download files and then upload them to an S3 bucket of mine. The place where I am stuck is I am wanting to send back a request back to the browser everytime a file is uploaded and output a string of text to the screen upon completion.

I don’t have any of the frontend code working… just trying to get my head wrapped around the logic first… any ideas?

PHP Backend Code:

<?php
    public function photos($city) {
        if(isset($city))
            $this->city_name = "{$city}";

        // grab data array from Dropbox folder
        $postcard_assets = $this->conn->getPostcardDirContent("{$this->city_name}", "Photos", TRUE);
        $data = array();

        foreach($postcard_assets['contents'] as $asset) {
            //only grab contents in root folder... do not traverse into sub folders && make sure the folder is not empty
            if(!$asset['is_dir'] && $asset['bytes'] > 0) {
                // get information on file
                $file = pathinfo($asset['path']);

                // download file from Dropbox
                $original_file = $this->conn->downloadFile(str_replace(" ", "%20", $asset['path']));

                // create file name
                $file_name = $this->cleanFileName($file['basename']);

                // write photo to TMP_DIR ("/tmp/photos/") for manipulation
                $fh = fopen(self::TMP_DIR . $file_name, 'w');
                fwrite($fh, $original_file);
                fclose($fh);

                // Resize photo
                $this->resize_photo($file_name);

                // hash file name
                $raw_file = sha1($file_name);
                // create S3 hashed name
                $s3_file_name = "1_{$raw_file}.{$file['extension']}";
                // Upload manipulated file to S3
                $this->s3->putObject($s3_file_name, file_get_contents(self::TMP_DIR . $file_name), $this->photo_s3_bucket, 'public-read');

                // check to see if file exists in S3 bucket
                $s3_check = $this->s3->getObjectInfo($s3_file_name, $this->photo_s3_bucket);

                // if the file uploaded successully to S3, load into DB
                if($s3_check['content-length'] > 0) {
                    $data['src'] = $s3_file_name;
                    $data['width'] = $this->width;
                    $data['height'] = $this->height;
                    Photo::create_postcard_photo($data, "{$this->city_name}");
                    // Now that the photo has been uploaded to S3 and saved in the DB, remove local file for cleanup
                    unlink(self::TMP_DIR . $file_name);
                    echo "{$file_name} uploaded to S3 and resized!<br />";
                }
            }
        }
        // after loop is complete, kill script or nasty PHP header warnings will appear
        exit();
    }
?>

Answer 1

The main problem is that with PHP, the output is buffered so it won’t return a line at a time. You can try and force the flush but it’s not always reliable.

You could add an entry to the DB for each file that is exchanged and create a seperate API to get the details of what has completed.

Generally, Jquery will wait till the request has finished before it allows you to manipulate data from a HTTP request.