Posted in Komputer/IT

Upload file/gambar dengan CodeIgniter, jQuery ajax & picEdit


Sering kali kita memerlukan fitur upload file/picture dalam aplikasi kita. CodeIgniter telah memberikan library untuk mengupload file. Tetapi masih menggunakan form biasa, belum menggunakan ajax. Bagi yang memerlukan fitur upload file dengan menggunakan ajax, bisa menggunakan jQuery dengan plugin picEdit (https://github.com/andyvr/picEdit). 

Beberapa alasan mengapa picEdit yang digunakan sementara banyak pilihan plugin lain, yaitu: cukup simple, mudah digunakan, memiliki fitur edit-in-place, dan memiliki tampilan yang bagus dan cukup fleksibel apabila digunakan dalam aplikasi yang responsif (bisa input dari camera).

picEdit akan mengubah dari file input biasa seperti berikut:

Input File Biasa
Input File Biasa

Menjadi:

Input File picEdit
Input File picEdit

Fitur edit-in-place:

Fitur Edit-in-place
Fitur Edit-in-place

 

Langkah-langkah untuk menggunakan picEdit adalah sebagai berikut:

  1. Download picEdit dari: https://github.com/andyvr/picEdit
  2. Ekstrak ke dalam folder root dari CodeIgniter

    picEdit di folder root CI
    picEdit di folder root CI
  3. Buat directory/folder untuk menyimpan file yang diupload, contoh pada kasus ini adalah: uploads
  4. chmod directory uploads menjadi 777 (writable by all users)
  5. Buat sebuah file view (upload_form.php) lalu include jQuery dan picEdit (css & js nya) dari dalam file view:
    ...
    //cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js
     
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/picEdit/dist/css/picedit.min.css" />
    
    ?php%20echo%20base_url();?/picEdit/dist/js/picedit.min.js
    ...
  6. Buat form untuk upload file pada file view tersebut, contoh:
    ...
    <?php echo form_open_multipart('upload/do_upload');?>
        <input type="file" name="userfile" id="userfile" size="20" />
        <br /><br />
        <input type="submit" value="upload" />
    </form>
    ...
  7. Buat code javascript untuk menerapkan picEdit pada input file yang telah dibuat
    ...
    
        $(function() {
            $('#userfile').picEdit({
                formSubmitted: function(ajax){
                    $('#message').html(ajax.response);
                }
            });
        });
    
    ...
  8. Buat file controller (upload.php) lalu tulis code untuk menghandle file upload
    ...
    $config['upload_path'] = './uploads/';
    $config['allowed_types'] = 'gif|jpg|png|jpeg';
    $config['max_size'] = '100';
    $config['max_width'] = '1024';
    $config['max_height'] = '768';
    
    $this->load->library('upload', $config);
    
    if ( ! $this->upload->do_upload())
    {
      $errors = $this->upload->display_errors();
      echo $errors;
    }
    else
    {
      $upload_data = $this->upload->data();
      echo 'Your file was successfully uploaded!: ';
      /*echo '<pre>';
      echo print_r($upload_data);
      echo '</pre>';
      */
    }
    ...

Kode selengkapnya adalah sebagai berikut:

View file (upload_form.php):

<html>
<head>
  <title>Upload Form</title>
  //cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/picEdit/dist/css/picedit.min.css" />
  ?php%20echo%20base_url();?/picEdit/dist/js/picedit.min.js
  
    $(function() {
      $('#userfile').picEdit({
        formSubmitted: function(ajax){
          $('#message').html(ajax.response);
        }
     });
    });
  
</head>
<body>
  
<?php echo form_open_multipart('upload/do_upload');?> <input type="file" name="userfile" id="userfile" size="20" /> <br /><br /> <input type="submit" value="upload" /> </form> </body> </html>

Controller file (upload.php):

<?php
class Upload extends CI_Controller {
  function __construct()
  {
    parent::__construct();
    $this->load->helper(array('form', 'url'));
  }

  function index()
  {
    $this->load->view('upload_form', array('error' => ' ' ));
  }

  function do_upload()
  {
     $config['upload_path'] = './uploads/';
     $config['allowed_types'] = 'gif|jpg|png|jpeg';
     $config['max_size'] = '100';
     $config['max_width'] = '1024';
     $config['max_height'] = '768';
     $this->load->library('upload', $config);
     if ( ! $this->upload->do_upload())
     {
       $errors = $this->upload->display_errors();
       echo $errors;
     }
     else
     {
       $upload_data = $this->upload->data();
       echo 'Your file was successfully uploaded!: ';
       /*echo '<pre>';
       echo print_r($upload_data);
       echo '</pre>';*/
     }
  }
}
/* EOF */

Cukup simple kan. Mudah-mudahan artikel ini bermanfaat bagi penulis khususnya dan bagi pembaca pada umumnya. Wassalam.

Download source code: ci_upload_file_triswan.wordpress.com-zip.doc (Jangan lupa untuk me-rename ekstensi file nya menjadi .zip)

2 thoughts on “Upload file/gambar dengan CodeIgniter, jQuery ajax & picEdit

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s