Assalamualaikum.wr.wb, pada kesempatan kali ini saya akan share cara upload file ke google drive. Biasanya bila kita upload file dari google drive, kita harus masuk ke laman drive.google.com.
Apakah kita bisa upload file ke google drive tanpa login?, bahkan upload google drive langsung dari blog kita?.
Tentunya hal ini sangat tidak mungkin terjadi, pasalnya syarat yang harus dilakukan adalah login ke google terlebih dahulu. Hal tersebut juga saya alami saat ada pertanyaan demikian dari client saya, sebelum saya menemukan cara yang akan menjadi pembahasan kali ini.
Baiklah, untuk upload file di google drive tanpa login ke akun google ternyata cukuplah mudah, bahkan kita bisa juga menaruhnya di blog kita. Kita hanya butuh membuatnya di layanan script.google.com dan membuat iframe diblog kita.
Lebih lanjut, silahkan simak tutorial berikut ini:
Pertama, login akun google.
Kedua, menuju ke script.google.com
Ketiga, klik "buat project baru" nanti akan diarahkan ke tab baru.
Keempat, copy kode berikut ini, dan pastekan ke dalam tab file code.gs (sebelum paste hapus code function myFunction .... terlebih dahulu)
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('form');
var output = html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return output
}
function uploadFileToDrive(base64Data, fileName) {
try{
var splitBase = base64Data.split(','),
type = splitBase[0].split(';')[0].replace('data:','');
var byteCharacters = Utilities.base64Decode(splitBase[1]);
var ss = Utilities.newBlob(byteCharacters, type);
ss.setName(fileName);
var dropbox = "Eksperiment"; // Folder Name
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var file = folder.createFile(ss);
return file.getName();
}catch(e){
return 'Error: ' + e.toString();
}
}
Keterangan:
Ganti nama "Eksperiment" dengan folder yang ada di google drive Anda. Bila belum membuat sebuah folder untuk tempat file saat diupload Anda bisa masuk google drive, dan pilih buat folder baru.
Untuk "form" adalah nama HTML yang akan kita buat.
Kelima, Tetap di script.google.com, buatlah file baru dengan nama form caranya klik menu file - pilih baru - klik file HTML. Jika sudah nanti akan muncul modal untuk mengisi nama file, buat aja dengan nama "form".
Keenam, pada tab form.html, pastekan kode dibawah ini:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
max-width: 300px;
width: 100%;
padding: 20px;
margin: auto;
background: #fff;
font-family: sans-serif;
font-size: 14px;
}
#formcontainer {
position: relative;
display: block;
margin: auto;
text-align: center;
}
#myForm {
position: relative;
display: block;
margin: 10px auto;
}
.select-file, .upload-file {
display: table;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ddd;
text-align: right;
}
.title-select-file, .title-upload-file {
display: table-cell;
font-size: 14px;
font-weight: bold;
width: 100px;
vertical-align: top;
line-height: normal;
}
.option-select-file, .input-upload-file {
line-height: normal;
padding-left: 10px;
margin-bottom: 10px;
display: table-cell;
vertical-align: top;
font-size: 14px;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0 0 15px 0;
color: #555;
font-size: 14px;
width: 100%;
border: 0;
outline: none;
}
input#myFile {
position: relative;
display: block;
padding: 0 0 15px 0;
outline: none;
border: none;
text-align: left;
width: 100%;
max-width: 100px;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Pilih File';
position: relative;
display: inline-block;
color: #fff;
background: #003961;
border: 1px solid #fff;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
box-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 12px;
margin: auto;
text-align: center;
}
input[type="button"] {
position: relative;
display: block;
width: 100%;
padding: 5px 15px;
background: #003961;
color: #fff;
margin: auto;
text-align: center;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
}
#progressbar{
width: 100%;
text-align: center;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.progress-label {
float: left;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
width: 100%;
height: 100%;
position: relative;
vertical-align: middle;
display: block;
}
</style>
</head>
<body>
<div id="formcontainer">
<form id="myForm">
<div class="select-file">
<div class="title-select-file">
Type File :
</div>
<div class="option-select-file">
<div class="option-select-file-wrap">
<select name="attachType">
<option value="defaule">Pilih Type File</option>
<option value="Pictures Only">Image</option>
<option value="Pictures & Proposals">Semua Type</option>
</select>
</div>
</div>
</div>
<div class="upload-file">
<div class="title-upload-file">
Upload File :
</div>
<div class="input-upload-file">
<input type="file" name="filename" id="myFile" class="custom-file-input" multiple>
</div>
</div>
<input type="button" value="Upload" onclick="iteratorFileUpload()">
</form>
</div>
<div id="output"></div>
<div id="progressbar">
<div class="progress-label"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;
// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
var allFiles = document.getElementById('myFile').files;
if (allFiles.length == 0) {
alert('No file selected!');
} else {
//Show Progress Bar
numUploads.total = allFiles.length;
$('#progressbar').progressbar({
value : false
});//.append("<div class='caption'>37%</div>");
$(".progress-label").html('Proses upload file');
// Send each file at a time
for (var i = 0; i < allFiles.length; i++) {
console.log(i);
sendFileToDrive(allFiles[i]);
}
}
}
function sendFileToDrive(file) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log('Sending ' + file.name);
var currFolder = 'Eksperiment';
google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder);
}
reader.readAsDataURL(file);
}
function updateProgressbar( idUpdate ){
console.log('Received: ' + idUpdate);
numUploads.done++;
var porc = Math.ceil((numUploads.done / numUploads.total)*100);
$("#progressbar").progressbar({value: porc });
$(".progress-label").text(numUploads.done +'/'+ numUploads.total + ' file berhasil terupload');
if( numUploads.done == numUploads.total ){
//uploadsFinished();
numUploads.done = 0;
};
}
</script>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
</body>
</html>
Ketujuh, Silahkan kembali ke kode.gs
Kedelapan, klik icon Save untuk menyimpan file, dan jangan lupa beri nama file.
Kesembilan, klik menu Publikasikan kemudian pilih Terapkan sebagai aplikasi web. Jika sudah akan muncul modal popup. Untuk project version isi aja dengan nomor 1, execute the app as biarkan saja me (email@gmail.com), dan who has access to the app pilih anyone, even anonymous. Jika sudah klik deploy
Setelah itu akan ada popup Authorization Requered tujuannya untuk mengizinkan project kita membaca, membuat, dan menghapus file yang ada di google drive. Oleh karena itu kita klik aja Review Permission - Pilih akun google - klik lanjutan - klik tulisan ... tidak aman (yang ada dibawah sendiri) - klik izinkan
Kesepuluh, klik Test web app for your latest code yang ada dibawah link Current web app URL: maka akan terbuka jendela baru
Terakhir, copy link web app URL di bagian jendela baru tersebut sebelum Anda klik OK. Karena link tersebut yang akan kita buat untuk upload file ke google drive
Sampai disini, sebenarnya sudah selesai kita membuat web app upload file ke google driva. Jika kita ingin menampilkan web app tersebut ke blog kita, caranya jadikan sebagai iframe. berikut kodenya
<iframe src="link web app" width="200" height="200"></iframe>
Keterangan: ganti tulisan "link web app" dengan link yang barusan Anda buat.
0 komentar:
Post a Comment