I’m currently working on an file manager that will be integrated with the content management system software that we developed. In doing this, I’ve been looking for a solution that would allow users to upload multiple files at once, does so in a very easy to use way and shows a progress bar. For this project, I don’t really need to interact with ASP.NET at all for a database, so I can look at some of the JavaScript & Flash solutions that are out there. The solution that I eventually settled on was Uploadify. The tool is actually a combination of Flash and JQuery. It’s very customizable in the functionality that it offers as well as the design of the system.
I was at first concerned because the solution only supports PHP, however members of the Uploadify development community have developed a replacement server-sidescript that will replace the “upload.php” file with a .NET version. You can find that code on their forums here.
Here’s what Uploadify looks like in action:
Implementing Uploadify
Getting Started:
So how do we implement Uploadify? It’s actually easier than many JQuery modules that are out there. The first thing you’ll need is the Uploadify Core that can be downloaded from the Uploadify website. You can also download code for several examples of implementations of code. The core it self comes with a PDF manual as well.
Script References:
You’ll need to reference the latest version of the JQuery Core was well as the Uploadify JavaScript file:
<link rel="stylesheet" href="uploadify/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.js"></script>
Making a Placeholder:
You’ll need a placeholder DIV that the script can use to draw the upload tool on the page somewhere in the <BODY> tag:
<div id="fileUpload1"></div>
Calling the Script:
Now, all we need to do is call the uploader when the page loads:
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload1").fileUpload({
'uploader': 'uploadify/uploader.swf',
'cancelImg': 'uploadify/cancel.png',
'script': 'uploadify/upload.php',
'folder': 'files',
'multi': true,
'buttonText': 'Select Files',
'checkScript': 'uploadify/check.php',
'displayData': 'speed',
'simUploadLimit': 2
});
});
</script>
That’s all it really takes to implement Uploadify. You might want to modify some of the settings in it to customize the uploader to your needs, but it’s a really great solution.
Here are some common options that you can play with in the settings:
- “CheckScript” and “Script” -> Be sure to change these if you are using the .NET solution
- sizeLimit -> Limit the file size of the upload (in bytes)
- Height & Width -> Change the dimensions of the container DIV
- fileExt -> Limit the type of file extensions that you allow.
- ButtonText & ButtonIMG -> Customize the look of the upload button
- There’s a full list in the Uploadify Website
Can you please help me with processing multiple uploaded files inside the backend script (upload.php)?
I'm able to do single upload and process the file, but cannot figuring the multiple files processing.
I've tried with reading the files from $_FILES array, but no luck.
I receive the error "$ is not defined" for the "$(document).ready(function() {" line in Firefox.
Have you actually tried to RUN the asp version?
Perhaps a run down of how you made that work?
Otherwise this page is useless. Users can just go to uplodify website and waste time reading there.
$ is not defined in firefox
and in all other browsers…
I figured out the $ is not defined error…
This was happening to me because I was using two javascript frameworks at the same time. e.g. jquery and mootools. There are some solutions to using two frameworks at once but I ended up just using jquery and removing mootools. This solved my problem.
Mathew,
To get this to work in joomla, what file did you place the "Script References" that you listed above in?
Do you have to modify joomla's index.php? or the just your default templates' index.php with the script references?
also, is the uploadify directory hosted in your root dir within joomla core?
Can you then put the placeholder div code () into an article and then link to that article through a menu item for this to work, as long as you dont have an editor strip it?
Just trying to get an exact method of step by step modifications made to get this working in joomla. Someone needs to make it into an extension already. 😉
Thanks for your help.
Scott
I'd guess that you'd want to place the script references in the template file's header. I would guess that you could put the other code inside of an article.
Still can't get this to work in Joomla. =(
Please advise in more of a step by step approach.
Step 1) Upload and unarchive the uploadify package to /uploadify (within joomla core).
Step 2) Go to template manager in Joomla Admin panel and select the default template you wish to modify..
Click "Edit HTML"
Add this exact line of code in your between your tags:
Add this exact line of code somewhere in your tag:
Click Save
Step 3) Create a new article
Insert exact code:
$(document).ready(function() {
$("#fileUpload1").fileUpload({
'uploader': 'uploadify/uploader.swf',
'cancelImg': 'uploadify/cancel.png',
'script': 'uploadify/upload.php',
'folder': 'files',
'multi': true,
'buttonText': 'Select Files',
'checkScript': 'uploadify/check.php',
'displayData': 'speed',
'simUploadLimit': 2
});
});
Click Save.
Step 4) Go to menu manager and create a new "Article Layout" menu item on your mainmenu titled "Upload Files" and direct it to the article that you created in Step 3)
*** This above described method isn't working currently and I am posting this just to show how I tried to implement the Uploadify script and failed, looking to find the correct approach so if you have this working in Joomla, please explain your approach in this manner.
Thanks for your help.
For everyone who is trying to get jQuery to work in Joomla, did you either disable Mootools or run jQuery in "no Conflict" mode?
Basically, conflicts are caused by both Mootools and jQuery sharing the $ namespace. Mootools is notorious for not being a "good neighbor" and the result is a clash. jQuery however has a "no conflict" mode which allows it to work with other frameworks.
I'm about to launch a site where I use jQuery extensively in the frontend, and it has been a bit of headache since Joomla developers (for reasons I cannot understand) force Mootools on you in the frontend. In the end, I installed a special free plugin (which actually handles jQuery and "no conflict"). So far, so good.