How to Upload Files with CodeIgniter and AJAX?
Uploading files asynchronously with CodeIgniter can be confusing and frustrating experience. In this tutorial I will share the steps how I successfully implemented a file upload with CodeIgniter and ajax.
You need CodeIgniter, jQuery, and the script AjaxFileUpload which you can copy from bottom of this tutorial.
It's assumed you have a working knowledge of CodeIgniter and jQuery. But no prior knowledge of AjaxFileUpload is necessary. It is also assumed that you already have successfully set up CodeIgniter. For the sake of brevity and clarity, we are not going to use database to save file information.
Step 1. Creating a form
Create your view and name it upload.php. This view will contain our upload form.
Then, we created a standard HTML form. The empty #files div is where the confirmation/failure message will be displayed.
Step 2. Custom Javascript
Create custom.js inside 'js' folder and Place the following code:
We then check our return (which will be in JSON). Depending on the status(success/error), we display message.
Step 3. Uploading a File
The Controller
The URL we are uploading to is /upload/upload_file/, so create a new method in the upload controller, and place the following code in it.
Files Folder
We should also create the folder our files will be uploaded to. Create new file in your web root called 'uploads', making sure it is writable by the server.
That's it, tutorial complete! If you run it, you should be able to upload a file, see it appear, all without leaving the page.
Note: I haven't added displaying, editing and deleting files.
Goodies:
Copy and paste the following javascript code and save as ajaxfileupload.js.
Reference site: http://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684
You need CodeIgniter, jQuery, and the script AjaxFileUpload which you can copy from bottom of this tutorial.
It's assumed you have a working knowledge of CodeIgniter and jQuery. But no prior knowledge of AjaxFileUpload is necessary. It is also assumed that you already have successfully set up CodeIgniter. For the sake of brevity and clarity, we are not going to use database to save file information.
Step 1. Creating a form
Create your view and name it upload.php. This view will contain our upload form.
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="<?php echo base_url()?>js/custom.js"></script> <script src="<?php echo base_url()?>js/ajaxfileupload.js"></script> </head> <body> <h1>Upload File</h1> <form method="post" action="" id="upload_file"> <label for="userfile">File</label>At the top; jQuery, AjaxFileUpload, and our own custom javascript files are loaded.
<input type="file" name="userfile" id="userfile" size="20" /> <input type="submit" name="submit" id="submit" /> </form> <h2>Files</h2> <div id="files"></div> </body> </html>
Then, we created a standard HTML form. The empty #files div is where the confirmation/failure message will be displayed.
Step 2. Custom Javascript
Create custom.js inside 'js' folder and Place the following code:
$(function() {
$('#upload_file').submit(function(e) {
e.preventDefault();
$.ajaxFileUpload({
url :base_url + './upload/upload_file/',
secureuri :false,
fileElementId :'userfile',
dataType: 'JSON',
success : function (data)
{
var obj = jQuery.parseJSON(data);
if(obj['status'] == 'success')
{
$('#files').html(obj['msg']);
}
else
{
$('#files').html('Some failure message');
}
}
});
return false;
});
});
The JavaScript hijacks the form submit and AjaxFileUpload takes over. In the background, it creates an iframe and submits the data via that.We then check our return (which will be in JSON). Depending on the status(success/error), we display message.
Step 3. Uploading a File
The Controller
The URL we are uploading to is /upload/upload_file/, so create a new method in the upload controller, and place the following code in it.
public function upload_file()
{
$status = "";
$msg = "";
$file_element_name = 'userfile';
if ($status != "error")
{
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png|doc|txt';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = FALSE;
$this->load->library('upload', $config);
if (!$this->upload->do_upload($file_element_name))
{
$status = 'error';
$msg = $this->upload->display_errors('', '');
}
else
{
$data = $this->upload->data();
$image_path = $data['full_path'];
if(file_exists($image_path))
{
$status = "success";
$msg = "File successfully uploaded";
}
else
{
$status = "error";
$msg = "Something went wrong when saving the file, please try again.";
}
}
@unlink($_FILES[$file_element_name]);
}
echo json_encode(array('status' => $status, 'msg' => $msg));
}
This code loads in the CodeIgniter upload library with a custom config. Remember to delete the temp file off the server, and echo out the JSON so we know what happened.Files Folder
We should also create the folder our files will be uploaded to. Create new file in your web root called 'uploads', making sure it is writable by the server.
That's it, tutorial complete! If you run it, you should be able to upload a file, see it appear, all without leaving the page.
Note: I haven't added displaying, editing and deleting files.
Goodies:
Copy and paste the following javascript code and save as ajaxfileupload.js.
jQuery.extend({
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
if(window.ActiveXObject)
{
if(typeof uri== 'boolean'){
iframeHtml += ' src="' + 'javascript:false' + '"';
}
else if(typeof uri== 'string'){
iframeHtml += ' src="' + uri + '"';
}
}
iframeHtml += ' />';
jQuery(iframeHtml).appendTo(document.body);
return jQuery('#' + frameId).get(0);
},
createUploadForm: function(id, fileElementId, data)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
if(data)
{
for(var i in data)
{
jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}
}
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
},
ajaxFileUpload: function(s) {
// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = new Date().getTime()
var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
// Watch for a new set of requests
if ( s.global && ! jQuery.active++ )
{
jQuery.event.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {}
if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
// Wait for a response to come back
var uploadCallback = function(isTimeout)
{
var io = document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
}else if(io.contentDocument)
{
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if ( xml || isTimeout == "timeout")
{
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
// Make sure that the request was successful or notmodified
if ( status != "error" )
{
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );
// If a local callback was specified, fire it and pass it the data
if ( s.success )
s.success( data, status );
// Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
{
status = "error";
jQuery.handleError(s, xml, status, e);
}
// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] );
// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" );
// Process result
if ( s.complete )
s.complete(xml, status);
jQuery(io).unbind()
setTimeout(function()
{ try
{
jQuery(io).remove();
jQuery(form).remove();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
}, 100)
xml = null
}
}
// Timeout checker
if ( s.timeout > 0 )
{
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
}
try
{
var form = jQuery('#' + formId);
jQuery(form).attr('action', s.url);
jQuery(form).attr('method', 'POST');
jQuery(form).attr('target', frameId);
if(form.encoding)
{
jQuery(form).attr('encoding', 'multipart/form-data');
}
else
{
jQuery(form).attr('enctype', 'multipart/form-data');
}
jQuery(form).submit();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
jQuery('#' + frameId).load(uploadCallback );
return {abort: function () {}};
},
uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" )
eval( "data = " + data );
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
return data;
}
})
If you are looking for delete and display features, you can find in below tutorial.Reference site: http://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684
How to add file name to database.
ReplyDeleteyour code works fine now only i need to add progress bar please help
ReplyDeleteits not working for me it showing $.ajaxFileUpload is not a function
ReplyDelete
ReplyDeleteI think I have never seen such blogs before that have completed things with all the details which I want. So kindly update this ever for us.
Digital Marketing Training Institutes in Hyderabad
Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end…
ReplyDeleteDevOps Training in Hyderabad
Title:
ReplyDeleteNo.1 Oracle DBA Training in Chennai | Infycle Technologies
Description:
Learn Oracle Database Administration for making your career towards a sky-high with Infycle Technologies. Infycle Technologies gives the top Oracle DBA Training in Chennai, in the 200% hands-on practical training with professional specialists in the field. In addition to that, the placement interviews will be arranged for the candidates, so that, they can set their career towards Oracle without any struggle. The specialty of Infycle is 100% placement assurance will be given here in the top MNC's. To have the best career, call 7502633633 and grab a free demo to know more.
Best training in Chenai
I have voiced some of the posts on your website now, and I really like your blogging style. I added it to my list of favorite blogging sites and will be back soon ...
ReplyDeleteData Analytics Course in Bangalore
Description:
ReplyDeleteWant to get Oracle Certification with the job opportunities? Infycle is with you for this! Infycle Technologies gives the most trustworthy training for the Oracle Certification in Chennai, which will be guided by professional tutors in the field. Along with that, the mock interviews will be assigned for the candidates, so that, they can meet the job interviews with full confidence. To transform your career to the next level, call 7502633633 to Infycle Technologies and grab a free demo to get more.
Best software training in Chennai
ReplyDeleteThank you so much for doing the impressive job here, everyone will surely like your post.
data scientist certification malaysia
Your work is very good and I appreciate you and hopping for some more informative posts
ReplyDeletedata scientist certification malaysia
Very informative message! There is so much information here that can help any business start a successful social media campaign!
ReplyDeleteBusiness Analytics Course in Kolkata
Acquire a firm grounding in the theory of Data Science by signing up for the Data Science courses in Bangalore. Master the relevant skills along with all the essential tools and techniques of Data Science. Get to avail benefits like Flexible timings, Best industry trainers, and a meticulously crafted curriculum with hands-on projects that will give you exposure to a real-world working environment.
ReplyDeleteData Science Course in Bangalore with Placement
Gain expertise in the relevant and current practices, challenges, and research involved in the field of Data Science. Learn all the skills from non-coding essentials to data science and machine learning by enrolling in the Data Science course in Bangalore. Using real data sets across a range of domains enhances your skills in supervised and unsupervised learning, neural networks, sampling techniques, support vector machines, and more. Get certified in Data Science to get one step ahead towards a lucrative career.
ReplyDeleteBest Data Science Training institute in Bangalore
The step-by-step tutorials and code snippets shared in this blog post make it easier to implement data analytics techniques.data analytics course in chennai.
ReplyDelete