The Google File Picker API lets users simply transfer files to Google Drive. And conjointly choose existing files and folders from Drive. The file transfer forms for Google Drive are written in Google apps script. It lets users transfer files to the shape owner's folder through the File Picker API.
As You Know, Google Drive is one of the most popular file storage. And synchronization services in the world developed by Google. Google is a safe and trusted point. And most of the time engage with Google in our daily life and use Google's products or services.
As the trusted point of Google Drive is also popular cloud storage in the industry, for Google's trust and safety policies. We can't think about this online industry without Google. So, we can start using Drive because our data is safe when using cloud storage.
Here's absolute living proof. That shows a way to integrate the file picker API with a Google Apps Script, primarily based internet app. You must be compelled to alter the Google Picker API from your Google Console. And additionally, generate the developer's key. You can check out a demo here.
//Server.gs
function doGet() {
return HtmlService
.createTemplateFromFile("picker")
.evaluate()
.addMetaTag("viewport", "width=device-width, initial-scale=1")
.setTitle("Google Drive Picker")
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function include(fileName) {
return HtmlService
.createHtmlOutputFromFile(fileName)
.getContent();
}
function initPicker() {
return {
locale: 'en',
token: ScriptApp.getOAuthToken(),
origin: "https://script.google.com",
parentFolder: "files",
developerKey: "softinder.com", // Update developerKey
dialogDimensions: {
width: 600,
height: 425
},
picker: {
viewMode: "LIST",
mineOnly: true,
mimeTypes: "image/png,image/jpeg,image/jpg",
multiselectEnabled: true,
allowFolderSelect: true,
navhidden: true,
hideTitle: true,
includeFolders: true,
}
};
}
// picker.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>google.load("picker", "1");</script>
</head>
<body style="margin:20px;">
<div class="block form-group">
<button onclick="openPicker()" type="button" class="btn btn-primary">Select Files</button>
<button onclick="openUploader()" type="button" class="btn btn-primary">Upload Files</button>
<div id="message"></div>
</div>
<?!= include("javascript"); ?>
</body>
</html>
// javascript.html
<script>
function openPicker() {
google.script.run
.withFailureHandler(showMessage)
.withSuccessHandler(showFilePicker)
.initPicker();
}
function openUploader() {
google.script.run
.withFailureHandler(showMessage)
.withSuccessHandler(showFileUploader)
.initPicker();
}
function showFilePicker(config) {
// Show all files in Google Drive for selection
var view = new google.picker.DocsView(google.picker.ViewId.DOCS);
view.setIncludeFolders(config.picker.includeFolders)
.setSelectFolderEnabled(config.picker.allowFolderSelect)
.setParent(config.parentFolder)
// Show file as a grid or list (compact)
if (config.picker.viewMode === "GRID")
view.setMode(google.picker.DocsViewMode.GRID);
else
view.setMode(google.picker.DocsViewMode.LIST);
if (config.picker.mimeTypes)
view.setMimeTypes(config.picker.mimeTypes);
var picker = new google.picker.PickerBuilder()
.addView(view)
.setLocale(config.locale)
.setOAuthToken(config.token)
.setDeveloperKey(config.developerKey)
.setCallback(fileSelected)
.setOrigin(config.origin)
.setSize(config.dialogDimensions.width - 2,
config.dialogDimensions.height - 2);
if (config.picker.hideTitle)
picker.hideTitleBar();
// Show files / folders owned by the user
if (config.picker.mineOnly)
picker.enableFeature(google.picker.Feature.MINE_ONLY);
if (config.picker.navhidden)
picker.enableFeature(google.picker.Feature.NAV_HIDDEN);
// Allow uses to select multiple files / folders
if (config.picker.multiselectEnabled)
picker.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
picker.build().setVisible(true);
}
function showFileUploader(config) {
var upload = new google.picker.DocsUploadView()
upload.setIncludeFolders(config.picker.allowFolderSelect)
// allowFolderSelect and multiselectEnabled should be enabled
// setting parent folder disables folder selection
if (config.parentFolder)
upload.setParent(config.parentFolder);
// Limit the user from uploading specific types
if (config.picker.mimeTypes)
upload.setMimeTypes(config.picker.mimeTypes);
var picker = new google.picker.PickerBuilder()
.addView(upload)
.setLocale(config.locale)
.setOAuthToken(config.token)
.setDeveloperKey(config.developerKey)
.setCallback(fileSelected)
.setOrigin(config.origin)
.setSize(config.dialogDimensions.width - 2,
config.dialogDimensions.height - 2);
if (config.picker.hideTitle)
picker.hideTitleBar();
if (config.picker.navhidden)
picker.enableFeature(google.picker.Feature.NAV_HIDDEN);
if (config.picker.multiselectEnabled)
picker.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
picker.build().setVisible(true);
}
// Callback function
function fileSelected(data) {
var html = [];
var action = data[google.picker.Response.ACTION];
if (action == google.picker.Action.PICKED) {
var documents = data[google.picker.Response.DOCUMENTS];
for (var i = 0 ; i < documents.length ; i++) {
html.push([
documents[i][google.picker.Document.ID],
documents[i][google.picker.Document.NAME],
documents[i][google.picker.Document.MIME_TYPE],
documents[i][google.picker.Document.URL]
].join("\t"));
}
} else if (action == google.picker.Action.CANCEL) {
html.push("No file selected");
}
showMessage(html.join("\n"));
}
function showMessage(message){
document.getElementById("message").innerHTML = message;
}
</script>
You can quickly build a file picker API for Google Drive remote file upload. Using the codes in the Google apps script I provided in this article. I'm damn sure you will be avail to start using Drive remotely. This will help you to upload your files to the cloud for personal or commercial use. It is 100% free to use the codes on app scripts for any purpose.
Last Worlds,
This script can store or upload your personal files to Drive. Or upload your website's files like audio, video, and images to Drive. Also, you use js files on your website from Drive as CDN.
Reviewed by Abdul Alim
on
January 06, 2020
Rating:
No comments: