Upload file dengan pemisahan tampilan php dan javascript

Upload file dengan pemisahan tampilan php dan javascript

Ini  hanya tulisan dokumentasi kerja agar nantinya di pekerjaan mendatang akan dapat memudahkan saya dalam menggunakan script ini. script yang dituliskan disini berfungsi dalam proses upload file. kesulitannya adalah ada banyak file yang harus diupload dan tiap file tersebut memiliki identitas yang berbeda-beda misalnya pencatatan identitas penduduk ada beberapa lampiran yang harus direkam di database yakni ktp_ayah, ktp_ibu, ktp_anak, kartu_keluarga dan lain sebagainya. sehingga akan ada tampilan yang banyak menggunakan file input upload.

Ini screenshot atau tampilan ilustrasi diatas :

Jadi setiap user mengklik kotak check box akan muncul tampilan  tombol pilihan browse file.

mudah sebenarnya kita tinggal copas aja coding HTML di tiap pilihan lampiran tersebut. berikut file HTML yang dimaksud.

 
 
  1. <div class="uploadbutton btn btn-info btn-xs"><i class="glyphicon glyphicon-paperclip"></i> Pilih file</div>
  2. <input type="file" name="'.$form_name.'" class="upload_input" data-token='.$form_token.' id="upload_form"  id="upload" style="visibility:hidden;">
  3. <div class="progress-wrp" >
  4.     <div class="progress-bar"></div>
  5.     <div class="status">0%</div>
  6. </div>
  7. <div class="upload_keterangan">
  8.       
  9.       <span class="file_name"> </span>
  10.       <span class="succces_upload pull-right"> 
  11.             <i class="glyphicon glyphicon-ok icon-status-success "> </i>
  12.              <a href="#" class="reupload pull-right" >Upload ulang ?</a> 
  13.       </span>
  14.       <span class="error_upload pull-right"> <i class="glyphicon glyphicon-remove icon-status-error "> </i></span>
  15. </div>

dan kita akan mengatur reaksi tiap dom dengan menggunakan javascript (jquery). namun memang mudah diawal susah diakhir. bagaimana jika kita ingin melakukan perubahan pada DOM ?? tentunya kita akan mengedit banyak baris kode yang ada pada lampiran tersebut, terutama file reaksi user yang kita tuliskan dengan bantuan event di jquery.

agar mudah di pelihara / maintainable maka mestinya hanya ada satu struktur DOM. Satu struktur dom akan dapat diterapkan dengan menggunakan bantuan ajax yakni tiap ada user yang mengklik input checkbox akan mentrigger ajax meminta ke sisi server untuk meminta tampilan yang sama.

berikut scriptnya :

upload_dom_php.php
 
  1. //template buat form upload
  2.       public function create_upload_html()
  3.       {
  4.             
  5.             $form_name = $this->input->get('form_name');
  6.             $form_token = $this->input->get('form_token');
  7.             $upload_form = '
  8.                                                             
  9.                         <div class="uploadbutton btn btn-info btn-xs"><i class="glyphicon glyphicon-paperclip"></i> Pilih file</div>
  10.                           <input type="file" name="'.$form_name.'" class="upload_input" table_reference='.$table_reference.' data-token='.$form_token.' id="upload_form"  id="upload" style="visibility:hidden;">
  11.                         <div class="progress-wrp" >
  12.                             <div class="progress-bar"></div>
  13.                             <div class="status">0%</div>
  14.                         </div>
  15.                         <div class="upload_keterangan">
  16.                               
  17.                               <span class="file_name"></span>
  18.                               <span class="succces_upload pull-right"> 
  19.                                     <i class="glyphicon glyphicon-ok icon-status-success "> </i>
  20.                                      <a href="#" class="reupload pull-right" >Upload ulang ?</a> 
  21.                               </span>
  22.                               <span class="error_upload pull-right"> <i class="glyphicon glyphicon-remove icon-status-error "> </i></span>
  23.                         </div>
  24.                   ';
  25.             echo $upload_form;
  26.       }

 

oh sebelumnya mestinya adalah script upload file dengan basis javascript object yang bersumber dari :

https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload

script diatas sudah saya modifikasi agar menampilkan nama file setiap proses upload berhasil dan menghilangkan status progress upload apabila selesai upload.

upload_hander_javascript.js
 
  1. //UPLOAD CLASS
  2. var Upload = function (file) {
  3.     this.file = file;
  4. };
  5. Upload.prototype.getType = function() {
  6.     return this.file.type;
  7. };
  8. Upload.prototype.getSize = function() {
  9.     return this.file.size;
  10. };
  11. Upload.prototype.getName = function() {
  12.     return this.file.name;
  13. };
  14. Upload.prototype.doUpload = function (object, dom) {
  15.     var that = this;
  16.     var formData = new FormData();
  17.  
  18.     // add assoc key values, this will be posts values
  19.     formData.append("file", this.file, this.getName());
  20.     formData.append("upload_file", true);
  21.     formData.append("object", JSON.stringify(object) );
  22.    
  23.     $.ajax({
  24.         type: "POST",
  25.         url: baseUrl + "/web/admin/attachment_upload/upload",
  26.         xhr: function () {
  27.             var myXhr = $.ajaxSettings.xhr();
  28.             if (myXhr.upload) {
  29.                 myXhr.upload.addEventListener('progress', that.progressHandling, false);
  30.             }
  31.             return myXhr;
  32.         },
  33.         success: function (data) {
  34.             // your callback here
  35.             $(dom).hide();
  36.             $(dom).prev('.uploadbutton').hide();
  37.             $(dom).next().next(".upload_keterangan").show();
  38.             $(dom).next().next(".upload_keterangan").find('.icon-status-succes').show();
  39.             $(dom).next().next(".upload_keterangan").find('.file_name').html(data);
  40.         },
  41.         error: function (error) {
  42.             // handle error
  43.             $(dom).next().next(".upload_keterangan").show();
  44.                  $(dom).next().next(".upload_keterangan").find('.icon-status-error').show();
  45.             $(dom).next().next(".upload_keterangan").find('.file_name').html(data);
  46.         },
  47.         async: true,
  48.         data: formData,
  49.         cache: false,
  50.         contentType: false,
  51.         processData: false,
  52.         timeout: 60000
  53.     });
  54. };
  55. Upload.prototype.progressHandling = function (event) {
  56.     var percent = 0;
  57.     var position = event.loaded || event.position;
  58.     var total = event.total;
  59.     var progress_bar_id = ".progress-wrp";
  60.     if (event.lengthComputable) {
  61.         percent = Math.ceil(position / total * 100);
  62.     }
  63.     // update progressbars classes so it fits your code
  64.     $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
  65.     $(progress_bar_id + " .status").text(percent + "%");
  66.     if(percent == 100)
  67.     {
  68.         $(progress_bar_id).fadeOut(2000);
  69.         
  70.     }
  71. };
  72. sekarang file ajax dan file terkait dengan reaksi app terhadap prilaku user :
upload_trigger.js
 
  1.  var baseUrl = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname.split('/')[1];
  2. $(document).ready(function() {
  3.  
  4. $( '.form_floating_placeholder' ).floatingPlaceholder();
  5. $(document).on("click", ".upload_check_box", function(e) {
  6.         
  7.     $(this).closest( "tr" ).find('.upload_form').toggle(500);
  8.     
  9.     var attachment_type = $(this).attr('form-name');
  10.     var form_token = $(this).attr('form-token');
  11.     var table_reference  = $(this).attr('table_reference');
  12.     var object = {attachment_type: attachment_type, form_token: form_token, table_reference:table_reference};
  13.     //if sudah ada jangan load ajax lagi tapi tampilkan yang sudah ada
  14.     if ($(this).closest( "tr" ).find('.upload_form').find( ".upload_keterangan" ).find(".file_name").text().length) {
  15.         // element exists
  16.         $(this).closest( "tr" ).find('.upload_form').find( ".upload_keterangan").show();
  17.     }
  18.     else {
  19.         create_html_upload_dom(this, object);
  20.     }
  21.     
  22. });
  23.     
  24. //upload multi handler
  25. function create_html_upload_dom(dom, object)
  26. {
  27.     var url =  baseUrl + "/web/admin/attachment_upload/create_upload_html";
  28.     $.ajax({
  29.         url: url,
  30.         type: 'POST',
  31.         dataType: 'html',
  32.         data: {object: object},
  33.     })
  34.     .done(function(data) {
  35.         $(dom).closest( "tr" ).find('.upload_form').html(data);
  36.         $(dom).closest( "tr" ).find('.upload_form').find('.progress-wrp').hide();
  37.         $(dom).closest( "tr" ).find('.upload_form').find('.upload_keterangan,.icon-status-succes,.icon-status-error').hide();
  38.     });
  39.     
  40.     
  41. }
  42. }); //end document ready
  43. //to remove ugly button browser html
  44. $(document).on('click','.uploadbutton',function(){
  45.     $(this).next('input[type=file]').click();
  46.  });
  47. //Change id to your id
  48. $(document).on('change','.upload_input',function(){
  49.     
  50.     var file = $(this)[0].files[0];
  51.     var upload = new Upload(file);
  52.     var attachment_type = $(this).attr('name');
  53.     var form_token = $(this).attr('data-token');
  54.     var table_reference  = $(this).attr('table_reference');
  55.     var object = {attachment_type: attachment_type, form_token: form_token, table_reference:table_reference};
  56.     $(this).next().show();
  57.     // maby check size or type here with upload.getSize() and upload.getType()
  58.     // execute upload
  59.     upload.doUpload(object, this);
  60. });
  61.     
  62. //Change id to your id
  63. $(document).on('click','.reupload',function(e){
  64.     e.preventDefault();
  65.     
  66.     $(this).parent().parent().parent().find('.uploadbutton').toggle(500);
  67.  
  68. });
  69.     

file css agar dapat menstyling :

style_upload.css
 
.upload_form { width: 90%; margin-top: 5px; padding: 0px 0px 15px 10px;  }
.upload_keterangan { color: #6A6969 !important; font-size: 1em; }
.reupload { margin-left: 15px; }
.progress-wrp {
    border: 1px solid #0099CC;
    padding: 1px;
    position: relative;
    height: 10px;
    border-radius: 3px;
    margin: 5px;
    text-align: left;
    background: #fff;
    box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
.progress-wrp .progress-bar{
    height: 100%;
    border-radius: 3px;
    background-color: #078321;
    width: 0;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
.progress-wrp .status{
    top:3px;
    left:50%;
    position:absolute;
    display:inline-block;
    color: #000000;
}
.icon-status-success { color: #078716; font-size: 1.1em; }
.icon-status-error { color: #EC0C3B; font-size: 1.1em; }

 

di file html utama kita akan sangat mudah dalam memanggil tampilan tersebut cukup dengan coding berikut (yang bercetak tebal) :

 
 
  1. <table class="lampiran_upload">
  2.       <tr>
  3.             <td class="title">Rekaman SBU yang diregistrasi oleh lembaga 
  4.             <br>
  5.             <!-- Ajax Upload Form -->
  6.             <span class="upload_form display_none">
  7.             </span>
  8.             <!-- End Ajax Upload Form -->
  9.             </td>
  10.             <td>
  11.                   <input type="checkbox" class="upload_check_box" 
  12.                         form-name="sbu_upload_form" 
  13.                         form-token="<?php echo $form_token;?>"
  14. table_reference="<?php echo $table_reference;?>"
  15.                   > 
  16.             </td>
  17.       </tr>
  18.             <td class="title">Rekaman SBU yang diregistrasi oleh lembaga 
  19.             <br>
  20.             <!-- Ajax Upload Form -->
  21.             <span class="upload_form display_none">
  22.             </span>
  23.             <!-- End Ajax Upload Form -->
  24.             </td>
  25.             <td>
  26.                   <input type="checkbox" class="upload_check_box" 
  27.                         form-name="sbu_upload_form" 
  28.                         form-token="<?php echo $form_token;?>"
  29.                   > 
  30.             </td>
  31.       </tr>
 
 
  1. </table>

 

file menerima file upload dari html form. file name : upload.php

 
 
  1. public function upload()
  2.       { 
  3.             $this->load->library('upload');
  4.             //print_r($_FILES['file']['name']);
  5.             $file_ext = (strlen($_FILES['file']['name']) >  18) ? '.'.ltrim(strrchr($_FILES['file']['name'], '.'),'.') : '';
  6.            
  7. echo $file_name = character_limiter($_FILES['file']['name'], 18).$file_ext;
  8.             //cari dulu berdsasarkan token jika tidak ada insert baru, jika ada maka hapus yang lama insert yang baru
  9.             $parameter = json_decode($_POST['object']);
  10.             echo $parameter->attachment_type;
  11.       }

 

tampilan screenshot waktu proses upload adalah sebagai berikut :

Komentari bro

"