[eluser]Merolen[/eluser]
I've been trying to make SWFUpload to work with CI as well. After using this post and the wiki entry as a startingpoing I've got a working sample.
Here is my experience:
I've used both the handler.js, swfupload.js, main.css and the images from the demo. I've used absolute path, guess it works fine with relative as well. This is put within the <head> tags:
Code:
<link rel="stylesheet" type="text/css" href="/absolute/path/to/css/default.css" />
<script type="text/javascript" src="/absolute/path/to/handlers.js"></script>
<script type="text/javascript" src="/absolute/path/to/swfupload.js"></script>
Then the SWFUpload initialization, this is copied from the demo. Note that this has to be within the <head> tags. Here I've given the URL, the demo uses relative path. But this works for me:
Code:
var swfu;
window.onload = function () {
swfu = new SWFUpload({
// Backend Settings
upload_url : "http://www.mysite.com/upload/do_upload",
flash_url : "http://www.mysite.com/path/to/swfupload_f9.swf",
// Don't think this is needed
post_params: {"PHPSESSID": "<?php echo session_id(); ?>"},
// File Upload Settings
file_size_limit : "2048", // 2MB
file_types : "*.jpg",
file_types_description : "JPG Images",
file_upload_limit : "0",
// Event Handler Settings - these functions as defined in Handlers.js
// The handlers are not part of SWFUpload but are part of my website and control how
// my website reacts to the SWFUpload events.
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
custom_settings : {
upload_target : "divFileProgressContainer"
},
// Debug Settings
debug: false
});
}
Now the code in the controller. My class is called upload and the function is called do_upload, the function must not be confused with CI's own do_upload function which is used inside our own do_upload. The most important thing to notice here is the echo at the bottom. If nothing is echoed the upload will just hang. The echo is the way to send information to the handler.js. Here the filename is echoed so that the image can be shown when the upload is finished.
Code:
class Upload extends Controller {
function Upload() {
parent::Controller();
$config['upload_path'] = './relative/to/root/upload';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '1000';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$this->load->library('upload', $config);
}
function do_upload() {
$this->upload->do_upload('Filedata');
$res = $this->upload->data();
echo $res['file_name'];
}
}
And now to the view file which will show the upload button
Code:
<div style="margin: 0px 10px;">
<form>
<button id="btnBrowse" type="button" style="padding: 5px;" onclick="swfu.selectFiles(); this.blur();">
Select Images <span style="font-size: 7pt;"></span></button>
</form>
</div>
<div id="divFileProgressContainer" style="height: 75px;"></div>
<div id="thumbnails"></div>
</div>
So the handler.js. You want to have a look at the function uploadSuccess where the AddImage function is called. Change the 'thumbnail.php?id=' + server_data to '/path/to/your/pic/' + server_data. Server_data is what we echoed in the do_upload function. Also just scroll through the file to change the text messages and gif urls.
For debugging I echoed information from $this->upload->data(); and wrote alert(server_data) before the AddImage function is called in uploadSuccess.
Remember to fix the mime-type in system/application/config/mimes.php and add 'application/octet-stream'. Some say that this may be a security risk, I don't know, but it has to be done for it to work.
Code:
'jpeg' => array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'jpg' => array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'jpe' => array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'png' => array('image/png', 'image/x-png', 'application/octet-stream'),
I hope this helps.
