Uploading to MySQL using input populated by JS?

[Phillips126]

Hey All,

Question - perhaps you can answer this for me... as I'm not as code savvy as I'd like to be.

My site runs the uploadify script for its ease and it works great.
What I have it doing is uploading a single image, changing its name to a unique identifier (instead of the photo name) and then storing just the URL in a database to recall that image later on. Using the JavaScript "onUploadSuccess," I call out for the unique ID that was given to the image and place it in an input field, which will then be used to update the database.

See this image for a reference:
(Please Note - These top 2 fields are normally hidden away).

Ok, looks normal here... Uploading an image and obtaining the unique image ID is demonstrated on this image:

As you can see, the two hidden fields are populated, and the user is asked to fill the rest of the form out and submit it. The PHP code is set to look into the images table on the DB and update the remaining entries where the unique ID matches up.

Here is my PHP:

if (isset($_POST['submit'])) {

$file_id = $_POST['filename'];

$con =  mysql_connect("localhost", "name", "pw") or die(mysql_error());
		mysql_select_db("db") or die(mysql_error());
  
		mysql_query("UPDATE images SET name = '" . $_POST['title']."',
									   info = '" . $_POST['info']."',
									   username = '" . $_POST['username']."' 
									  
									   WHERE id_num = $file_id");
		
		mysql_close($con);
	
}

Here is the form HTML and JS:

<form>
            <div id="queue"></div>
            <input id="file_upload" name="file_upload" type="file">
            
            <input type="text" id="filename" name="filename" required="required" value="" />
            <input type="text" name="username" disabled="disabled" required="required" value="<?php echo htmlentities($username); ?>" />
            
            <label>Image Name</label>
            <input type="text" class="span4" name="title" required="required" />
            
            <label>Description</label>
			<textarea type="text" class="span4" style="height:111px;" name="info" required="required"></textarea>    
            
            <input class="btn btn-primary" type="submit" name="submit" value="UPLOAD" />
                                       
            </form>

<script type="text/javascript">
            <?php $timestamp = time();?>
            $(function() {
            $('#file_upload').uploadify({
                'formData'     : {
                'timestamp' : '<?php echo $timestamp; ?>',
                'token'     : '<?php echo md5('unique_salt' . $timestamp); ?>',
                },
				'multi'				: false,
				'removeCompleted' 	: false,
				'uploadLimit' 		: 1,
				'swf'      			: 'assets/uploadify.swf',
                'uploader' 			: 'uploadify.php',
				'onUploadSuccess' 	: function(file, data, response) {
									  document.getElementById('filename').value=data;
									  javascript:$('#file_upload').uploadify('disable', true);
                                      }
                });
            });
            </script>

If the PHP isn't asked to work until the submit button is pressed, and the field IS populated (even if by JS), why is the data not being seen?

My apologies for the code appearing quite unorganized - it does not look that way in Dreamweaver.

Thanks for your help!

 

[chrishirst]

why is the data not being seen?

No idea, is there any serverside code that does that process?

 

[Phillips126]

My process involves uploading a photo (using uploadify) which instantly uploads the image and renames the image to the current date("U") number (to prevent images from having the same name). I then use the onUploadSuccess command in the uploadify script, see below:

<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadify({
      'formData'     : {
      'timestamp' : '<?php echo $timestamp; ?>',
      'token'     : '<?php echo md5('unique_salt' . $timestamp); ?>',
      },
      'multi'  :  false,
      'removeCompleted'  :  false,
      'uploadLimit'  :  1,
      'swf'  :  'assets/uploadify.swf',
      'uploader'  :  'uploadify.php',
      'onUploadSuccess'  :  function(file, data, response) {
               [COLOR="Red"]document.getElementById('filename').value=data;[/COLOR]
               javascript:$('#file_upload').uploadify('disable', true);
               }
      });
});
</script>

This "onUploadSuccess" retrieves the "data" that is echo'd on the uploadify PHP script if the upload is successful, the data that is being retrieved is the current date("U") timestamp that was used in the naming process. The Javascript finds the field called: "filename" and inserts the correct data("U") that matches the image uploaded. I use that data to match the correct entry in the database and allow the user to enter additional details such as image name and description.

I do that by running this PHP script:

<?php

if (isset($_POST['submit'])) {

$file_id = $_POST['filename'];

$con =  mysql_connect("localhost", "admin", "pw!") or die(mysql_error());
		mysql_select_db("db") or die(mysql_error());
  
		mysql_query("UPDATE images SET name = '" . $_POST['title']."',
									   info = '" . $_POST['info']."',
									   username = '" . $_POST['username']."' 
									  
									   WHERE id_num = $file_id");
		
		mysql_close($con);
	
}

?>

On user submit, it should grab the data from all the fields and finish populating the table row with the "id_num" (timestamp name given to the image that was uploaded) matching the "$file_id" (recalled timestamp that Javascript is placing in the hidden field).

I understand that PHP is read initially by the server, and Javascript is taking place on the client side, but if the form isn't being processed until submitted, and the data in the input field is already populated (even if it was populated by JS), why is PHP not seeing the value that is inserted in the input?

There are no additional steps taking place that I haven't explained in these two posts, so I am a bit baffled... Thanks for any insight you may be able to share.

Thanks!

 

[Phillips126]

Excellent - was able to solve the problem... and feel really stupid about it. Always thinking it was something major, I had forgot to make the form method as post.... /facepalm.

Thanks for the help.