javascript - example - Carga de múltiples archivos a Google Drive con Google App Script
manual de google apps script (5)
Actualizado para mayo de 2017
Actualicé y mejoré la respuesta de barragan.
Ventajas:
- Permite a los usuarios crear un nombre de subcarpeta para contener todos los archivos cargados durante esta sesión
- Asegura que todas estas subcarpetas existan dentro de una carpeta específica dentro de su Google Drive
- La página / formulario es móvil
Puede comenzar con este ejemplo solo para crear el script y conocer los conceptos básicos.
Entonces puede reemplazar completamente form.html con esto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Send Files
</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
function afterSubfolderCreated(subfolderId) {
console.log(subfolderId);
console.log(allFiles);
numUploads.total = allFiles.length;
$(''#progressbar'').progressbar({
value: false
});
$(".progress-label").html(''Preparing files for upload'');
for (var i = 0; i < allFiles.length; i++) {
console.log(i);
sendFileToDrive(allFiles[i], subfolderId);
}
}
function sendFileToDrive(file, subfolderId) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log(''Sending '' + file.name);
google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, subfolderId);
}
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);
if (numUploads.done == numUploads.total) {
numUploads.done = 0;
$(".progress-label").text($(".progress-label").text() + '': FINISHED!'');
$("#progressbar").after(''(Optional) Refresh this page if you remembered other screenshots you want to add.'');//<a href="javascript:window.top.location.href=window.top.location.href"> does not work
}
}
function fileUploaded(status) {
document.getElementById(''myForm'').style.display = ''none'';
document.getElementById(''output'').innerHTML = status;
}
var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;
var allFiles;
var frm = $(''#myForm'');
frm.submit(function () {
allFiles = document.getElementById(''myFile'').files;
if (!frm.checkValidity || frm.checkValidity()) {
if (allFiles.length == 0) {
alert(''Error: Please choose at least 1 file to upload.'');
return false;
} else {
frm.hide();
var subfolderName = document.getElementById(''myName'').value;
$.ajax({
url: '''',//URL of webhook endpoint for sending a Slack notification
data: {
title: subfolderName + '' is uploading screenshots'',
message: ''''
}
});
google.script.run.withSuccessHandler(afterSubfolderCreated).createSubfolder(subfolderName);
return false;
}
} else {
alert(''Invalid form'');
return false;
}
});
});//end docReady
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
body {
padding: 20px;
margin: auto;
font-size: 20px;
}
label{
font-weight: bold;
}
input{
font-size: 20px;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.hint{
font-size: 90%;
color: #666;
}
select {
margin: 5px 0px 15px 0px;
}
input[type="file"] {
padding: 5px 0px 15px 0px;
}
#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: absolute;
vertical-align: middle;
}
li{
padding: 10px;
}
@media only screen and (max-width : 520px) {
#logo {
max-width: 100%;
}
}
</style>
</head>
<body>
<p>
<img src="" id="logo">
</p>
<p>This webpage allows you to send me screenshots of your dating profiles.</p>
<ol>
<li>
In each of your dating apps, take a screenshot <a href="https://www.take-a-screenshot.org/" target="_blank">(how?)</a> of every part of every page of your profile.
</li>
<li>
Do the same for each of your photos (at full resolution).
</li>
<li>
In the form below, type your first name and last initial (without any spaces or special characters), such as SallyT.
</li>
<li>
Then click the first button and select all of your screenshot images (all at once).
</li>
<li>
Finally, press the last button to send them all to me!
</li>
</ol>
<form id="myForm">
<div>
<label for="myName">Your first name and last initial:</label>
</div>
<div>
<input type="text" name="myName" id="myName" placeholder="SallyT" required pattern="[a-zA-Z]+" value="">
</div>
<div>
<span class="hint">(No spaces or special characters allowed because this will determine your folder name)</span>
</div>
<div style="margin-top: 20px;">
<label for="myFile">Screenshot image files:</label>
<input type="file" name="filename" id="myFile" multiple>
</div>
<div style="margin-top: 20px;">
<input type="submit" value="Send File(s) ➔" >
</div>
</form>
<div id="output"></div>
<div id="progressbar">
<div class="progress-label"></div>
</div>
</body>
</html>
Y reemplace completamente server.gs con esto:
function doGet() {
var output = HtmlService.createHtmlOutputFromFile(''form'');
output.addMetaTag(''viewport'', ''width=device-width, initial-scale=1'');// See http://stackoverflow.com/a/42681526/470749
return output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function uploadFileToDrive(base64Data, fileName, subfolderId) {
Logger.log(subfolderId);
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 subfolder = DriveApp.getFolderById(subfolderId);
var file = subfolder.createFile(ss);
Logger.log(file);
return file.getName() + '' at '' + file.getUrl();
} catch(e){
return ''createFile Error: '' + e.toString();
}
}
function createSubfolder(subfolderName){
var dropbox = subfolderName + Utilities.formatDate(new Date(), "US/Eastern", "_yyyy-MM-dd");
Logger.log(dropbox);
var parentFolderId = "{ID such as 0B9iQ20nrMNYAaHZxRjd}";
var parentFolder = DriveApp.getFolderById(parentFolderId);
var folder;
try {
folder = parentFolder.getFoldersByName(dropbox).next();
}
catch(e) {
folder = parentFolder.createFolder(dropbox);
}
Logger.log(folder);
return folder.getId();
}
Estoy tratando de cargar varios archivos a la vez con mi aplicación. Reconoce cuando hay 2 o más archivos seleccionados. Sin embargo, solo cargará el primer archivo seleccionado en mi unidad. Además (aunque bastante menor), me preguntaba cómo puedo cambiar mi fuente de área de texto para que sea Times New Roman para mantener la coherencia con el resto de la fuente.
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile(''form'')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function uploadFiles(form) {
try {
var foldertitle = form.zone + '' | Building: '' + form.building + '' | '' + form.propertyAddress + '' | '' + form.attachType;
var folder, folders = DriveApp.getFolderById("0B7UEz7SKB72HfmNmNnlSM2NDTVVUSlloa1hZeVI0VEJuZUhSTmc4UXYwZjV1eWM5YXJPaGs");
var createfolder = folders.createFolder(foldertitle);
folder = createfolder;
var blob = form.filename;
var file = folder.createFile(blob);
file.setDescription(" " + form.fileText);
return "File(s) uploaded successfully! Here is the link to your file(s): " + folder.getUrl();
} catch (error) {
Logger.log(''err: '' + error.toString());
return error.toString();
}
}
function uploadArquivoParaDrive(base64Data, nomeArq, idPasta) {
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(nomeArq);
var file = DriveApp.getFolderById("0B7UEz7SKB72HfmNmNnlSM2NDTVVUSlloa1hZeVI0VEJuZUhSTmc4UXYwZjV1eWM5YXJPaGs").createFile(ss);
return file.getName();
}catch(e){
return ''Erro: '' + e.toString();
}
}
form.html
<body>
<div id="formcontainer">
<label for="myForm">Facilities Project Database Attachment Uploader:</label>
<br><br>
<form id="myForm">
<label for="myForm">Project Details:</label>
<div>
<input type="text" name="zone" placeholder="Zone:">
</div>
<div>
<input type="text" name="building" placeholder="Building(s):">
</div>
<div>
<input type="text" name="propertyAddress" placeholder="Property Address:">
</div>
<div>
<label for="fileText">Project Description:</label>
<TEXTAREA name="projectDescription"
placeholder="Describe your attachment(s) here:"
style ="width:400px; height:200px;"
></TEXTAREA>
</div>
<br>
<label for="attachType">Choose Attachment Type:</label>
<br>
<select name="attachType">
<option value="Pictures Only">Picture(s)</option>
<option value="Proposals Only">Proposal(s)</option>
<option value="Pictures & Proposals">All</option>
</select>
<br>
<label for="myFile">Upload Attachment(s):</label>
<br>
<input type="file" name="filename" id="myFile" multiple>
<input type="submit" value="Submit" onclick="iteratorFileUpload()">
</form>
</div>
<div id="output"></div>
<script>
function iteratorFileUpload() {
var allFiles = document.getElementById(''myFile'').files;
if (allFiles.length == 0) {
alert(''No file selected!'');
} else {
// Send each file one at a time
var i=0;
for (i=0; i < allFiles.total; i+=1) {
console.log(''This iteration: '' + i);
sendFileToDrive(allFiles[i]);
};
};
};
function sendFileToDrive(file) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log(''Sending '' + file.name);
google.script.run
.withSuccessHandler(fileUploaded)
.uploadArquivoParaDrive(content, file.name, currFolder);
}
reader.readAsDataURL(file);
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
// Upload de arquivo dentro das pastas Arquivos Auxiliares
function iterarArquivosUpload() {
var arquivos = document.getElementById(''inputUpload'').files;
if (arquivos.length == 0) {
alert(''No file selected!'');
} else {
//Show Progress Bar
numUploads.total = arquivos.length;
$(''.progressUpload'').progressbar({
value : false
});
$(''.labelProgressUpload'').html(''Preparando arquivos para upload'');
// Send each file at a time
for (var arqs = 0; arqs < numUploads.total; arqs++) {
console.log(arqs);
enviarArquivoParaDrive(arquivos[arqs]);
}
}
}
function enviarArquivoParaDrive(arquivo) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log(''Sending '' + arquivo.name);
google.script.run.withSuccessHandler(updateProgressbar).uploadArquivoParaDrive(content, arquivo.name, currFolder);
}
reader.readAsDataURL(arquivo);
}
function updateProgressbar( idUpdate ){
console.log(''Received: '' + idUpdate);
numUploads.done++;
var porc = Math.ceil((numUploads.done / numUploads.total)*100);
$(''.progressUpload'').progressbar({value: porc });
$(''.labelProgressUpload'').html(numUploads.done +''/''+ numUploads.total);
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>
<style>
body {
max-width: 400px;
padding: 20px;
margin: auto;
}
input {
display: inline-block;
width: 100%;
padding: 5px 0px 5px 5px;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
margin: 5px 0px 15px 0px;
}
input[type="submit"] {
width: auto !important;
display: block !important;
}
input[type="file"] {
padding: 5px 0px 15px 0px !important;
}
</style>
</body>
Como la respuesta de @ barragan aquí es la mejor respuesta que encontré después de horas y horas de búsqueda de una pregunta que mucha gente estaba haciendo, he hecho un poco de desarrollo para mejorar un poco el diseño para otros como agradecimiento. Todavía algunos errores y Chrome parece quedarse sin memoria y renunciar a cualquier archivo de más de 100 MB
server.gs
''function doGet() {
return HtmlService.createHtmlOutputFromFile(''form'')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
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 = "Something"; // 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();
}
}
''
form.html
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Focallocal Uploader</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<div align="center">
<p><img src="http://news.focallocal.org/wp-content/uploads/2015/03/FOCALLOCAL-Website-Text-Header.png" width="80%"></p>
</div>
</head>
<body>
<div id="formcontainer" width="50%">
<label for="myForm">Focallocal Community G.Drive Uploader</label>
<br>
<br>
<form id="myForm" width="50%">
<label for="myForm">Details</label>
<div>
<input type="text" name="Name" placeholder="your name">
</div>
<div>
<input type="text" name="gathering" placeholder="which fabulous Positive Action you''re sending us">
</div>
<div>
<input type="text" name="location" placeholder="the town/village/city and country month brightend by positivity">
</div>
<div>
<input type="text" name="date" placeholder="date of the beautiful action">
</div>
<div width="100%" height="200px">
<label for="fileText">would you like to leave a short quote?</label>
<TEXTAREA name="Quote"
placeholder="many people would love to share in your experience. if you have more than a sentence or two to write, why not writing an article the Community News section of our website?"
></TEXTAREA>
</div>
<br>
<br>
<label for="myFile">Upload Your Files:</label>
<br>
<input type="file" name="filename" id="myFile" multiple>
<input type="button" value="Submit" 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>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<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(''Preparing files for upload'');
// 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 = ''Something'';
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);
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>
<style>
body {
max-width: 60%;
padding: 20px;
margin: auto;
}
input {
display: inline-block;
width: 50%;
padding: 5px 0px 5px 5px;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
margin: 5px 0px 15px 0px;
}
input[type="submit"] {
width: auto !important;
display: block !important;
}
input[type="file"] {
padding: 5px 0px 15px 0px !important;
}
#progressbar{
width: 40%;
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: absolute;
vertical-align: middle;
}
</style>
</body>
no pude obtener los campos de texto para enviar un correo electrónico con los detalles, y se me acabó el tiempo antes de averiguar cómo conectarlos a una hoja de cálculo de Google, por lo que por el momento no registran la información agregada
Como una ventaja adicional, se veía fabuloso con está en el formulario.html
<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red" href="https://focallocal-a-positive-action-movement.myshopify.com/" target="_blank" title="Pimp your Cool at the Positive Action Shop"><i class="material-icons">monetization_on</i></a></li>
<li><a class="btn-floating blue" href="https://www.youtube.com/user/Focallocal" target="_blank" title="Follow the Positive Action Youtube Channel"><i class="material-icons">video_library</i></a></li>
<li><a class="btn-floating green" href="http://focallocal.org/" target="_blank" title="Read our About Us Page"><i class="material-icons">help</i></a></li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>
Lo saqué nuevamente ya que algunos de los scripts que se estaban llamando estaban causando problemas. si alguien puede solucionarlo, agregan mucho a la apariencia y funcionalidad del formulario
* editar: he estado jugando con él y parece que solo la mitad de los archivos enviados parecen llegar, por lo que todavía hay algunos problemas con los dos códigos aquí atm
Debe enviar un archivo a la vez a través del script.run, aquí está mi implementación con FileReaders / ReadAsURL, que hace que el archivo sea una cadena Base64, que se puede pasar fácilmente:
Notas:
- No sé si es necesario pero estoy usando el sandbox IFRAME
- Dejé la barra de progreso en el código, puedes eliminarlo
- Todo debe estar FUERA de un formulario
- Acepta cualquier tipo de archivo.
HTML:
// Upload de arquivo dentro das pastas Arquivos Auxiliares
function iterarArquivosUpload() {
var arquivos = document.getElementById(''inputUpload'').files;
if (arquivos.length == 0) {
alert(''No file selected!'');
} else {
//Show Progress Bar
numUploads.total = arquivos.length;
$(''.progressUpload'').progressbar({
value : false
});
$(''.labelProgressUpload'').html(''Preparando arquivos para upload'');
// Send each file at a time
for (var arqs = 0; arqs < numUploads.total; arqs++) {
console.log(arqs);
enviarArquivoParaDrive(arquivos[arqs]);
}
}
}
function enviarArquivoParaDrive(arquivo) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log(''Sending '' + arquivo.name);
google.script.run.withSuccessHandler(updateProgressbar).uploadArquivoParaDrive(content, arquivo.name, currFolder);
}
reader.readAsDataURL(arquivo);
}
function updateProgressbar( idUpdate ){
console.log(''Received: '' + idUpdate);
numUploads.done++;
var porc = Math.ceil((numUploads.done / numUploads.total)*100);
$(''.progressUpload'').progressbar({value: porc });
$(''.labelProgressUpload'').html(numUploads.done +''/''+ numUploads.total);
if( numUploads.done == numUploads.total ){
uploadsFinished();
numUploads.done = 0;
};
}
Code.GS
function uploadArquivoParaDrive(base64Data, nomeArq, idPasta) {
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(nomeArq);
var file = DriveApp.getFolderById(idPasta).createFile(ss);
return file.getName();
}catch(e){
return ''Erro: '' + e.toString();
}
}
Me uní al montón de respuestas anteriores, pero esto realmente me ayudó cuando implementé mi propia carga múltiple de archivos para obtener archivos en Google Drive usando la API DriveApp V3.
Escribí y publiqué mi propia solución aquí: https://github.com/CharlesPlucker/drive-multi-upload/
Mejoras: - Maneja múltiples archivos secuencialmente - Maneja archivos grandes> 50MB - Validación
Envolví mis llamadas de API de Google en promesas ya que me encontraba con problemas de sincronización al crear una carpeta e inmediatamente trataba de buscarla por referencia de nombre. Cada una de mis promesas solo se resolverá cuando su archivo esté completamente cargado. Para que eso funcione, tuve que usar Promise Factory. ¡Estaré encantado de explicar este código si surge la necesidad!
Sé que esta pregunta es antigua, pero después de encontrarla y otras relacionadas, nunca pude hacer funcionar la carga de múltiples archivos. Entonces, después de mucho golpearme la cabeza contra las paredes, quería publicar un ejemplo completo (.html y .gs) en caso de que alguien en el futuro esté buscando uno para comenzar. Esto funciona cuando lo implemento en este momento y espero que funcione para otras personas. Tenga en cuenta que acabo de codificar la carpeta en la unidad para usarla en el archivo code.gs, pero eso se puede cambiar fácilmente.
form.html:
<body>
<div id="formcontainer">
<label for="myForm">Facilities Project Database Attachment Uploader:</label>
<br><br>
<form id="myForm">
<label for="myForm">Project Details:</label>
<div>
<input type="text" name="zone" placeholder="Zone:">
</div>
<div>
<input type="text" name="building" placeholder="Building(s):">
</div>
<div>
<input type="text" name="propertyAddress" placeholder="Property Address:">
</div>
<div>
<label for="fileText">Project Description:</label>
<TEXTAREA name="projectDescription"
placeholder="Describe your attachment(s) here:"
style ="width:400px; height:200px;"
></TEXTAREA>
</div>
<br>
<label for="attachType">Choose Attachment Type:</label>
<br>
<select name="attachType">
<option value="Pictures Only">Picture(s)</option>
<option value="Proposals Only">Proposal(s)</option>
<option value="Pictures & Proposals">All</option>
</select>
<br>
<label for="myFile">Upload Attachment(s):</label>
<br>
<input type="file" name="filename" id="myFile" multiple>
<input type="button" value="Submit" 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>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<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(''Preparing files for upload'');
// 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 = ''Something'';
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);
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>
<style>
body {
max-width: 400px;
padding: 20px;
margin: auto;
}
input {
display: inline-block;
width: 100%;
padding: 5px 0px 5px 5px;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
margin: 5px 0px 15px 0px;
}
input[type="submit"] {
width: auto !important;
display: block !important;
}
input[type="file"] {
padding: 5px 0px 15px 0px !important;
}
#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: absolute;
vertical-align: middle;
}
</style>
</body>
code.gs:
function doGet() {
return HtmlService.createHtmlOutputFromFile(''form'')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
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 = "Something"; // 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();
}
}