Ketika mengirimkan data lewat form HTML dengan metode POST, kita dapat menggunakan encoding application/x-www-form-urlencoded, multipart/form-data, dan text/plain.
Untuk kebutuhan upload file (terdapat input type='file' pada form), selama program di sisi server mendukung, kita menggunakan enctype='multipart/form-data' ketika mendefinisikan form.
Bahasa Singkong, setidaknya pada saat tutorial ini ditulis, belum mendukung encoding multipart/form-data, dan oleh karenanya, untuk kebutuhan upload file, dengan encoding application/x-www-form-urlencoded yang didukung, kita perlu:
Pada form, kita akan proses setelah form disubmit. Kemudian, kita mendapatkan id input file, dan mendapatkan objek filenya. Selanjutnya, kita membuat objek FileReader dan memanggil method readAsDataURL (hasilnya sudah dalam Base64, walau terdapat penanda deklarasi Data-URL). Ketika selesai diload, kita proses dan kirimkan isi file ke server, misal dengan XMLHttpRequest.
Berikut adalah contoh HTML dan JavaScript nya, dengan jQuery:
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Upload</title> </head> <body> <form id='form'> <input type='file' id='f'> <input type='submit' value='save'> </form> <script src='jquery.min.js'></script> <script> $(document).ready(function() { $('#form').on('submit', function(e) { e.preventDefault(); var f = $('#f').prop('files')[0]; if (f === undefined) { alert('No file selected'); return false; } var r = new FileReader(); r.readAsDataURL(f); r.onload = function() { var b = r.result.toString().replace(/^data:(.*,)?/, ''); var m = b.length % 4; if (m > 0) { var p = '='.repeat(4 - m); b += p; } var d = { 'file': b }; $.post('upload.web', JSON.stringify(d), function(res) { alert(res); } ); }; return false; }); }); </script> </body> </html>
Berikut adalah contoh HTML dan JavaScript nya, tanpa pustaka tambahan:
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Upload</title> </head> <body> <form onsubmit='return save()'> <input type='file' id='f'> <input type='submit' value='save'> </form> <script> function save() { var f = document.getElementById('f').files[0]; if (f === undefined) { alert('No file selected'); return false; } var r = new FileReader(); r.readAsDataURL(f); r.onload = function() { var b = r.result.toString().replace(/^data:(.*,)?/, ''); var m = b.length % 4; if (m > 0) { var p = '='.repeat(4 - m); b += p; } var d = { 'file': b }; var x = new XMLHttpRequest(); x.onreadystatechange = function() { if (x.readyState == XMLHttpRequest.DONE) { if (x.status == 200) { alert(x.responseText); } } } x.open('POST', 'upload.web', true); x.setRequestHeader('Content-Type', 'application/json'); x.send(JSON.stringify(d)); }; return false; } </script> </body> </html>
Pada contoh-contoh tersebut, kita telah menghapus penanda base64 dan melakukan padding. Kemudian, kita melakukan POST form ke upload.web, dalam encoding application/x-www-form-urlencoded.
Berikut adalah isi file upload.web:
var p = cgi_post_hash() cgi_header() var f = ifnull(p["file"], "") var f = replace(f, " ", "+") print(len(f))
Pada Singkong, dengan cgi_post_hash seperti dalam contoh, key dan value telah didecode. Misal, karakter + diganti dengan spasi. Untuk tutorial ini, kita replace spasi kembali ke +.
Apabila berhasil, sebuah alert, berisikan panjang string Base64 yang dikirimkan, akan ditampilkan di browser. Di sisi server, kita bisa menulis data ini ke sistem database ataupun ke file. Untuk decode Base64 dan menulis ke file, kita bisa menggunakan fungsi x_base64_decode_file.
Sebagai tambahan, kita mungkin perlu mengkonfigurasi HTTP server untuk menentukan ukuran maksimum request body (apabila terlalu besar, dapat terjadi error 413). Pada Apache HTTP Server, kita dapat menggunakan directive LimitRequestBody.
Terima kasih telah membaca :)
Terakhir diupdate pada 2025-02-08 (dibuat pada 2025-02-01).