In this post we will explain a little what it is and how we can use SWFUpload library in our application made with the php framework CodeIgniter, so that, our users can upload their files to the application in an elegant and visual way, and all combined with safety and ease that CodeIgniter offers for uploading files to the server.
What is SWFUpload?
SWFUpload is a library that allows to our website’s users to upload files to the server, using a combination of Flash and JavaScript.
Including SWFUploader in CodeIgniter
First we need to integrate the library is to download it, obviously. We will need to download the files “core” and “samples”. Once we have downloaded it and unzipped it, we can create a folder in the root directory of your CodeIgniter application called swf/, and inside this folder, we will create another folder called swfupload/, so that the path to our library SWFUpload is /swf/swfupload/. In this last directory we are going to place the files “swfupload.swf” and “swfupload_fp9.swf” (the latter for users with Flash Player 9) that we find in the folder “core”. Well with this we already have the swfs in place.
Now need the JavaScript files. To do this, we create a folder called swfupload/ in the “js” directory of your application. There we are going to place the files “handlers.js”, “fileprogress.js” and “swfupload.js” that we downloaded with the samples of the library, which you can find in the “demo/formsdemo” folder, since our post is based on the uploading of a single file with the form, but the library allows us to upload multiple files and other varied options available at usage examples.
Finally, we have to put the file upload_flash_button_61x22.png into our “img” directory at the root of our application.
With this we have everything we need to upload files to our site. Now, we move on to the form view.
The form
Once we have downloaded everything needed and we have got everything in place, we can move on to creating our view of the form to upload the file. It will have some different types of fields and a field for uploading the file itself. It is important to note that although we will upload a file, the SWFUpload does not need any form field type “file”. Instead, we place a text field in which SWFUpload will place the file name afterwards. Let’s create a view file in our “application/views” directory:
<?php echo form_open('process_form/process');
// Here we put the controller's URL and the function which will process the form?>
<div>
<?php
echo form_label('File:','file');
$data = array( 'id' => 'txtFileName',
'value' => '',
'size' => 50,
'disabled' => 'disabled',
'style' => 'border: solid 1px; background-color: #FFFFFF;');
echo form_input($data); //Insert the text field which will hold the file anem once it is uploaded
?>
<span id="spanButtonPlaceholder"></span>
(20 MB max)
</div>
<div id="fsUploadProgress"></div>
<input type="hidden" name="hidFileID" id="hidFileID" value="" />
<br />
<?php
$extra = 'id="btnSubmit"';
echo form_submit('upload','Send',$extra);
echo form_close();
?>
<!-- Add JavaScript files for SWFUpload -->
<script type="text/javascript" src="<?php echo base_url();?>js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/swfupload/handlers.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/swfupload/fileprogress.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function () {
swfu = new SWFUpload({
// Backend settings
upload_url: "<?php echo base_url();?>process_form/upload",
file_post_name: "resume_file",
// Flash file settings
file_size_limit : "20 MB", //File size limit
file_types : "*.jpg", // or you could use something like: "*.doc;*.wpd;*.pdf",
file_types_description : "Image Files",
file_upload_limit : 0,
file_queue_limit : 1,
// Event handler settings
swfupload_loaded_handler : swfUploadLoaded,file_dialog_start_handler: fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
//upload_start_handler : uploadStart, // I could do some client/JavaScript validation here, but I don't need to.
swfupload_preload_handler : preLoad,
swfupload_load_failed_handler : loadFailed,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// Button Settings
button_image_url : "<?php echo base_url();?>img/upload_flash_button_61x22.png",
button_placeholder_id : "spanButtonPlaceholder",
button_width: 61,
button_height: 22,
// Flash Settings
flash_url : "<?php echo base_url();?>swf/swfupload/swfupload.swf",
flash9_url : "<?php echo base_url();?>swf/swfupload/swfupload_fp9.swf",
custom_settings : {
progress_target : "fsUploadProgress",
upload_successful : false
},
// Debug settings
debug: false
});
};
</script>
With this we have the file upload form that users will see on our site.
The controller
Now we are going to implement the controller that will manage the processing of the form and contains the function that will perform the file upload. We will use the CodeIgniter’s uploading library. Our code would look something like this:
<?php
class process_form extends Controller {
public function process()
{
...
//Here we take the file's name
$file_name = $this->input->post('hidFileID');
//Once we have the file's name, we could insert into the database
//or whatever is needed
...
}
public function upload()
{
$config['upload_path'] = "path/to/the/folder/for/the/file/";
$config['allowed_types'] = 'jpg';
$size_mb = 20; //Max file size allowed in MB
$config['max_size'] = $size_mb * 1024; //
$this->load->library('upload');
$this->upload->initialize($config);
if (!$this->upload->do_upload('resume_file'))
{
$this->data["params"]["error"] = array('error_upload' => $this->upload->display_errors());
echo $this->upload->display_errors();
}
else
{
$uploaded_file = $this->upload->data();
//Return to the form the final name of the file once it was uploaded
echo $uploaded_file["file_name"];
}
}
}
With this, we would have created our controller to process the data sent within the form and, also, the function responsible for uploading the files sent by SWFUpload. As a final result, we have integrated in CodeIgniter the library for uploading files with a progress bar.