Google File Picker API with Google Drive (Google App Script)

Google File Picker API with Google Drive
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 service in the world that, developed by Google. Google is a safe and trusted point. And we most of the time engaged with Google in our daily life and using Google's product 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, when it comes to start using Cloud store, We can start using Drive because of our data safety.

Here’s whole living proof. That shows a way to integrate the File Picker API with a Google Apps Script primarily based internet app. You’d have to 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 easily build a File Picker API for Google Drive Remote File Upload. By using the codes in Google Apps Script, that I've provided in this article. I'm damn sure, you will be avail to start using Drive REMOTELY. And this will help you to upload your files to the cloud. As your personal or commercial use. As it is 100% free to use the codes on Apps Scripts to any purpose.

Last Worlds,

You can use this script to store or upload your personal files to Drive. Or start uploading your website's files like Audio, Video, and Images to Drive. Also, you use js files on your website from Drive as CDN.
Google File Picker API with Google Drive (Google App Script) Google File Picker API with Google Drive (Google App Script) Reviewed by Abdul Alim on January 06, 2020 Rating: 5

No comments:

Powered by Blogger.