Jump to content


This topic is now archived and is closed to further replies.


CodeIgniter Ajax File Upload Problem

Recommended Posts


I have written a mechanism to upload a file using AJAX technology (pure javascript) in CodeIgniter.


1- I have written an scrip.js file which is responsible to handle AJAX/Javascript process of the upload.

2- I have written a controller in CodeIgniter which receives request from AJAX to upload the file.

3- I have written a simple HTML page


PROBLEM: When I hit the upload button, simply nothing happens! No error is shown.


Here are files:



// JavaScript Document
var doUpload =  function(event){
        // globally used variables in this function
        var progressBar = document.getElementById('progressBar');
        event.preventDefault(); // prevents the default action of an element
        // get the file-input id
        var fileId = document.getElementById('file');    
        // this variable makes an object which accept key/value pairs which could be sent via ajax.send
        var formObj = new FormData();
        // append currently selected file to the dataObject            
        formObj.append('file', fileId.files[0]);        
        // this is a variable to check in the php script (controller if the codeIgniter is used)
        formObj.append('error-check', true);
        formObj.append('finish-check', true);
        // let's make the ajax request object
        var ajaxReq = new XMLHttpRequest();
        // PROGRESS  OF THE FILE /////////////////////////////////////////////
            // now trigger a function during the progress-process of the file-upload process
        ajaxReq.upload.addEventListener('progress', function(event){        
                console.log('this is a very good.');        
                // first let's get the amount of the file loaded. it is in decimals
                var percent = event.loaded / event.total;
                // get the name of the element that the progress-indicator is outputted there
                if(event.lengthComputable) // if a file is inserted and everything is just OK for uploading
                    if(progressBar.hasChildNodes()) // cleans the div container for a new progress to display
                    progressBar.appendChild(document.createTextNode('The Progress So Far: '+percent*100+' %'));
        // END OF PROGRESS  OF THE FILE /////////////////////////////////////////////
        // LOAD  OF THE FILE /////////////////////////////////////////////
            ajaxReq.upload.addEventListener('load', function(event){
                progressBar.appendChild(document.createTextNode(" Completed!"));
        // END OF LOAD  OF THE FILE /////////////////////////////////////////////
        // ERROR  OF THE FILE /////////////////////////////////////////////
            ajaxReq.upload.addEventListener('error', function(event){
                progressBar.appendChild(document.createTextNode("Failed to Upload the File."));
        // END OF THE ERROR  OF THE FILE /////////////////////////////////////////////
        // JSON            
        ajaxReq.open('POST', 'upload/uploader');
        // Set the header of the POST request
        ajaxReq.setRequestHeader('Cache-Control', 'no-cache');
        // send the file. remember, we shoud pass a formData object as an argument to the ajaxRequest.send();

window.addEventListener('load', function(event)
        // get the submit id of the form
        var submitButton = document.getElementById('submit');
        submitButton.addEventListener('click', doUpload);

This is PHP Controller in CodeIgniter

class Upload extends CI_Controller
         function index()
         function uploader ()
                // define the required settings for the upload library to instanciate
                $config['upload_path'] = './uploads/';
                $config['allowed_types'] = 'gif|jpg|png|doc|txt';
                $config['max_size']  = 1024 * 8;
                $config['encrypt_name'] = TRUE;
                // load the upload library
                $this->load->library('upload', $config);
                    $data['error'] = $this->upload->display_errors();
                    //$this->load->view('pages/form', $data);
                    $data['uploaded'] = $this->upload->data();
                    //$this->load->view('pages/form', $data);    

This is the HTML

<!doctype html>
<meta charset="utf-8">
<title>Upload Form With Ajax</title>
<script src="<?php echo base_url(); ?>js/script.js" type='text/javascript'></script>

<div id='error' style='color: red;height: 40px; width: 200px;'>
if(!empty($error)){echo $error; }
<form id='form' name='form' enctype="multipart/form-data" >
<input type='file' name='file' id='file'/>
<input type='submit' name='submit' id='submit' value='Upload File' />
<div style='height: 200px; width: 300px; color: red; padding: 10px; background-color: #CCC;' id='progressBar'></div>

Share this post

Link to post
Share on other sites

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.