|
App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
_________________________________________________
763D.- Subir archivo a Google Drive desde una página web. Subir dato a Google Sheets. Script.
- Vamos a subir archivos a Google Drive desde una página web, también subiremos dos datos a Google Sheets.
- Para crear el Script seguimos los pasos que hemos visto en el tutorial anterior.
- Seguiremos estos códigos:
https://codewithcurt.com/create-file-loader-google-web-app-to-google-drive/
_______________________________
1.- Vamos a nuestro Google Drive, entramos en el Editor de Script.
- Nuevo / Más / Google Apps Script
|
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function LoadFile(event)
{
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var fileData = e.target.result.substr(e.target.result.indexOf(",")+1);
var mimeTypeStart = e.target.result.indexOf("data:") + 5;
var mimeTypeEnd = e.target.result.indexOf(";");
var mimeType = e.target.result.substr(mimeTypeStart, mimeTypeEnd - mimeTypeStart);
var fileName = file.name;
document.getElementById("fileData").value = fileData;
document.getElementById("mimeType").value = mimeType;
document.getElementById("fileName").value = fileName;
};
reader.readAsDataURL(file);
}
</script>
</head>
<body>
<h1>Web App File Loader</h1>
<?var url = getUrl();?>
<form method="post" action="<?= url ?>" >
<table cellpadding="5px">
<tr>
<td>Username:</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>File:</td>
<td><input type="file" name="file" onchange="LoadFile(event)" />
<input type="hidden" id="fileData" name="fileData" />
<input type="hidden" id="mimeType" name="mimeType" />
<input type="hidden" id="fileName" name="fileName" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Load File" /></td>
</tr>
<tr>
<td colspan="2"><span><?= message ?></span></td>
</form>
</body>
</html>
|
- En destination_id ponemos el ID de nuestra carpeta de Google Drive, que deberá estar compartida.
- En url la dirección de nuestro Google Sheets, además también ponemos el nombre de la hoja, en mi caso Sheet1
|
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('UploadFile');
htmlOutput.message = '';
return htmlOutput.evaluate();
}
function doPost(e) {
// Logger.log(JSON.stringify(e));
var destination_id = '1tFhDzSWbc------kT5xXdd7NZ_r'; // ID OF GOOGLE DRIVE DIRECTORY;
var destination = DriveApp.getFolderById(destination_id);
var data = Utilities.base64Decode(e.parameter.fileData);
var blob = Utilities.newBlob(data, e.parameter.mimeType, e.parameter.fileName);
destination.createFile(blob);
listRecord(e.parameter.username, e.parameter.fileName);
var htmlOutput = HtmlService.createTemplateFromFile('UploadFile');
htmlOutput.message = 'File Uploaded';
return htmlOutput.evaluate();
}
function listRecord(username, filename)
{
var url = 'https://docs.google.com/spreadsheets/d/18tlBCVwsi2gi-----OxKqPkwLHBntrdXRc/edit?usp=sharing'; //URL OF GOOGLE SHEET;
var ss= SpreadsheetApp.openByUrl(url);
var recordsSheet = ss.getSheetByName("Sheet1");
recordsSheet.appendRow([username, filename, new Date()]);
}
function getUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
|
- Una vez que tengamos los archivos guardados vamos a Implementar / Nueva implementación.
- Si pulsamos en esa dirección entraremos en la página de subida.
- El archivo subirá a Google Drive y el Username se guardará en Google Sheets.
- Si no quieres utilizar Google Sheets, borra esta línea. También puedes borrar la función listRecord.
// listRecord(e.parameter.username, e.parameter.fileName);
______________________________________________________________
3.- Elegir archivo y subirlo a Google Drive utilizando el VisorWeb.
- En esta página podemos ver una extensión para poder subir y bajar archivos desde una página web con el VisorWeb, he puesto varios ejemplos.
https://community.appinventor.mit.edu/t/webviewextra-upload-download-files-with-webviewer/76346
_____________________________________
|
