Upload a Hml File to Google Drive
www.azid45.web.id - Cara Upload File Ke Google Drive di Blogger (With Script Google). 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 customer 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 lawmaking.gs (sebelum paste hapus code function myFunction .... terlebih dahulu)
office doGet() { var html = HtmlService.createHtmlOutputFromFile('form'); var output = html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); return output } function uploadFileToDrive(base64Data, fileName) { endeavour{ var splitBase = base64Data.split(','), blazon = splitBase[0].split(';')[0].supersede('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.adjacent(); } else { binder = DriveApp.createFolder(dropbox); } var file = binder.createFile(ss); return file.getName(); }catch(e){ return 'Error: ' + e.toString(); } } Keterangan:
Ganti nama "Eksperiment" dengan binder yang ada di google bulldoze Anda. Bila belum membuat sebuah folder untuk tempat file saat diupload Anda bisa masuk google bulldoze, dan pilih buat binder baru.
Untuk "grade" adalah nama HTML yang akan kita buat.
Kelima, Tetap di script.google.com, buatlah file baru dengan nama form caranya klik carte du jour 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 of operations target="_top"> <style> body { max-width: 300px; width: 100%; padding: 20px; margin: auto; groundwork: #fff; font-family: sans-serif; font-size: 14px; } #formcontainer { position: relative; brandish: block; margin: machine; text-align: center; } #myForm { position: relative; display: block; margin: 10px auto; } .select-file, .upload-file { display: table; width: 100%; margin: 10px 0; border-lesser: 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-summit: normal; } .option-select-file, .input-upload-file { line-elevation: normal; padding-left: 10px; margin-bottom: 10px; brandish: table-prison cell; vertical-align: elevation; font-size: 14px; } select { advent: none; -webkit-appearance: none; -moz-appearance: none; padding: 0 0 15px 0; color: #555; font-size: 14px; width: 100%; edge: 0; outline: none; } input#myFile { position: relative; brandish: block; padding: 0 0 15px 0; outline: none; border: none; text-align: left; width: 100%; max-width: 100px; } .custom-file-input::-webkit-file-upload-push button { visibility: subconscious; } .custom-file-input::before { content: 'Pilih File'; position: relative; display: inline-cake; 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-marshal: center; } input[blazon="button"] { position: relative; display: block; width: 100%; padding: 5px 15px; background: #003961; color: #fff; margin: motorcar; text-align: center; border: none; outline: none; border-radius: 5px; cursor: arrow; } #progressbar{ width: 100%; text-align: center; overflow: hidden; position: relative; vertical-align: center; } .progress-label { float: left; margin-top: 5px; font-weight: bold; text-shadow: 1px 1px 0 #fff; width: 100%; height: 100%; position: relative; vertical-marshal: middle; brandish: block; } </style> </head> <body> <div id="formcontainer"> <grade id="myForm"> <div class="select-file"> <div grade="title-select-file"> Type File : </div> <div course="selection-select-file"> <div class="option-select-file-wrap"> <select name="attachType"> <option value="defaule">Pilih Type File</option> <choice value="Pictures Only">Image</option> <option value="Pictures & Proposals">Semua Type</selection> </select> </div> </div> </div> <div course="upload-file"> <div class="championship-upload-file"> Upload File : </div> <div class="input-upload-file"> <input blazon="file" name="filename" id="myFile" form="custom-file-input" multiple> </div> </div> <input blazon="push button" value="Upload" onclick="iteratorFileUpload()"> </course> </div> <div id="output"></div> <div id="progressbar"> <div course="progress-label"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/one.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/i.11.four/jquery-ui.min.js"></script> <script> var numUploads = {}; numUploads.washed = 0; numUploads.total = 0; // Upload the files into a folder in drive // This is prepare to send them all to ane binder (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 form='caption'>37%</div>"); $(".progress-label").html('Proses upload file'); // Send each file at a fourth dimension for (var i = 0; i < allFiles.length; i++) { console.log(i); sendFileToDrive(allFiles[i]); } } } function sendFileToDrive(file) { var reader = new FileReader(); reader.onload = function (east) { var content = reader.result; console.log('Sending ' + file.name); var currFolder = 'Eksperiment'; google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.proper noun, currFolder); } reader.readAsDataURL(file); } part updateProgressbar( idUpdate ){ console.log('Received: ' + idUpdate); numUploads.done++; var porc = Math.ceil((numUploads.done / numUploads.full)*100); $("#progressbar").progressbar({value: porc }); $(".progress-characterization").text(numUploads.done +'/'+ numUploads.total + ' file berhasil terupload'); if( numUploads.done == numUploads.total ){ //uploadsFinished(); numUploads.done = 0; }; } </script> <script> function fileUploaded(condition) { document.getElementById('myForm').style.display = 'none'; document.getElementById('output').innerHTML = status; } </script> </torso> </html> Ketujuh, klik icon Salve untuk menyimpan file, dan jangan lupa beri nama file.
Kedelapan, 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 bearding. Jika sudah klik deploy
Setelah itu akan ada popup Potency 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
Terakhir, copy link dibagian current web app URL 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" peak="200"></iframe>
Keterangan: ganti tulisan "link web app" dengan link yang barusan Anda buat.
Demikianlah caraCara Upload File Ke Google Drive di Blogger (With Script Google). Semoga bermanfaat. Amin
Source Code: Stackoverflow.com
Comingsoon : Cara Membuat Lisensi Template Blogger dengan JSON di Google Sheet
Source: https://www.azid45.web.id/2020/11/upload-file-di-google-drive.html
0 Response to "Upload a Hml File to Google Drive"
Publicar un comentario