Help with some Javascript please for newby on upload script

Hi All,

Not sure if anyone can help, I know php but just started learning javascript, very basic, I am using a script for my site for uploading photos, JQuery File Upload Plugin Script - Uploadify I have it working fine but there is just one option I want to do and that is write to a text document the name of the picture, I know javascript cant itself write to a file but I was wondering if you can insert php in a javascript bit of code.

The documentation for uploadify says that its a funtion for the option here is the link to the documentation onComplete - Uploadify

and the exsample code they give is

    $('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'multi'       : true,
      'onComplete'  : function(event, ID, fileObj, response, data) {
          alert('There are ' + data.fileCount + ' files remaining in the queue.');
        }
    });

I know the above exsample would put an allert box up but just wondered if there is a way to get the code to run some php

I hope this makes sence

Thanks in advance

There is actually no need for any extra code in the javascript, all you need to do is add the code to the uploadify.php file. See the example code below that i wrote quickly…

<?php

if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
    $targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
    
    $fp = fopen('yourfile.txt', 'a+');
    fwrite($fp, $targetFile, strlen($targetFile));
    fclose($fp);
    
    move_uploaded_file($tempFile,$targetFile);
    echo str_replace($_SERVER['DOCUMENT_ROOT'],'',$targetFile);
}

?>

Hi mate your a star, should have looked at doing that first thank you so much

No problem

Sorry just one more question on the same script i am trying to pass some form data back to the backend uploadify.php script using a scriptdata but not working just wondered if anyone can help

the code i have on the upload page is

<script type="text/javascript" src="Upload/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Upload/swfobject.js"></script>
<script type="text/javascript" src="Upload/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#file_upload').uploadify({
    'uploader'  : 'Upload/uploadify.swf',
    'script'    : 'Upload/uploadify.php',
    'cancelImg' : 'Upload/cancel.png',
    'folder'    : 'NewGallery/photos',
    'auto'      : false,
	'multi'       : true,
	'queueID'        : 'Que',
	'method'      : 'POST',
	'scriptData' : {'NameGuest': '<?php echo $_POST["NameGuest"]; ?>'}
  });
});
</script>

and on the uploadify.php page i use $somevar=$_POST[“NameGuest”];

but its not pulling the data from the form.

any help would be great

Does the index NameGuest exist on the page your trying to embed it for use on? I ask because your using a $_POST request to get the index value which confuses me.

Now I think I might have confused myself as I have been reading various posts and thought that the post would get the data from a form that I could use in php on uploadify.php

Sent from my iPhone using Tapatalk

My Full code is

Main Page with upload form

<script type="text/javascript" src="Upload/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Upload/swfobject.js"></script>
<script type="text/javascript" src="Upload/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#file_upload').uploadify({
    'uploader'  : 'Upload/uploadify.swf',
    'script'    : 'Upload/uploadify.php',
    'cancelImg' : 'Upload/cancel.png',
    'folder'    : 'NewGallery/photos',
    'auto'      : false,
	'multi'       : true,
	'queueID'        : 'Que',
	'method'      : 'POST',
	'scriptData' : {'NameGuest': '<?php echo $_POST["NameGuest"]; ?>'}
  });
});
</script>

<form id="form1" name="form1" method="post" action="">

<input name="NameGuest" type="text" id="NameGuest" size="50" />

<input id="file_upload" name="file_upload" type="file" />

<a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>
</form>

And the uploadify.php files is

<?php
if (!empty($_FILES)) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
	$targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];


	$fileParts  = pathinfo($_FILES['Filedata']['name']);
	$fileExt = '.'.$fileParts['extension'];
	
	$tfn = 0;
	while(is_file($targetFile)) {
		$targetFile = str_ireplace($fileExt, '', $targetFile);
		$targetFile = str_ireplace('['.$tfn.']', '', $targetFile);
		$tfn++;
		$targetFile = $targetFile.'['.$tfn.']'.$fileExt;
	}
		$fp = fopen('captions.txt', 'a+');
		$guestname=$_POST["NameGuest"];
		$createdfile = substr_replace($targetFile, "", 0, 64)."|Photo By ".$guestname."\
";
		fwrite($fp,$createdfile,strlen($createdfile));
		fclose($fp);
		
		move_uploaded_file($tempFile,$targetFile);
		
		echo "1";

}

	
?>

any help would be great

Sorry i confused you, the part I’m talking about is the following

'scriptData' : {'NameGuest': '<?php echo $_POST["NameGuest"]; ?>'}

Here you have a $_POST request but you didn’t state where the index NameGuest comes from as there is nothing in your code to suggest to me that the upload form was accessed via another form.

I might have it all wrong myself, I thought that the data would be taken from the standard form In the code

Sent from my iPhone using Tapatalk

<form id=“form1” name=“form1” method=“post” action=“”>

<input name=“NameGuest” type=“text” id=“NameGuest” size=“50” />

Sent from my iPhone using Tapatalk

Sorry i was completely missing the form element in the code, guess I’m going blind at just 20. What you can do to set the name is the following, first create an event handler for the name input like the below example…

$('[name="NameGuest"]').keyup(function() {
    if (!$(this).val().length) {
        alert('Please enter your name!');
    } else {
        uploadifySD.NameGuest = $(this).val();
        $('#file_upload').uploadifySettings('scriptData', uploadifySD);
    }
});

Essentially with the following event we can dynamically update the uploadify scriptData values in real time, the next thing we need to do is update the form and code a little as in my head we only want the form to upload the file(s) if a name is entered. See the example code below on how to achieve this…

<form id="form1" name="form1" method="post" action="">
    <input name="NameGuest" type="text" id="NameGuest" size="50" />
    <input id="file_upload" name="file_upload" type="file" />
    <a href="#upload-files">Upload Files</a>
</form>
$('a[href*="upload-files"]').click(function(e) {
    e.preventDefault();
    
    if ($('[name="NameGuest"]').val().length) {
        $('#file_upload').uploadifyUpload();
    } else {
        alert('Please enter your name!');
    }
});

The final thing we need to do is update the uploadify code you already have so it uses a global var to dynamically set the NameGuest value.

var uploadifySD = {NameGuest: ''};

$('#file_upload').uploadify({
    'uploader'   : 'Upload/uploadify.swf',
    'script'     : 'Upload/uploadify.php',
    'cancelImg'  : 'Upload/cancel.png',
    'folder'     : 'NewGallery/photos',
    'auto'       : false,
    'multi'      : true,
    'queueID'    : 'Que',
    'method'     : 'POST',
    'scriptData' : uploadifySD
});

Essentially by the end your javascript should look something like

$(function() {
    var uploadifySD = {NameGuest: ''};
    
    $('#file_upload').uploadify({
        'uploader'   : 'Upload/uploadify.swf',
        'script'     : 'Upload/uploadify.php',
        'cancelImg'  : 'Upload/cancel.png',
        'folder'     : 'NewGallery/photos',
        'auto'       : false,
        'multi'      : true,
        'queueID'    : 'Que',
        'method'     : 'POST',
        'scriptData' : uploadifySD
    });
    
    $('[name="NameGuest"]').keyup(function() {
        if (!$(this).val().length) {
            alert('Please enter your name!');
        } else {
            uploadifySD.NameGuest = $(this).val();
            $('#file_upload').uploadifySettings('scriptData', uploadifySD);
        }
    });
    
    $('a[href*="upload-files"]').click(function(e) {
        e.preventDefault();
    
        if ($('[name="NameGuest"]').val().length) {
            $('#file_upload').uploadifyUpload();
        } else {
            alert('Please enter your name!');
        }
    });
});

Thanks for all this will give it a go when I get to my pc, I really appreciate all your help, I guess I am going to start to learn JavaScript, I have the books I better start reading :slight_smile:

Sent from my iPhone using Tapatalk

No problem, the main reason i know so much about Uploadify is because i myself have used it but on a much more advanced level :slight_smile:

You shouldnt have told me that, you can bet I have a 100 more questions coming :slight_smile:

Sent from my iPhone using Tapatalk

I have just used the code and it works perfect THANK YOU THANK YOU

Your welcome :slight_smile: