tags:

views:

122

answers:

2

Hi, I am using the Uploadify Plugin to Upload files. although this might be a very basic question i am unable to understand and implement to get it work to upload the files.

I want to achieve the following using uploadify

when a user select the file i want it to be directly uploaded to the target path using PHP.

now i am using the following code.

<html>
<head>
<link rel="stylesheet" href="css/uploadify.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
</head>

<script type="text/javascript">
$(document).ready(function() {
    $('#someID').uploadify({ 
      'uploader': 'img/uploadify.swf',
      'script': 'uploadify.php',
      'folder': 'upload',
      'cancelImg': 'img/cancel.png',
      'auto': 'true',
      'fileDesc': 'jpg/jpeg',
      'displayData': 'percentage',
      'fileExt': "*.jpg;*.jpeg",
      'sizeLimit' : '8388608'
      }); }); 
      </script>

<body>
<form id="someID" action="uploadify.php" method="post" enctype="multipart/form-data"> 
<input type="file" name="file" id="fileUpload1"/>
<p><input type="submit" name="submit" value="Upload" /></p> 
</form>
</body>

and this is the code for uploadify.php

if (!empty($_FILES)) {
    $tempFile = $_FILES['file']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
    $targetFile =  str_replace('//','/',$targetPath) . $_FILES['file']['name'];
    move_uploaded_file($tempFile,$targetFile);
        echo "1";

I just want to upload a single file. do i need to include the check.php for that. how do i make something like when a user select the image file it directly performs the operation and move to the designated directory.

P.S: I have the very basic understanding of javascript and jquery. :)

Note : file uploading problem is solved now.

how do i limit the user from uploading just one file on one button, i want something like when a user select the file and it gets uploaded that button should be disabled or something

EDIT : for limiting the users from uploading multiple file in a button i added this code and it is still uploading many files as and when users select multiple times. here is my code.

<script type="text/javascript">
$(document).ready(function() {
    $('#someID').uploadify({ 
      'uploader': 'img/uploadify.swf',
      'script': 'uploadify.php',
      'folder': 'upload',
      'cancelImg': 'img/cancel.png',
      'auto': 'true',
      'fileDesc': 'jpg/jpeg',
      'displayData': 'percentage',
      'fileExt': "*.jpg;*.jpeg",
      'sizeLimit' : '8388608',
      'fileDataName' : 'file',
      onSelect : function(){
           $("#someID input").attr("disabled", true);
      }
      }); }); 
      </script>

what is wrong with it?

+1  A: 

I was wrangling with this a few weeks ago. You need to change your fileDataName attribute. By default, it is Filedata. You are trying to access it as file in this part: $_FILES['file'].

Either change all instances of $_FILES['file'] to $_FILES['Filedata'] or add this attribute to your $('#someID').uploadify({}); attribute collection: fileDataName:'file'.

If you are looking for a drop-in fix, just make this change in your JavaScript:

$(document).ready(function() {
    $('#someID').uploadify({ 
      'uploader': 'img/uploadify.swf',
      'script': 'uploadify.php',
      'folder': 'upload',
      'cancelImg': 'img/cancel.png',
      'auto': 'true',
      'fileDesc': 'jpg/jpeg',
      'displayData': 'percentage',
      'fileExt': "*.jpg;*.jpeg",
      'sizeLimit' : '8388608',
      'fileDataName' : 'file'
      }); 
}); 

Note the 'fileDataName' : 'file'

To limit a single upload (as long as the page isn't refreshed, of course):

Change your JavaScript to this:

$(document).ready(function() {
    $('#someID').uploadify({ 
      'uploader': 'img/uploadify.swf',
      'script': 'uploadify.php',
      'folder': 'upload',
      'cancelImg': 'img/cancel.png',
      'auto': 'true',
      'fileDesc': 'jpg/jpeg',
      'displayData': 'percentage',
      'fileExt': "*.jpg;*.jpeg",
      'sizeLimit' : '8388608',
      onSelect : function(){
           $("#someID input").attr("disabled", true);
      }}); 
}); 

Just know that if the user refreshes the page, the button will be enabled again allowing them to upload another file. They can also re-enable it manually. So, add a server-side check to make sure that they don't upload another file if you don't want them to.

SimpleCoder
wow, working perfectly, it is moving the file. now how do i limit the user from uploading just one file on one button, i want something like when a user select the file and it gets uploaded that button should be disabled or something
Ibrahim Azhar Armar
I added an example in the answer
SimpleCoder
i tried using the code and it is still able to upload many file. i am updating the code above please take a look. where i am going wrong.
Ibrahim Azhar Armar
Try changing the line `$("#someID input").attr("disabled", true);` to `$("#someID input").remove();`. Now when you upload a file, are the inputs removed? (I'm testing to see if the event fires successfully and if the right things are selected.)
SimpleCoder
nope not working? it is not running that function i guess. :( , i tried changing the form to match the above also wrapped the form around with div id matching above. it is not working at all.
Ibrahim Azhar Armar
Hmmm... try changing `onSelect` to `onProgress`.
SimpleCoder
still not working i tried onComplete too :(
Ibrahim Azhar Armar
You might have noticed that the original file input tag with #someID gets hidden and is replaced by an object when the page is ready. So, I think, when you again try to disable the file #someID it does not work. You have to disable the object instead.
sandeepan
Sorry, I can't spot the problem. Try posting a new question asking about this problem to attract more people.
SimpleCoder
correction in my last comment... "the original file input tag with `#someID` gets hidden and an object with `#fileUploader` is added next to it when the page is ready."check if `$("object#fileUploader").attr("display","none");` works? Then you can insert a faded file upload button there to mimic the file input disabling action. I think that did not work for me. So, I edited the jquery library's code where it inserts the `object#fileUploader`. Instead of adding next to the file input tag, I mafe it to appear inside a `div#holder`. Then I did `$(div#holder").attr(innerHTML,"")`.
sandeepan
Hi guys thanks you for tips and tricks, i did it finally, did something like. onComplete: function(event, queueID, fileObj, reposnse, data) { $('#filesUploaded').append('<a href='+fileObj.filePath+'>'+fileObj.name+'</a><br>'); $("#firstUpload").remove(); }and wrapped the input with that div, now i have the file name printed on screen as well as the button is hidden on completion of the file upload.
Ibrahim Azhar Armar
@Sandeepan Thank you! I knew I was missing something. The object that replaces the button is the Flash uploader
SimpleCoder
@SimpleCoder you are welcome
sandeepan
+1  A: 

Some points to consider:

  1. Checking for the existence of $_FILES is not the proper way to confirm an upload. If an upload fails for any reason (file too large, connection died, out of disk space, etc..), there will STILL be a $_FILES array. You need to do something like \

    if ($_FILES['nameoffield']['error'] === UPLOAD_ERR_OK) instead.

    Error constants are defined here: http://ca.php.net/manual/en/features.file-upload.errors.php

  2. Your path building code as is opens your server completely to a remote file-based takeover: you're blindly using $_REQUEST['folder'] in your path. What if someone subverts the form and sets folder to ../../../../../../../../some/nasty/place/on/your/system?
  3. There's no collision detection, so your script will happily overwrite an existing file with the uploaded one
  4. You don't check if the move_uploaded_file() actually succeeded. It returns boolean FALSE if it couldn't move the file for whatever reason. You just blindly echo out a '1' to inform the client-side javascript that something happened.
Marc B
How would you prevent someone from abusing security hole #2? (No sarcasm intended, I'm just curious). Would you check the path's parent?
SimpleCoder
@Marc, FYI this is my first jquery script and it is purely meant for testing, i do have a code which checks on all sorts of error like (file_exists) just in case, it renames the file before moving, it checks the file dimensions etc etc. am looking for the solution because i want to implement Uploadify in my Custom CMS. BTW thank you for that tip, i learned something out of it.. :)
Ibrahim Azhar Armar
I guess you could just filter `../` from the path?
SimpleCoder
Best is to not let the user specify a path at all. Treat anything the user supplies, including the uploaded file itself, as toxic waste and make sure you're wearing full hazmat gear while working on it.
Marc B