Foto Langsung Upload dengan HTML5 dan ajaxFileUpload

Awalnya dari testing user pakai aplikasi yang saya buat. Mereka agak bingung kalau foto object dulu baru upload hasil foto ke sistem dari foto yang baru saja dia ambil. Katanya tidak praktis, “agak ribet Di, mending langsung aja pilih tombol upload, ambil langsung dari kamera device lalu langsung masuk deh..”. Bengong, emang bisa ya dari device langsung kedetect ke html browser ?? Cari tahu…

Ternyata ada kok, HTML5 bisa handle proses ini. Bisa lihat detailnya pada halaman ini [http://www.html5rocks.com/en/tutorials/getusermedia/intro/]

Kodenya bagaimana ? Saya share kode foto langsung upload dengan html5 dan ajaxFileUpload

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$('#campaign_photo_start').live('change',function(e){
  e.preventDefault();
  var urlString = main_url + '/upload_photo_start';
    $.ajaxFileUpload({
      url :urlString,
      secureuri :false,
      fileElementId :'campaign_photo_start',
      dataType : 'json',
      data : {
          'campaign_id': $('#campaign_id').val(),
          'owner_car_id': $('#owner_car_id').val(),
          'car_no': $('#car_no').val(),
          'campaign_name': $('#campaign_name').val()
      },
      success: function (data, status) {
        var img_name = data.img_name;
        var img_status = data.status;
        var path_upload = data.path_upload;
        var full_img = '<?php echo base_url(); ?>' + path_upload + '/' + img_name;
        if(img_status) {
          var img = "<img src='"+full_img+"' width='320' />";
        $("#img_start").html('');
        $("#img_start").append(img); 
        $("#campaign_photo_start_txt").val(img_name);
        }
      }
  });
});

Kode diatas adalah handle untuk ajaxFileUpload dimana #campaign_photo_start adalah input file dengan HTML5 Capture seperti dibawah ini.

1
2
3
4
5
6
7
8
<div class="control-group">
  <label class="control-label">Image Awal</label>
  <div class="controls">
    <input type="hidden" name="campaign_photo_start_txt" id="campaign_photo_start_txt"/>
    <div id="img_start"></div>
    <input type="file" name="campaign_photo_start" id="campaign_photo_start" class="span4" accept="image/*" capture />
  </div>
</div>

Kalau anda lihat, ada penambahan attribute capture pada input file type file dan attribute accept=”image/*” dimana kedua attribute tersebut adalah attribute dari HTML5 untuk handle data camera device.

Lalu untuk langsung upload saya arahkan ke url ajax var urlString = main_url + ‘/upload_photo_start’; dengan codeigniter seperti biasa hanya kode untuk upload file saja.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
public function upload_photo_start() {
    $file_element_name = 'campaign_photo_start';
    $files_data = $_FILES[$file_element_name];
    $with_image = true;
    if($files_data['error'] == 0) {
        $car_no = str_replace(' ', '_', $this->input->post('car_no') );
        $campaign_id = $this->input->post('campaign_id');
        $path_upload = UPLOAD_PATH . 'nama_folder_tempat_upload/' . $campaign_id . '_' . $car_no;
        $path_exist = false;
       
        if(!is_dir( $path_upload )) {
            $path_exist = true;
        }

        if( $path_exist ) {
            if(mkdir(UPLOAD_PATH . 'nama_folder_tempat_upload/' . $campaign_id . '_' . $car_no,'0777',TRUE)) {
                $config['upload_path'] = UPLOAD_PATH . 'nama_folder_tempat_upload/' . $campaign_id . '_' . $car_no. '/';
                $config['allowed_types'] = 'jpg';
                $config['max_size']  = 1024 * 2;
                $config['file_name']  = $campaign_id .'_'.$car_no.'_start.jpg';
                $config['encrypt_name'] = FALSE;
                $config['overwrite'] = TRUE;
                $this->load->library('upload', $config);
                clearstatcache();
         
                if (!$this->upload->do_upload($file_element_name)){
                    $with_image = false;
                } else {
                    $data_upload = $this->upload->data();
                    $img = $data_upload['file_name'];
                }
            } else {
                $with_image = false;
            }
        } else {
            $config['upload_path'] = UPLOAD_PATH . 'nama_folder_tempat_upload/' . $campaign_id . '_' . $car_no. '/';
            $config['allowed_types'] = 'jpg';
            $config['max_size']  = 1024 * 2;
            $config['file_name']  = $campaign_id .'_'.$car_no.'_start.jpg';
            $config['encrypt_name'] = FALSE;
            $config['overwrite'] = TRUE;
            $this->load->library('upload', $config);
            clearstatcache();
     
            if (!$this->upload->do_upload($file_element_name)){
                $with_image = false;
            } else {
                $data_upload = $this->upload->data();
                $img = $data_upload['file_name'];
            }
        }
    } else {
        $with_image = false;
    }
    $array_result['status'] = $with_image;
    $array_result['img_name'] = $img;
    $array_result['path_upload'] = $path_upload;
   
    echo json_encode($array_result);
}

note : UPLOAD_PATH itu global variable yang saya set pada config/constants.php untuk menentukan folder upload global aplikasi.

Sampai disini, foto langsung upload dengan HTML5 dan AjaxFileUpload jalan. Untuk diingat saja, fitur capture pada HTML5 ini belum dapat dijalankan oleh semua browser komputer ataupun browser smartphone / device (tablet atau lainnya). Jadi mesti difilter dulu atau disesuaikan kebutuhan user dan spesifikasi aplikasi untuk dipakai oleh user. Kemarin testing dengan Ipad milik user bisa jalan dengan baik kok. 🙂
Thanks HTML5 and ajaxFileUpload.

Moga bermanfaat.

One comment

Leave a Reply

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

%d bloggers like this: