Unable to Upload the file using Uploadify script

Question

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?

Chris Laplante · Accepted Answer · 2010-09-04 22:27:44Z

3

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.

edited Sep 4, 2010 at 22:27

answered Sep 4, 2010 at 22:10

Chris Laplante

29.7k18 gold badges109 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Ibrahim Azhar Armar Over a year ago

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

Chris Laplante Over a year ago

I added an example in the answer

Ibrahim Azhar Armar Over a year ago

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.

Sandeepan Nath Over a year ago

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 Nath Over a year ago

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,"").

|

Marc B · Accepted Answer · 2010-09-04 22:45:25Z

1

Some points to consider:

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
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?
There's no collision detection, so your script will happily overwrite an existing file with the uploaded one
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.

answered Sep 4, 2010 at 22:45

Marc B

362k44 gold badges433 silver badges508 bronze badges

4 Comments

Chris Laplante Over a year ago

How would you prevent someone from abusing security hole #2? (No sarcasm intended, I'm just curious). Would you check the path's parent?

Ibrahim Azhar Armar Over a year ago

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.. :)

Chris Laplante Over a year ago

I guess you could just filter ../ from the path?

Marc B Over a year ago

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.

Collectives™ on Stack Overflow

Unable to Upload the file using Uploadify script

2 Answers 2

11 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related