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.

 <div class="uploadbutton btn btn-info btn-xs"><i class="glyphicon glyphicon-paperclip"></i> Pilih file</div>

<input type="file" name="'.$form_name.'" class="upload_input" data-token='.$form_token.' id="upload_form"  id="upload" style="visibility:hidden;">

<div class="progress-wrp" >
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

<div class="upload_keterangan">
      
      <span class="file_name"> </span>
      <span class="succces_upload pull-right"> 
            <i class="glyphicon glyphicon-ok icon-status-success "> </i>

             <a href="#" class="reupload pull-right" >Upload ulang ?</a> 
      </span>


      <span class="error_upload pull-right"> <i class="glyphicon glyphicon-remove icon-status-error "> </i></span>
</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 :

 //template buat form upload
      public function create_upload_html()
      {

            
            $form_name = $this->input->get('form_name');
            $form_token = $this->input->get('form_token');

            $upload_form = '
                                                            
                        <div class="uploadbutton btn btn-info btn-xs"><i class="glyphicon glyphicon-paperclip"></i> Pilih file</div>

                          <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;">
                        <div class="progress-wrp" >
                            <div class="progress-bar"></div>
                            <div class="status">0%</div>
                        </div>

                        <div class="upload_keterangan">
                              
                              <span class="file_name"></span>
                              <span class="succces_upload pull-right"> 
                                    <i class="glyphicon glyphicon-ok icon-status-success "> </i>

                                     <a href="#" class="reupload pull-right" >Upload ulang ?</a> 
                              </span>


                              <span class="error_upload pull-right"> <i class="glyphicon glyphicon-remove icon-status-error "> </i></span>
                        </div>
                  ';


            echo $upload_form;
      }

 

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 CLASS
var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function (object, dom) {
    var that = this;
    var formData = new FormData();
  

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);
    formData.append("object", JSON.stringify(object) );
   

    $.ajax({
        type: "POST",
        url: baseUrl + "/web/admin/attachment_upload/upload",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
            $(dom).hide();
            $(dom).prev('.uploadbutton').hide();
            $(dom).next().next(".upload_keterangan").show();

            $(dom).next().next(".upload_keterangan").find('.icon-status-succes').show();
            $(dom).next().next(".upload_keterangan").find('.file_name').html(data);



        },
        error: function (error) {
            // handle error

            $(dom).next().next(".upload_keterangan").show();
                 $(dom).next().next(".upload_keterangan").find('.icon-status-error').show();
            $(dom).next().next(".upload_keterangan").find('.file_name').html(data);

        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = ".progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");

    if(percent == 100)
    {
        $(progress_bar_id).fadeOut(2000);

        
    }


};


sekarang file ajax dan file terkait dengan reaksi app terhadap prilaku user : 

 var baseUrl = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname.split('/')[1];

$(document).ready(function() {

 
$( '.form_floating_placeholder' ).floatingPlaceholder();

$(document).on("click", ".upload_check_box", function(e) {

        
    $(this).closest( "tr" ).find('.upload_form').toggle(500);
    

    var attachment_type = $(this).attr('form-name');
    var form_token = $(this).attr('form-token');
    var table_reference  = $(this).attr('table_reference');

    var object = {attachment_type: attachment_type, form_token: form_token, table_reference:table_reference};

    //if sudah ada jangan load ajax lagi tapi tampilkan yang sudah ada
    if ($(this).closest( "tr" ).find('.upload_form').find( ".upload_keterangan" ).find(".file_name").text().length) {
        // element exists
        $(this).closest( "tr" ).find('.upload_form').find( ".upload_keterangan").show();
    }
    else {
        create_html_upload_dom(this, object);
    }

    

});

    

//upload multi handler
function create_html_upload_dom(dom, object)
{
    var url =  baseUrl + "/web/admin/attachment_upload/create_upload_html";
    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'html',
        data: {object: object},
    })
    .done(function(data) {

        $(dom).closest( "tr" ).find('.upload_form').html(data);
        $(dom).closest( "tr" ).find('.upload_form').find('.progress-wrp').hide();
        $(dom).closest( "tr" ).find('.upload_form').find('.upload_keterangan,.icon-status-succes,.icon-status-error').hide();

    });
    
    
}

}); //end document ready




//to remove ugly button browser html
$(document).on('click','.uploadbutton',function(){

    $(this).next('input[type=file]').click();
 });


//Change id to your id
$(document).on('change','.upload_input',function(){

    
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    var attachment_type = $(this).attr('name');
    var form_token = $(this).attr('data-token');
    var table_reference  = $(this).attr('table_reference');

    var object = {attachment_type: attachment_type, form_token: form_token, table_reference:table_reference};

    $(this).next().show();

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload(object, this);
});
    


//Change id to your id
$(document).on('click','.reupload',function(e){
    e.preventDefault();
    
    $(this).parent().parent().parent().find('.uploadbutton').toggle(500);
 
});
    

file css agar dapat menstyling :

 
.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) :

<table class="lampiran_upload">
      <tr>
            <td class="title">Rekaman SBU yang diregistrasi oleh lembaga 
            <br>

            <!-- Ajax Upload Form -->
            <span class="upload_form display_none">
            </span>
            <!-- End Ajax Upload Form -->


            </td>
            <td>
                  <input type="checkbox" class="upload_check_box" 
                        form-name="sbu_upload_form" 
                        form-token="<?php echo $form_token;?>"
                        table_reference="<?php echo $table_reference;?>"
                  > 
            </td>

      </tr>

            <td class="title">Rekaman SBU yang diregistrasi oleh lembaga 
            <br>

            <!-- Ajax Upload Form -->
            <span class="upload_form display_none">
            </span>
            <!-- End Ajax Upload Form -->


            </td>
            <td>
                  <input type="checkbox" class="upload_check_box" 
                        form-name="sbu_upload_form" 
                        form-token="<?php echo $form_token;?>"
                  > 
            </td>

      </tr>
 </table>

 

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

 public function upload()
      { 

            $this->load->library('upload');
            //print_r($_FILES['file']['name']);
            $file_ext = (strlen($_FILES['file']['name']) >  18) ? '.'.ltrim(strrchr($_FILES['file']['name'], '.'),'.') : '';
            
            echo $file_name = character_limiter($_FILES['file']['name'], 18).$file_ext;

            //cari dulu berdsasarkan token jika tidak ada insert baru, jika ada maka hapus yang lama insert yang baru

            $parameter = json_decode($_POST['object']);
            echo $parameter->attachment_type;

      }

 

tampilan screenshot waktu proses upload adalah sebagai berikut :

Leave a Comment

Your email address will not be published. Required fields are marked *

Exit mobile version