Selector de archivos con Google Picker

como mostrar un selector de archivos y carpetas - Google picker

En el archivo .gs o Google script tendremos 3 funciones:

onOpen para mostrar el menú personalizado
showPicker.- que mostrara la venta web flotante con el picker o selector
getOAuthToken.- que dará los permisos necesarios.

Para el archivo html usaremos uno con nombre Picker.html

el cual será llamado desde la funcion showPicker

Paso a Paso:

debes tener 2 archivos , el gs o script y el html
en el script debes copiar el código que te dejo para una rápida reproducción de este ejemplo
copiar el contenido para el archivo html ( que puedes tener al final de este articulo)
asegúrate de guardar todos los cambios
ejecutar desde el menú personalizado de la hoja de calculo.

Consulta el código y el archivo HTML al final de este articulo 🔎

Vídeo

si el tema fue de utilidad comparte este articulo con otras personas, y regálame un like en el canal de YouTube, nos ayudarías mucho haciendo difusión de estas propuestas 😉

👉 más temas de HCG

código para el archivo gs (script)

function onOpen() {

SpreadsheetApp.getUi().createMenu('📕 Google Picker')

.addItem('📂 Elija un Folder/Archivo', 'showPicker')

.addToUi();

}

function showPicker() {

var html = HtmlService.createHtmlOutputFromFile('Picker.html')

.setWidth(600)

.setHeight(425)

.setSandboxMode(HtmlService.SandboxMode.IFRAME);

SpreadsheetApp.getUi().showModalDialog(html, '📁 Selecciona el Folder/archivo');

}

function getOAuthToken() {

DriveApp.getRootFolder();

return ScriptApp.getOAuthToken();

}

/* Tomado de: https://www.labnol.org/code/20039-google-picker-with-apps-script?fbclid=IwAR1df9Tt30Ls9IDlAuHkdj5VWxbIt2BZbdkhUipIhZzs6dPcz81FnxneyIE

ver los tipos de archivo en : https://developers.google.com/drive/api/v3/mime-types?hl=en */

código para archivo web o html

<!DOCTYPE html>

<html>

<head>

var DIALOG_DIMENSIONS = {width: 600,height: 425};

var pickerApiLoaded = false;

function onApiLoad() {

gapi.load('picker', {

'callback': function() {

pickerApiLoaded = true;

}

});

google.script.run.withSuccessHandler(createPicker)

.withFailureHandler(showError).getOAuthToken();

}

function createPicker(token) {

if (pickerApiLoaded && token) {

var docsView = new google.picker.DocsView()

.setIncludeFolders(true)

.setSelectFolderEnabled(true)

//.setQuery('type:form'); //establece la busqueda perdeterminada

//.setQuery('type:document'); //muestra varios tipos de documentos

/* .setSelectableMimeTypes(folder,hcg,doc,form,pres)//https://developers.google.com/picker/docs/reference?hl=en

.setMimeTypes('application/vnd.google-apps.folder')

.setMimeTypes('application/vnd.google-apps.spreadsheet')

.setMimeTypes('application/vnd.google-apps.form')

.setMimeTypes('application/vnd.google-apps.document')

.setMimeTypes('application/vnd.google-apps.presentation')

el ultimo mimetype es el que aplica

si no se especifica el mimetype se mostraran todos :)

.setSelectFolderEnabled(true); */

var picker = new google.picker.PickerBuilder()

.addView(docsView)

.enableFeature(google.picker.Feature.NAV_HIDDEN)

.hideTitleBar()

.setSize(DIALOG_DIMENSIONS.width - 2, DIALOG_DIMENSIONS.height - 2)

.setOAuthToken(token)

.setCallback(pickerCallback)

.setOrigin('https://docs.google.com')

.build();

picker.setVisible(true);

} else {

showError('No se puede cargar el selector de archivos.');

}

/**

* A callback function that extracts the chosen document's metadata from the

* response object. For details on the response object, see

* https://developers.google.com/picker/docs/result

*

* @param {object} data The response object.

*/

function pickerCallback(data) {

var action = data[google.picker.Response.ACTION];

if (action == google.picker.Action.PICKED) {

var doc = data[google.picker.Response.DOCUMENTS][0];

var id = doc[google.picker.Document.ID];

var nombre = doc[google.picker.Document.NAME];

var enlace = doc[google.picker.Document.URL];

var carpeta = doc[google.picker.Document.PARENT_ID];

var mimetipo = doc[google.picker.Document.MIME_TYPE];

var ico = doc[google.picker.Document.ICON_URL];

var ext = mimetipo.replace('application/vnd.google-apps.','')

var tipoDoc = doc[google.picker.Document.TYPE];

var rutFolder = 'https://drive.google.com/drive/folders/'+carpeta;

var iframe = doc[google.picker.Document.EMBEDDABLE_URL];

// Show the ID of the Google Drive folder

//document.getElementById('result').innerHTML = 'El ID es: ' + id;

document.getElementById('nombre').innerHTML = '<b>Nombre: </b>'

+ '<a target="_blank" href="'+enlace+'">'+nombre+'</a>';

document.getElementById('id').innerHTML = '<b>ID: </b>' + id;

document.getElementById('Mtipo').innerHTML = '<b>MimeTipo: </b>' + mimetipo;

document.getElementById('tipo').innerHTML = '<b>Tipo: </b>' + tipoDoc + " - "

+ ext + " - icono asociado: " + '<img src="'+ ico +'">'

+ ' - Ruta icono: ' + '<a target="_blank" href="'+ico+'">Ruta</a>';

//document.getElementById('img').innerHTML = '<a href="'+ico+'">'+ico+'</a>'; //ico;

document.getElementById('carp').innerHTML = '<b>Ver en: </b>'

+ '<a target="_blank" href="'+rutFolder+'">📁 Folder</a>';

document.getElementById('iframe').innerHTML = '<b>Vista previa: </b>'

+ '<iframe src="'+iframe+'" height="200" width="100%" ></iframe>';

//document.getElementById('carp').innerHTML = '<b>En folder: </b>' + '<a href="'+rutFolder+'">'+rutFolder+'</a>';

} else if (action == google.picker.Action.CANCEL) {

google.script.host.close();

}

function showError(message) {

document.getElementById('result').innerHTML = 'Error: ' + message;

}

</script>

</head>

<body>

<div>

</div>

</body>

</html>

Nota.- formatea el código si es necesario , ya que he notado que genera un interlineado al momento de copiar y pegar, así que en donde veas necesario elimina los espacios de las filas vacías.

Síguenos y suscríbete en: