membuat function add media seperti wordpress

hi master js.. ini saya lagi ada project dengan menggunakan CodeIgniter. nah ane diminta buat from yang didalamnya bisa upload image dan select image dari database. nah itu kan mirip dengan function Add Media yang ada di wordpress.. kira-kira ada yang tau tidak ya cara buatnya.

ane sebenarnya sudah buat. dengan menggunakan JS berdasarkan google. 1. untuk uploadnya image nya. ane menggunakan JS yang memunculkan image yang mau di upload (tapi belum di submit). 2. untuk select imagenya. ane pake JS modal box yang didalamnya terdapat list image dari DB.

nah ada beberapa error yang muncul 1. untuk select image via modal box. ane tidak bisa mendapatkan data ID nya. hanya bisa tampil image nya saja. sedangkan yang mau di save ke DB itu ID nya 2. ketika kita diawal mau upload image dan kita sudah pilih. ehh. tidak jadi, dan mau ganti ke select image. preview imagenya malah muncul 2. 1 tuk preview image dari upload image, 1 lagi dari select image 3. ketika disubmit dan function validation return false. image nya ilang.

berikut code nya..

View dan modal box nya

    <div id='div_img_name'></div>
        <?php if(!empty($data)) { ?>
          <img src="<?php echo base_url().'public/img/upload/coupons/'.$data["file_name"]?>" class="coupon_pic"/>
        <?php } else { ?>
          <img id='output_image' class="coupon_pic"/>
        <?php } ?>

        <div class="coupon_btn">
          <div class="upload">
            <input type="file" id="upload_button_input"  onchange="preview_image(event)" name="file_name" style="display:none"  ></input>
            <button id="upload_button">アップロード</button>
          </div>
          <button type="button" class="choose" data-toggle="modal" data-target="#myModal">選択</button>

     <!-- Modal -->
     <div class="modal fade" id="myModal" role="dialog">
       <div class="modal-dialog">

         <!-- Modal content-->
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal">×</button>
             <h4 class="modal-title">Select Image</h4>
           </div>
           <div class="modal-body">
             <?php
             foreach ($galleries as $key => $value)
             { ?>
               <input type="image" src="<?php echo base_url().'public/img/upload/coupons/'.$value["file_name"]?>" onclick="imgclick('<?php echo base_url().'public/img/upload/coupons/'.$value["file_name"]?>');return false;" name="gallery_id" value="<?php echo $value["id"]?>" height="100" width="130"  class="img">

             <?php } ?>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           </div>
         </div>

       </div>
     </div>

tampilan Script

 function preview_image(event){
        $("#div_img_name").empty();
        var reader = new FileReader();
        reader.onload = function(){
            var output = document.getElementById('output_image');
            output.src = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    };

      $(".img").on(function() {
        var img = $(this).attr('src');
        $("#output_image").empty();
        $("#div_img_name").empty();
        $('#div_img_name').prepend('<input type="image" alt="Login" src="' + img + '" class="coupon_pic" name="gallery_id" value="2"> ');
        $('#myModal').modal('hide');
        return false;
      });

ane fustasi dah. nga nemu cara nya ngimana.