Tutorial: How to Implement Uploadify into an Application
Last week I showed how to implement Jcrop into an application. In this tutorial – which also pulls from my experiences developing GetSimple – I implement the jQuery plugin Uploadify.
In this tutorial, we create a simple file upload script that also displays an unordered list of the files in the upload directory. The list of files refreshes via an ajax call every time Uploadify processes a queue.
Demo
View the demo or download the files
The Basic HTML
<h2>Uploadify Application Demo <span id="loader"><img src="img/loading.gif" alt="Loading..." /></span></h2>
<div id="sidebar">
<!-- form to be replaced by uploadify -->
<form id="mainftp" action="upload.php" method="post" enctype="multipart/form-data">
<p><input type="file" name="file" id="file" /></p>
<p><input type="submit" name="submit" value="Upload" /></p>
</form>
</div>
<!-- whole div to be refreshed once uploadify is finished -->
<div id="allfiles" >
<?php
//list all files via function file included up top
$handle = @opendir($src_folder) or die("Unable to open $src_folder");
ListDir($handle,$src_folder);
?>
</div>The PHP
//folder where the files are stored at
//you may need to chmod this folder to 775 or 777 for it to work
$src_folder = 'files/';
//file that includes the function to list all files in ul
include("inc/file_list.php");
//if javascript is disabled, the ftp will still work
if (isset($_FILES["file"])) {
if ($_FILES["file"]["error"] > 0) {
$error = 'Error Uploading!';
} else {
$count = '1';
$file_loc = $path . $_FILES["file"]["name"];
$base = $_FILES["file"]["name"];
while ( file_exists($file_loc) ) {
$file_loc = $path . $count.'-'. $_FILES["file"]["name"];
$base = $count.'-'. $_FILES["file"]["name"];
$count++;
}
move_uploaded_file($_FILES["file"]["tmp_name"], $file_loc);
}
}The jQuery
$('#mainftp').uploadify({
'uploader' : 'js/uploadify/uploadify.swf',
'script' : 'js/uploadify/uploadify.php',
'multi' : true,
'auto' : true,
'height' : '32',
'width' : '250',
'buttonImg' : 'img/browse.png',
'cancelImg' : 'img/cancel.png',
'folder' : 'files/',
onProgress: function() {
$('#loader').show();
},
onAllComplete: function() {
$('#loader').hide();
$('#allfiles').load(location.href+" #allfiles>*","");
}
});Notes about this javascript:
- Uploadify was unzipped directly from the download on their site. To upgrade, simply replace the js/uploadify/ folder with the newer version.
- height and width are for the respective dimentions of your custom button image – the demo’s being in img/browse.png
- folder is the location where the files will be uploaded to. This is also the folder that should be listed on line #3 of the PHP code above in the $src_folder variable.
- $(‘#loader’).show(); and $(‘#loader’).hide(); start and stop the loading gif that many applications use now to show that something is being uploaded/processed.
- $(‘#allfiles’).load(location.href+” #allfiles>*”,”"); – replaces the whole div with the id of allfiles with and updated listing with the newly uploaded files in it
October 19th, 2009 @ 10:40 am
Ey! How do I increase the accepted filesize?
October 19th, 2009 @ 12:48 pm
@simen – There are two filesizes you need to worry about. The first is limit within Uploadify. This can be set with adding the variable
'sizeLimit' : '51200',to the script… say right below the ‘folder’ option.The second is the PHP installation limit. Sometimes you can’t control this, but you can get that value with the command
<?php echo ini_get('upload_max_filesize'); ?>. You can also try and set it inside your PHP script like this:<?php ini_set('max_upload_filesize', 8388608); ?>– 8MBOctober 29th, 2009 @ 12:38 pm
Hi
How do you get an error to show in the form? i.e. if the filesize is too big or the file extension is not permitted?
Many Thanks
Kris
November 8th, 2009 @ 11:45 pm
Hi,
How do i connect it to mysql? Can’t seems to get this right.
November 30th, 2009 @ 5:52 am
I am having problems when adding your jQuery code. It gives me the following error:
$(“#mainftp”) is null.
anonymous()
anonymous()
anonymous([function(), function(), function()], function(), Object name=F)
anonymous()
anonymous()
Could you help me?
December 7th, 2009 @ 10:12 am
@Jeroen – Do you have the HTML part of this tutorial setup the same? I ask because jQuery can’t find #mainftp, and that is the ID i place on the <form> element inside the “HTML” step.
December 9th, 2009 @ 3:37 am
Is the form tag necessary to get this done?
I only have a div tag where the input file tag is included and I add in my javascript file the above jquery code.
When I load the page my input file tag disappears!
What’s going on?
In general, I want to upload a file to my server without refreshing the page. Does the uploadify supports that?
thanks
December 9th, 2009 @ 5:39 am
How can i get the name of the file that was upload from your script?
Many thanks
George
December 9th, 2009 @ 7:28 am
@chzigkol – i consider the form tag necessary if the user doesn’t have javascript enabled. I think it’s just good practice, but you are right – a simple div would work too.
What is an “input file tag”? I’m a little confused… and yes, the example demo doesn’t do a page refresh, but still updates the file list.
December 9th, 2009 @ 7:29 am
@George – do you mean to use in a PHP fnction? the filename is
$file_loc, in JS, i would have to play around and see, i’m not sure off handDecember 9th, 2009 @ 7:42 am
basically i would like to have another form in the page that will save the name of the file that was uploaded, along with some other fields(for example ‘Image Title’) in the database. is that possible?
Thanks
December 9th, 2009 @ 12:13 pm
@chris cagle
this is the input file
Upload File
this is my js code
$('#pictureuri').uploadify({ 'uploader' : 'path to uploadify.swf', 'script' : 'path to uploadify.php', 'cancelImg' : 'img/cancel.png', 'folder' : 'path to my folder', });The uploadify browse button is appeared, the file that is selected is also appeared on my screen underneath the browse button. When I click on the Upload File link the progress bar comes alive. But when the upload is finished the file isn’t actually uploaded on my server.
I can’t find out where I do wrong.
December 9th, 2009 @ 12:17 pm
In my last comment the input type=’file’ is missing. Well it is nothing special. It is a regular one with id=pictureuri
December 10th, 2009 @ 6:02 pm
so it’s not a jquery problem – you get the uploadify button. My guess is file permissions. At the top of the PHP code is
$src_folder = 'files/';Does that folder exist on your server?
December 16th, 2009 @ 7:26 am
Hi.
Can You tell me what I have to do to show the upload button?
Everything works fine but if I change ‘auto’: false, and try to upload the files manually i can’t because upload buttom doesn’t appear.
I’m using Your demo files.
And thanks for tut. It’s great.
statquo
December 16th, 2009 @ 7:33 am
Problem looks like this
http://img32.imageshack.us/img32/8576/problemmc.jpg
How can I add there a upload button?
Thanks for help ;)
December 16th, 2009 @ 7:49 am
OK, I think I solved the problem for now :P
I add
<a href="$('#mainftp').uploadifyUpload();" rel="nofollow">Upload Files</a>after the form and it works fine on the localhost. We’ll see after online :)
Thanks for the tut. It helps a lot a noobs like me :)
statquo
December 17th, 2009 @ 3:09 am
Hello again :)
Well online it doesn’t work ;(
After upload it’s saying HTTP error.
I haven’t found any solution for this so it’s the end of the road for me I and have to use something else.
Did You have that problem and solved it?
Thanks
statquo
January 17th, 2010 @ 7:04 pm
The list does update once Uploadify processes a queue as this tutorial says it should.
January 18th, 2010 @ 4:53 am
http://www.cagintranet.com/code/uploadify-app/upload.php
heloo>>>>> any try to use it on IE
it dosen’t work
help us to solve this on IE
January 18th, 2010 @ 4:06 pm
@snow: I will try and look at it… but honestly, I dont use IE
@Brahm: I just tested it and it is working on my demo again. The problem was that there were too many files to refresh properly… Ive since instituted a cleanup function after the list exceeds 5 files. Thanks for pointing this out.
January 26th, 2010 @ 6:22 pm
hey, i’ve looked for this over the uploadify documentation, but can’t find how to do it.
how do i hide the browse button, i.e. the flash object? is there a way to do that?
besides, i’d like to know if i can call the browse dialog from javascript, sort of a $(‘mainftp’).browse() call… hope you can help me and thanks in advance
February 6th, 2010 @ 10:51 am
I love it!
but it would be perfect if it worked in IE..
February 11th, 2010 @ 12:01 pm
Hy,
I’ve a question.
I’ve a page called upload.asp that allow me to do the upload of the files, writing down the files on a db., and other things.
This page run thanks an other page (xxx.asp)that I post down:
Code
Here I’wuold use jquery.uploadify. Now:I’m not able to add at your cod this part: ENCTYPE=”multipart/form-data”.
Is it possible? How can I configure it?
thanks
February 11th, 2010 @ 12:02 pm
Code;
FORM METHOD=”POST” ENCTYPE=”multipart/form-data” ACTION=”upload.asp”
INPUT TYPE=FILE NAME=”uploadify”
INPUT TYPE=SUBMIT VALUE=”Upload!”
/FORM
February 12th, 2010 @ 11:22 am
Hi,
Has a solution been found to display the browse button in Internet Exlporer?
February 24th, 2010 @ 6:59 am
Can you please make this to work in IE?
Would be really helpfull!