title: Codeigniter image upload with Javascript
body: <p><strong>Problem:</strong> Working on a save product information page here I wanted to upload images using Codeigniter and Javascript. Other text boxes and select box data save function working fine. Tried following code but it shows error: <code>You did not select a file to upload.</code></p>
  
  <p>Please help me to solve this error and upload an image file.</p>
  
  <p><strong>Code:</strong> </p>
  
  <p><strong><em>View: addProduct.php</em></strong></p>
  
  <pre><code>    &lt;div class="tz-2 tz-2-admin"&gt;
      &lt;div class="tz-2-com tz-2-main"&gt;
          &lt;h4&gt;Add New Product&lt;/h4&gt;
      &lt;div class="split-row"&gt;
      &lt;div class="col-md-12"&gt;
      &lt;div class="box-inn-sp ad-inn-page"&gt;
      &lt;div class="tab-inn ad-tab-inn"&gt;
      &lt;div class="hom-cre-acc-left hom-cre-acc-right"&gt;
      &lt;div class=""&gt;
  
      &lt;form class=""&gt;
      &lt;span id="statusBar"&gt;&lt;/span&gt;
      &lt;div class="row"&gt;
          &lt;div class="input-field col s12"&gt;
              &lt;input id="prod_id" type="text" class="validate" disabled&gt;
              &lt;label id="lblProdId" for="prod_id"&gt;Product ID&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;input id="prod_name" type="text" class="validate"&gt;
          &lt;label for="prod_name"&gt;Product Name&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
      &lt;input id="prod_short_name" type="text" class="validate"&gt;
      &lt;label for="prod_short_name"&gt;Short Name&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;select id="prod_cat" class="validate"&gt;
              &lt;option value=""&gt;-- Select Category --&lt;/option&gt;
              &lt;?php foreach($categories as $Category):?&gt;
              &lt;option value="&lt;?php echo $Category-&gt;Cat_ID;?&gt;"&gt;&lt;?php echo $Category-&gt;Cat_Name;?&gt;&lt;/option&gt;
              &lt;?php endforeach;?&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12" &gt;
          &lt;select id="prod_brand" class="validate"&gt;
              &lt;option value=""&gt;-- Select Brand--&lt;/option&gt;
              &lt;?php foreach($brands as $brand):?&gt;
              &lt;option value="&lt;?php echo $brand-&gt;Brand_ID;?&gt;"&gt;&lt;?php echo $brand-&gt;Brand_Name;?&gt;&lt;/option&gt;
              &lt;?php endforeach;?&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;input id="prod_mrp" type="text" class="validate"&gt;
          &lt;label for="prod_mrp"&gt;MRP&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;input id="prod_p_price" type="text" class="validate"&gt;
          &lt;label for="prod_p_price"&gt;Purchase Price&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;input id="prod_s_price" type="text" class="validate"&gt;
          &lt;label for="prod_s_price"&gt;Min. Selling Price&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;select id="prod_uom" class="validate"&gt;
              &lt;option&gt;-- Seletct Unit of Measure --&lt;/option&gt;
              &lt;option value="Kilos"&gt;Kilos&lt;/option&gt;
              &lt;option value="Liters"&gt;Liters&lt;/option&gt;
              &lt;option value="Meters"&gt;Meters&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;input id="prod_size" type="text" class="validate"&gt;
          &lt;label for="prod_size"&gt;Size&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;input id="prod_per_unit" type="text" class="validate"&gt;
          &lt;label for="prod_per_unit"&gt;Products per unit&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;input id="prod_SGST" type="text" class="validate"&gt;
          &lt;label for="prod_SGST"&gt;SGST&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;input id="prod_CGST" type="text" class="validate"&gt;
          &lt;label for="prod_CGST"&gt;CGST&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;input id="prod_IGST" type="text" class="validate"&gt;
          &lt;label for="prod_IGST"&gt;IGST&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;select id="prod_GST_inc" class="validate"&gt;
              &lt;option value=""selected&gt;Is Inclusive GST&lt;/option&gt;
              &lt;option value="Yes"&gt;Yes&lt;/option&gt;
              &lt;option value="No"&gt;No&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;select id="prod_status" class="validate"&gt;
              &lt;option&gt;-- Select Status &lt;/option&gt;
              &lt;option value="Enabled"&gt;Enabled&lt;/option&gt;
              &lt;option value="Enabled"&gt;Disabled&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s12"&gt;
          &lt;textarea id="prod_description" class="materialize-textarea validate"&gt;&lt;/textarea&gt;
          &lt;label for="prod_description"&gt;Descriptions&lt;/label&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row tz-file-upload"&gt;
      &lt;div class="file-field input-field"&gt;
      &lt;div class="tz-up-btn"&gt; &lt;span&gt;File&lt;/span&gt;
          &lt;input type="file" id="prod_image" &gt; &lt;/div&gt;
          &lt;div class="file-path-wrapper db-v2-pg-inp"&gt;
              &lt;input class="file-path validate" id="prod_image" type="text"&gt;
              &lt;label for="prod_image" style="padding-left:12%;" &gt;Product Image&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="input-field col s12" id="btnSaveProd"&gt; &lt;a class="waves-effect waves-light btn-large full-btn" href="#!" onclick="ajax_addProduct();"&gt;Save Product&lt;/a&gt; &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;script&gt;
  
      function ajax_addProduct(){
  
      event.preventDefault();
  
      var hr = new XMLHttpRequest();
      // Create some variables we need to send to our PHP file
      var url = "&lt;?php echo base_url();?&gt;products/save";
      var prod_name = document.getElementById("prod_name").value;
      var prod_short_name = document.getElementById("prod_short_name").value;
      var prod_cat = document.getElementById("prod_cat").value;
      var prod_brand = document.getElementById("prod_brand").value;
      var prod_mrp = document.getElementById("prod_mrp").value;
      var prod_p_price = document.getElementById("prod_p_price").value;
      var prod_s_price = document.getElementById("prod_s_price").value;
      var prod_uom = document.getElementById("prod_uom").value;
      var prod_size = document.getElementById("prod_size").value;
      var prod_per_unit = document.getElementById("prod_per_unit").value;
      var prod_SGST = document.getElementById("prod_SGST").value;
      var prod_CGST = document.getElementById("prod_CGST").value;
      var prod_IGST = document.getElementById("prod_IGST").value;
      var prod_GST_inc = document.getElementById("prod_GST_inc").value;
      var prod_status = document.getElementById("prod_status").value;
      var prod_description = document.getElementById("prod_description").value;
      var prod_image = document.getElementById("prod_image").files[0].name;
  
      var vars = "prod_name="+prod_name+"&amp;prod_short_name="+prod_short_name+"&amp;prod_cat="+prod_cat+"&amp;prod_brand="+prod_brand+"&amp;prod_mrp="+prod_mrp+"&amp;prod_p_price="+prod_p_price+"&amp;prod_s_price="+prod_s_price+"&amp;prod_uom="+prod_uom+"&amp;prod_size="+prod_size+"&amp;prod_per_unit="+prod_per_unit+"&amp;prod_SGST="+prod_SGST+"&amp;prod_CGST="+prod_CGST+"&amp;prod_IGST="+prod_IGST+"&amp;prod_GST_inc="+prod_GST_inc+"&amp;prod_status="+prod_status+"&amp;prod_description="+prod_description+"&amp;prod_image="+prod_image;
          hr.open("POST", url, true);
      // Set content type header information for sending url encoded variables in the request
          hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      // Access the onreadystatechange event for the XMLHttpRequest object
          hr.onreadystatechange = function() {
      if(hr.readyState == 4 &amp;&amp; hr.status == 200) {
          var return_data = hr.responseText;
  
      if (return_data &gt; 0) {
          document.getElementById("statusBar").className = "";
          document.getElementById("statusBar").innerHTML = "&lt;p class='alert alert-success' style='font-size:16px; padding-top:2%; text-align:center;'&gt;  &lt;strong&gt;Success...!&lt;/strong&gt; New category added.&lt;/p&gt;";
  
      //var elem = document.getElementById("btnSaveProd");
      //elem.parentNode.removeChild(elem);
  
          var elem = document.getElementById("lblProdId");
          elem.parentNode.removeChild(elem);
  
          document.getElementById("prod_id").value = return_data;
      }
      else{
          document.getElementById("statusBar").className = "";
          document.getElementById("statusBar").innerHTML = return_data;
      }
  
      }
      else {
          document.getElementById("statusBar").innerHTML = return_data;
      }
      }
  
      if (prod_name != "" &amp;&amp; prod_short_name != "") {
          hr.send(vars);
          document.getElementById("statusBar").className = "alert alert-info";
          document.getElementById("statusBar").innerHTML = "processing...";
      }
      else if(prod_name == ""){
          document.getElementById("prod_name").className = "validate invalid";
          var elmnt = document.getElementById("statusBar");
          elmnt.scrollIntoView();
      }
      else if(prod_short_name == ""){
          document.getElementById("prod_short_name").className = "validate invalid";
          var elmnt = document.getElementById("prod_name");
          elmnt.scrollIntoView();
      }
  
      }
      &lt;/script&gt;
  </code></pre>
  
  <p><strong><em>Controller: Products.php</em></strong></p>
  
  <pre><code>public function save()
    {
  
      $data['Prod_Name'] = $this-&gt;input-&gt;post('prod_name', TRUE);
      $data['Prod_Short_Name'] = $this-&gt;input-&gt;post('prod_short_name', TRUE);
      $data['Cat_ID'] = $this-&gt;input-&gt;post('prod_cat', TRUE);
      $data['Brand_ID'] = $this-&gt;input-&gt;post('prod_brand', TRUE);
      $data['Prod_MRP'] = $this-&gt;input-&gt;post('prod_mrp', TRUE);
      $data['Prod_P_Price'] = $this-&gt;input-&gt;post('prod_p_price', TRUE);
      $data['Prod_S_Price'] = $this-&gt;input-&gt;post('prod_s_price', TRUE);
      $data['Prod_UOM'] = $this-&gt;input-&gt;post('prod_uom', TRUE);
      $data['Prod_Size'] = $this-&gt;input-&gt;post('prod_size', TRUE);
      $data['Prod_Per_Unit'] = $this-&gt;input-&gt;post('prod_per_unit', TRUE);
      $data['Prod_SGST'] = $this-&gt;input-&gt;post('prod_SGST', TRUE);
      $data['Prod_CGST'] = $this-&gt;input-&gt;post('prod_CGST', TRUE);
      $data['Prod_IGST'] = $this-&gt;input-&gt;post('prod_IGST', TRUE);
      $data['Prod_GST_Inclusive'] = $this-&gt;input-&gt;post('prod_GST_inc', TRUE);
      $data['Prod_Status'] = $this-&gt;input-&gt;post('prod_status', TRUE);
      $data['Prod_Description'] = $this-&gt;input-&gt;post('prod_description', TRUE);
      $data['Prod_Image'] = $this-&gt;input-&gt;post('prod_image', TRUE);
  
      $this-&gt;do_upload();
  
      if ($pid = $this-&gt;Products_Model-&gt;saveProduct($data))
      {
        echo $pid;
      }
      else
      {
        echo "&lt;p class='alert alert-warning' style='font-size:17px; padding-top:2%; text-align:center;'&gt;&lt;strong&gt;Ooops!&lt;/strong&gt; Unable to add category.&lt;/p&gt;";
      }
  
    }
  
    public function do_upload()
    {
        $config['upload_path']          = base_url(). "uploads/";
        $config['allowed_types']        = 'gif|jpg|png';
        $config['max_size']             = 100;
        $config['max_width']            = 1024;
        $config['max_height']           = 768;
  
        $this-&gt;load-&gt;library('upload', $config);
  
        if ( ! $this-&gt;upload-&gt;do_upload('Prod_Image'))
        {
                $error = array('error' =&gt; $this-&gt;upload-&gt;display_errors());
  
                echo "&lt;p class='alert alert-warning' style='font-size:17px; padding-top:2%; text-align:center;'&gt;&lt;strong&gt;Ooops!&lt;/strong&gt;".$error['error'].".&lt;/p&gt;";
        }
        else
        {
                $data = array('upload_data' =&gt; $this-&gt;upload-&gt;data());
  
                echo "&lt;p class='alert alert-warning' style='font-size:17px; padding-top:2%; text-align:center;'&gt;&lt;strong&gt;Ooops!&lt;/strong&gt;".$data['upload_data'].".&lt;/p&gt;";
        }
    }
  </code></pre>
  
  <p>Please help me to upload and save filename to the database. </p>
  
  <p><strong>NOTE:</strong> Don't want to use Jquery. Please suggest an answer with traditional Javascript.</p>