file upload - docs - Permitir la carga de archivos mĂșltiples en Google Apps Script
google script file id (1)
Puede usar Google Drive Picker , que no tiene límite de carga en los tamaños de archivo. Antes de usar este código, necesita hacer alguna configuración.
- En el editor de scripts, seleccione Recursos> Desarrolladores Consola Project.Enable Drive Api. Después de eso, haga clic en la consola API de Google. Te redirigirá a tu página Administrador de API.
- Luego, haz clic en Habilitar API.
- En el cuadro de filtro, escribe "selector", luego selecciona "Google Picker API"
- En la pantalla siguiente, haz clic en Habilitar API.
- En la barra de navegación izquierda de la consola, haz clic en Credenciales.
- Luego haga clic en "Crear credenciales" y luego en la clave API.
- Una vez que se crea la clave API, edítela haciendo clic en el ícono del lápiz.
- A continuación, cambie la opción "Restricción de claves" a En "Aceptar solicitudes de estos remitentes de HTTP (sitios web)", agregue estas URL como referencias y luego haga clic en Crear:
* .google.com
* .googleusercontent.com - Copie la clave de API y péguelo en el código siguiente.
var DEVELOPER_KEY="key"
También crea una carpeta en google drive donde se cargarán todos los archivos adjuntos. Una vez que se crea la carpeta de la unidad, agregue el id
var uploadview = new google.picker.DocsUploadView().setParent(''<<Drive API>>'');
de la carpeta avar uploadview = new google.picker.DocsUploadView().setParent(''<<Drive API>>'');
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> #attachmentTable{ background: white; } tr th,tr td{ text-align:center; } </style> </head> <body style=''font-family: cursive;''> <div> <center><button onclick=''getOAuthToken()'' style="margin-top:50px;outline:0;" class="btn btn-success">Upload File(s)</button></center> <div class=''table-responsive'' style="display:none;" id="attachmentTableDiv"> <table id="attachmentTable" class="table table-bordered" style="width:900px;margin:20px auto;float:none;"> <thead> <tr style="background:#f1f1f1;"> <th>Title</th> <th>ID</th> <th>URL</th> <th>Date Created</th> <th>Download</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <script> var DEVELOPER_KEY = ''<<YOUR API KEY>>''; var pickerApiLoaded = false; /** * Loads the Google Picker API. */ function onApiLoad() { gapi.load(''picker'', {''callback'': function() { pickerApiLoaded = true; }}); } function getOAuthToken() { google.script.run.withSuccessHandler(createPicker).getOAuthToken(); } function createPicker(token) { if (pickerApiLoaded && token) { // var all = new google.picker.DocsView(google.picker.ViewId.DOCS); //To upload from Google Drive var uploadview = new google.picker.DocsUploadView().setParent(''<<Drive API>>''); //To upload from local machine..Add you google drive folder var picker = new google.picker.PickerBuilder() .addView(uploadview) //.addView(all) .hideTitleBar() //.setLocale(''nl'') //--Regional language settings //.enableFeature(google.picker.Feature.NAV_HIDDEN) .setOAuthToken(token) .setSize(536, 350) .setDeveloperKey(DEVELOPER_KEY) .setCallback(pickerCallback) .setOrigin(google.script.host.origin) .enableFeature(google.picker.Feature.MULTISELECT_ENABLED) .build(); picker.setVisible(true); } else { showError(''Unable to load the file picker.''); } } /** * A callback function that extracts the chosen document''s metadata from the response object. */ function pickerCallback(data) { var action = data[google.picker.Response.ACTION]; if (action == google.picker.Action.PICKED) { for(var i in data[google.picker.Response.DOCUMENTS]){ var doc = data[google.picker.Response.DOCUMENTS][i]; var id = doc[google.picker.Document.ID]; var url = doc[google.picker.Document.URL]; var title = doc[google.picker.Document.NAME]; var dateCreated = doc[google.picker.Document.LAST_EDITED_UTC]; var date = new Date(dateCreated); date=date.toLocaleString(); $(''#attachmentTable tbody'').append("<tr><td>"+title+"</td><td>"+id+"</td><td><a href=''"+url+"'' target=''_blank''>Link</a></td><td>"+date+"</td><td><a href=''https://drive.google.com/drive/uc?export=download&id="+id+"''><i class=''glyphicon glyphicon-download-alt''></i></a></td></tr>"); $(''#attachmentTableDiv'').show(); } } } </script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script>google.load("picker", "1", {callback:function(){pickerApiLoaded =!0}});</script> </body> </html>
code.gs
/* Fetch the oAuthToken */ function getOAuthToken() { DriveApp.getRootFolder(); Logger.log(ScriptApp.getOAuthToken()) return ScriptApp.getOAuthToken(); } function doGet(){ return HtmlService.createTemplateFromFile(''drivePicker'') .evaluate() .setTitle(''Google Drive Picker'') .setSandboxMode(HtmlService.SandboxMode.IFRAME); }
Pregunta
¿Cómo cambio esta secuencia de comandos para permitir que se carguen varios archivos o incluso archivos de más de 5 MB?
Guión actual:
<!-- Written by Amit Agarwal [email protected] -->
<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
<div id="forminner">
<div class="row">
<div class="col s12">
<h5 class="center-align teal-text">Submit My Article</h5>
<p class="disclaimer">This <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">File Upload Form</a> (<a href="https://youtu.be/C_YBBupebvE">tutorial</a>) Powered by <a href="https://ctrlq.org/code/19747-google-forms-upload-files" target="_blank">Google Scripts</a></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
<label for="name">Article Headline</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
<label for="email"><a href="https://www.google.com.tw/search?newwindow=1&rlz=1C1NHXL_zh-TWTW740TW740&q=byline+%E4%B8%AD%E6%96%87&oq=byline+%E4%B8%AD%E6%96%87&gs_l=psy-ab.3..0j0i8i10i30k1.13478.26153.0.27447.10.9.1.0.0.0.139.542.8j1.9.0....0...1.1j4.64.psy-ab..0.6.346...0i67k1j0i22i30k1j33i160k1.7bxnoHhXH84">Byline</a> (English, Chinese and/or <a href="https://www.google.com.tw/search?newwindow=1&rlz=1C1NHXL_zh-TWTW740TW740&q=pseudonym+%E4%B8%AD%E6%96%87&oq=pseudonym+%E4%B8%AD%E6%96%87&gs_l=psy-ab.3..0.2596.6799.0.7633.14.10.4.0.0.0.95.562.10.10.0....0...1.1j4.64.psy-ab..0.10.388...0i22i30k1j33i160k1.YTjT9Ex_16I">Pseudonym</a>)</label>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Select a File to Upload">
</div>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Select a File to Upload">
</div>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Select a File to Upload">
</div>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Select a File to Upload">
</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
</div>
</div>
<div class="row">
<div class="input-field col s12" id = "progress">
</div>
</div>
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">File Uploaded</h5>
<p>Your file has been successfully uploaded.</p>
<p>The <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">pro version</a> (see <a href="">demo form</a>) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>
<p class="center-align"><a class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
</div>
</form>
<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://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
<li><a class="btn-floating blue" href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
<li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
</ul>
</div>
<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>
<script>
var file,
reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name, $(''input#name'').val(), $(''input#email'').val());
}
};
function showSuccess(e) {
if (e === "OK") {
$(''#forminner'').hide();
$(''#success'').show();
} else {
showError(e);
}
}
function submitForm() {
var files = $(''#files'')[0].files;
if (files.length === 0) {
showError("Please select a file to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. Please <a href=''http://www.labnol.org/internet/file-upload-google-forms/29170/'' target=''_blank''>upgrade to premium</a> for receiving larger files in Google Drive");
return;
}
showMessage("Uploading file..");
reader.readAsDataURL(file);
}
function showError(e) {
$(''#progress'').addClass(''red-text'').html(e);
}
function showMessage(e) {
$(''#progress'').removeClass(''red-text'').html(e);
}
</script>
Notas de fondo y disculpas
Hola a todos,
Me doy cuenta de que esta pregunta ya puede ser contestada, pero por favor tengan paciencia conmigo ya que no soy programador y no he escrito este guion yo mismo, así que no estoy seguro de qué respuesta anterior puede aplicarse a mi pregunta.
Dicho esto, estoy más que feliz de eliminar mi pregunta o que se cierre como un duplicado si alguien pudiera indicarme la dirección correcta.
Por último, no estoy casado con este script, así que si alguien tiene un script mejor para sugerir que tiene todas las características (carga de múltiples archivos, sin límite en el tamaño de los archivos), estoy abierto a sugerencias.
También estoy dispuesto a usar cualquier cosa que me permita subir a mi Google Drive, siempre y cuando sea gratis, ya que somos una organización de voluntarios sin fondos y esto es solo para una función que permite a nuestros miembros enviar sus artículos para nuestra organización. hoja informativa.
¡Gracias y lo siento nuevamente por la (posible) pregunta duplicada!