PHP/jQuery problem with upload script [Archive]

walkie

12-17-2010, 12:40 PM

Hi,

I'm having some fun with a PHP/jQuery upload script i've found.
The script actually works just fine, but it can only upload to one specific folder. I want it to be able to upload to a folder that is defined in the adress (like: www.domain.com/index.php?dir=folder_name).

My problem is that i don't know how to transfer $_GET['dir'] through the jQuery function and on to the PHP file (to the variable $uploaddir), that executes the actual upload.

Here you can see the script:

------------------------------------------------------------------------

upload.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" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="js/jquery.swfupload.js"></script>
<script type="text/javascript">

$(function(){
$('#swfupload-control').swfupload({
upload_url: "upload-file.php",
file_post_name: 'uploadfile',
file_size_limit : "5120",
file_types : "*.jpg;*.png;*.gif",
file_types_description : "Image files",
file_upload_limit : 50,
flash_url : "js/swfupload/swfupload.swf",
button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
button_width : 114,
button_height : 29,
button_placeholder : $('#button')[0],
debug: false
})
.bind('fileQueued', function(event, file){
var listitem='<li id="'+file.id+'" >'+
'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
'<div class="progressbar" ><div class="progress" ></div></div>'+
'<p class="status" >Pending</p>'+
'<span class="cancel" > </span>'+
'</li>';
$('#log').append(listitem);
$('li#'+file.id+' .cancel').bind('click', function(){
var swfu = $.swfupload.getInstance('#swfupload-control');
swfu.cancelUpload(file.id);
$('li#'+file.id).slideUp('fast');
});
// start the upload since it's queued
$(this).swfupload('startUpload');
})
.bind('fileQueueError', function(event, file, errorCode, message){
alert('Size of the file '+file.name+' is greater than limit');
})
.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
})
.bind('uploadStart', function(event, file){
$('#log li#'+file.id).find('p.status').text('Uploading...');
$('#log li#'+file.id).find('span.progressvalue').text('0%');
$('#log li#'+file.id).find('span.cancel').hide();
})
.bind('uploadProgress', function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
})
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id);
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
var pathtofile='<a href="photos/'+file.name+'" target="_blank" >view »</a>';
item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
})
.bind('uploadComplete', function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload('startUpload');
})

});

</script>

</head>
<body>

<h3>» Picture upload</h3>

<div id="swfupload-control">
<input type="button" id="button" />
<p id="queuestatus" ></p>
<ol id="log"></ol>
</div>

</body>
</html>

------------------------------------------------------------------------

upload-file.php

<?php
$uploaddir = './photos/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']);
$size=$_FILES['uploadfile']['size'];
if($size>5242880)
{
echo "error file size > 5 MB";
unlink($_FILES['uploadfile']['tmp_name']);
exit;
}
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
echo "success";
} else {
echo "error ".$_FILES['uploadfile']['error']." --- ".$_FILES['uploadfile']['tmp_name']." %%% ".$file."($size)";
}
?>

-------------------

Thanks in advance,

Morten

Rowsdower!

12-17-2010, 02:15 PM

upload-file.php:

<?php
//$uploaddir = './photos/'; //skip this static setting and set it dynamically instead
$uploaddir = './'.$_GET['dir'].'/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']);
$size=$_FILES['uploadfile']['size'];
if($size>5242880)
{
echo "error file size > 5 MB";
unlink($_FILES['uploadfile']['tmp_name']);
exit;
}
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
echo "success";
} else {
echo "error ".$_FILES['uploadfile']['error']." --- ".$_FILES['uploadfile']['tmp_name']." %%% ".$file."($size)";
}
?>

This is the general idea once you get the variable set in your form and submit it to your PHP script.

Now it must be said that a great deal of input validation of the directory requested must be done on the server side to prevent directory traversing or other abuses by unfriendly users entering strings of text designed to upload a file to a directory that you didn't intend to make available to them for upload.

I haven't reviewed your script in full, but you should also make sure that a user cannot upload a php file to your server and then execute it as that would be a major security hole. Same goes for pretty much any type of file OTHER than an image file. Do this check on the server side because the client side (javascript) checks can be easily defeated (or a user can simply make their own page somewhere else and submit their form to your upload script). The point is, never trust your users and ALWAYS validate your data on the server side. Javascript validation is for user convenience only - not for security.

Anyway, the code above is the very shortest route to get the PHP doing what you have asked about. It's not secure until after you have cleansed the input, but it's the general idea of what you need to do.

Are you having trouble with the javascript as well?