Upload file then generate hidden form field

skyer2000

Here is a basic example implementation of taking a file upload, generating a random filename, then posting back to the page in a hidden form field (with the filename as the value). I'm using it in an email form to attach links to the email body, but I'm sure there are more uses for this.

Modfied upload_name.php ->

<?php

if (!empty($_FILES)) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
	
	$ext = pathinfo($_FILES['Filedata']['name'], PATHINFO_EXTENSION);  //figures out the extension
	
	$newFileName = md5($tempFile).'.'.$ext; //generates random filename, then adds the file extension
	$targetFile =  str_replace('//','/',$targetPath) . $newFileName;

	move_uploaded_file($tempFile,$targetFile);
}

if ($newFileName)
	echo $newFileName;
else // Required to trigger onComplete function on Mac OSX
	echo '1';

?>

And here is an example of the call ->


$(\"#picupload\").fileUpload({
		'uploader': 'scripts/upload/uploader.swf',
		'cancelImg': 'scripts/upload/cancel.png',
		'script': 'scripts/upload/upload_name.php',
		'folder': 'files',
		onComplete: function (evt, queueID, fileObj, response, data) {
			$(\"#uploadedpics\").append(\"<input type='hidden' name='pic' value='\" + response + \"' />\"); //adds hidden form field to uploadedpics div
			$(\"#picupload_div\").empty(this).append(\"<h3>Image Successfully Uploaded</h3>\"); //clears browse button, replaces with success message
		},
	});

And the HTML ->


<form>
<div id=\"picupload_div\">    
        <p><label for=\"file\">Image:</label> <input type=\"file\" name=\"picupload\" id=\"picupload\" /></p>
</div>

<div id=\"uploadedpics\">
<!-- hidden form field posts to here -->
</div>

</form>

Let me know if you have any questions!

genu

you can take the md5 directly of $tempFile = $_FILES['Filedata']['tmp_name'] without the rand(), because the temp file name is already unique. At least thats that I figured when I was testing...

skyer2000

Great idea, I've updated the original code above to reflect that. It will at least add some speed to the script.

On a large site I would add some collision detection in there. If it detects a collision, then it would generate a md5 of rand() or timestamp.

angieluckyd

doesnt work for me?

angieluckyd

Hey I already had the echo in my php and it still isnt working. Heres what my php looks like

<?php

include \"config.php\";
if (!empty($_FILES)) {
   $tempFile = $_FILES['Filedata']['tmp_name'];
   $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
   
   $ext = pathinfo($_FILES['Filedata']['name'], PATHINFO_EXTENSION);  //figures out the extension
   
   $newFileName = md5($tempFile).'.'.$ext; //generates random filename, then adds the file extension
   $targetFile =  str_replace('//','/',$targetPath) . $newFileName;

   move_uploaded_file($tempFile,$targetFile);
 
   echo $newFileName;
else // Required to trigger onComplete function on Mac OSX
   echo '1';

}

?>

Heres my 'Javasctipt

<script type=\"text/javascript\" src=\"javascript/jquery.js\"></script>
<script type=\"text/javascript\" src=\"javascript/jquery.uploadify.js\"></script>
<script type=\"text/javascript\">
$(document).ready(function() {
	$(\"#fileUpload\").fileUpload({
		'uploader': 'uploader.swf',
		'cancelImg': 'images/cancel.png',
		'folder': 'uploads',
		'script': 'upload.php',
                'buttonText': 'Select File',
                'displayData': 'percentage',
'onComplete': function(event, queueID, fileObj, reposnse, data) {
     $('#filesUploaded').append('<a href='+fileObj.filePath+'>'+fileObj.name+'</a><br>');
}
     

       });
	
});
</script>

I do not know where the mistakes are but ive done everything i can the file still comes back as the original file and the renamed file gets coppied to the server and does not come back as that renamed file. I need it so that people are able to click on the file to download

TravisN.

You need to use "response" not fileObj.name

fileObj.name is the name of the file as selected in the browse window. "response" is what you echo in the upload script

niurexx

is ther any chance to use this with multiple file upload ?

rallport

niurexx said:
is ther any chance to use this with multiple file upload ?

Yes, you'd need to use an array to name the hidden fields E.g. name="field[]" and then loop through the posted array using a key => value stype foreach loop. I wrote an entry about this in my blog - see sig

chris_b

Hi, Im new here and having an issue. i made that changes to my files but when i select the file to upload (NAME.flv) it shows that it's being uploaded and I get the success message but then in the task bar it returns a JavaScript error 'NUL is NUL or not an object, the file dosent upload and when i look in my source it dosent write the hidden field. here is my code. Any help would be great! Thanks in advance

PHP file upload_name.php


if (!empty($_FILES)) {
   $tempFile = $_FILES['Filedata']['tmp_name'];
   $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
   
   $ext = pathinfo($_FILES['Filedata']['name'], PATHINFO_EXTENSION);  //figures out the extension
   
   $newFileName = md5($tempFile).'.'.$ext; //generates random filename, then adds the file extension
   $targetFile =  str_replace('//','/',$targetPath) . $newFileName;

   move_uploaded_file($tempFile,$targetFile);
}

if ($newFileName)
   echo $newFileName;
else // Required to trigger onComplete function on Mac OSX
   echo '1';

JavaScript


$(document).ready(function() {
	$(\"#uploadify\").uploadify({
		'uploader'       : 'videos/uploader/scripts/uploadify.swf',
		'script'		 : 'videos/uploader/scripts/upload_name.php',
		'cancelImg'      : 'videos/uploader/cancel.png',
		'folder'         : 'videos/uploads',
		'queueID'        : 'fileQueue',
		'auto'           : true,
		'multi'          : false,
      onComplete: function (evt, queueID, fileObj, response, data) {
         $(\"#videpath\").append(\"<input type='hidden' name='FLV_url' id='flv' value='\" + response + \"' />\"); //adds hidden form field to uploadedpics div
         $(\"#fileQueue\").empty(this).append(\"<span class='uploaded'>Upload successfully! Go to step #2</span>\"); //clears browse button, replaces with success message
		},
	});
});

HTML


<div id=\"fileQueue\"><input type=\"file\" name=\"uploadify\" id=\"uploadify\" /></div>
<div id=\"videopath\"> </div>

chris_b

ok so I got the file to upload but it didnt change the file name, I changed this line in upload_name.php


   $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';

to


   $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';

I changed $_GET to $_REQUEST then the file was uploaded but agian it dosent change the file name to a random name, not sure how to fix this

chris_b

all worked out, took me all night but it works now.

carl.carter

Hi Guys

I have used this script to not only write a hidden field with the image value but also to set the image value for a url to show the uploaded thumbnail. I am new to php but my Heath Robinson approach nearly works. The only issue I have is the that the image does not display and it seems that the response received from the PHP page looks okay but the first few characters or sometimes just one isnt right. If I paste the filename into a notepad and also paste the response they are slightly different in that the first few characters are smaller in the response. I tried encoding the url to see what happen and it looks like there are a few extra characters in the returned response as I get %BE%BB etc.

If I paste the image name from windows explorer into firebug then the image displays okay. It looks like there is something happening to the value of my response from the php script into the page.

Hope this makes sense.

my html


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Uploadify Example Script</title>
<link href=\"css/default.css\" rel=\"stylesheet\" type=\"text/css\" />
<link href=\"css/uploadify.css\" rel=\"stylesheet\" type=\"text/css\" />
<script type=\"text/javascript\" src=\"scripts/jquery-1.3.2.min.js\"></script>
<script type=\"text/javascript\" src=\"scripts/swfobject.js\"></script>
<script type=\"text/javascript\" src=\"scripts/jquery.uploadify.v2.1.0.min.js\"></script>

<script type=\"text/javascript\">
    $(document).ready(function () {
        $(\"#uploadify\").uploadify({
            'uploader': 'scripts/uploadify.swf',
            'script': 'scripts/uploadname.php',
            'cancelImg': 'cancel.png',
            'folder': 'uploads',
            'queueID': 'fileQueue',
            'auto': true,
            'multi': true,
            'buttonText': 'Get Image',
            'onComplete': function (evt, queueID, fileObj, response, data) {
             
                var imgURL = 'http://localhost/catthumbs/' + response ;


                $(\"#uploadedpics\").append(\"<input type='hidden' name='pic' value='\" + response + \"' />\"); //adds hidden form field to uploadedpics div
                $(\"#picupload\").empty(this).append(\"<h3>Image Successfully Uploaded</h3>\"); //clears browse button, replaces with success message
                $(\"#thumb\").append(\"<img src='\" + imgURL + \"' >\");

            }
        });

    });
</script>
</head>

<body>


<div id=\"fileQueue\"></div>
<input type=\"file\" name=\"uploadify\" id=\"uploadify\" />
<div id=\"uploadedpics\"></div>
<div id=\"picupload\"></div>
<div id=\"thumb\"></div>
</body>
</html>

My php file:


<?php


$myPath = \"C:\\Pageflex\\Studio7.5\\Projects\\BizCard\\Images\\\";

if (!empty($_FILES)) {
   $tempFile = $_FILES['Filedata']['tmp_name'];
   $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
   //$targetPath = $myPath;
   
   $ext = pathinfo($_FILES['Filedata']['name'], PATHINFO_EXTENSION);  //figures out the extension
   
   $newFileName = md5($tempFile).'.'.$ext; //generates random filename, then adds the file extension
   //$targetFile =  str_replace('//','/',$targetPath) . $newFileName;
   $targetFile =  $myPath . $newFileName;

   move_uploaded_file($tempFile,$targetFile);
}

//NEW BIT

$imgsize = getimagesize($targetFile);
switch(strtolower(substr($targetFile, -3))){
    case \"jpg\":
        $image = imagecreatefromjpeg($targetFile);    
    break;
    case \"png\":
        $image = imagecreatefrompng($targetFile);
    break;
    case \"gif\":
        $image = imagecreatefromgif($targetFile);
    break;
    default:
        exit;
    break;
}

$width = 80; //New width of image    
$height = $imgsize[1]/$imgsize[0]*$width; //This maintains proportions

$src_w = $imgsize[0];
$src_h = $imgsize[1];
    

$picture = imagecreatetruecolor($width, $height);
imagealphablending($picture, false);
imagesavealpha($picture, true);
$bool = imagecopyresampled($picture, $image, 0, 0, 0, 0, $width, $height, $src_w, $src_h); 

if($bool){
    switch(strtolower(substr($targetFile, -3))){
        case \"jpg\":
            header(\"Content-Type: image/jpeg\");
            //$bool2 = imagejpeg($picture,$myPath.\"Thumbs/\".$_FILES['Filedata']['name'],80);
            $bool2 = imagejpeg($picture,$myPath.\"Thumbs/\".$newFileName);
        break;
        case \"png\":
            header(\"Content-Type: image/png\");
            imagepng($picture,$myPath.\"Thumbs/\".$_FILES['Filedata']['name']);
        break;
        case \"gif\":
            header(\"Content-Type: image/gif\");
            imagegif($picture,$myPath.\"Thumbs/\".$_FILES['Filedata']['name']);
        break;
    }
}

imagedestroy($picture);
imagedestroy($image);



//echo '1'; // Important so upload will work on OSX
//END NEW BIT

if ($newFileName)
   echo $newFileName;
else // Required to trigger onComplete function on Mac OSX
   echo '1';

?>

Hope this makes sense

Howdy, Stranger!

Categories