2946 feature request integrate file selector with google drive and onedrive (#3253)

# Description of Changes

Please provide a summary of the changes, including:
- Why the change was made
- Any challenges encountered


- Added google drive integration config to premium settings in
setting.yml
- Added google drive button to file picker when enabled 
- Picker appears and allows users to load pdfs and other files into the
tools


Closes #(2946)

---

### Documentation
[Docs Update
PR](https://github.com/Stirling-Tools/Stirling-Tools.github.io/pull/67)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>

src/main/java/stirling/software/SPDF/EE/EEAppConfig.java

@@ -11,6 +11,7 @@ import stirling.software.SPDF.EE.KeygenLicenseVerifier.License;
 import stirling.software.SPDF.model.ApplicationProperties;
 import stirling.software.SPDF.model.ApplicationProperties.EnterpriseEdition;
 import stirling.software.SPDF.model.ApplicationProperties.Premium;
+import stirling.software.SPDF.model.ApplicationProperties.Premium.ProFeatures.GoogleDrive;
 
 @Configuration
 @Order(Ordered.HIGHEST_PRECEDENCE)
@@ -43,6 +44,17 @@ public class EEAppConfig {
         return applicationProperties.getPremium().getProFeatures().isSsoAutoLogin();
     }
 
+    @Bean(name = "GoogleDriveEnabled")
+    public boolean googleDriveEnabled() {
+        return runningProOrHigher()
+                && applicationProperties.getPremium().getProFeatures().getGoogleDrive().isEnabled();
+    }
+
+    @Bean(name = "GoogleDriveConfig")
+    public GoogleDrive googleDriveConfig() {
+        return applicationProperties.getPremium().getProFeatures().getGoogleDrive();
+    }
+
     // TODO: Remove post migration
     public void migrateEnterpriseSettingsToPremium(ApplicationProperties applicationProperties) {
         EnterpriseEdition enterpriseEdition = applicationProperties.getEnterpriseEdition();

src/main/java/stirling/software/SPDF/model/ApplicationProperties.java

@@ -430,6 +430,7 @@ public class ApplicationProperties {
         public static class ProFeatures {
             private boolean ssoAutoLogin;
             private CustomMetadata customMetadata = new CustomMetadata();
+            private GoogleDrive googleDrive = new GoogleDrive();
 
             @Data
             public static class CustomMetadata {
@@ -448,6 +449,26 @@ public class ApplicationProperties {
                             : producer;
                 }
             }
+
+            @Data
+            public static class GoogleDrive {
+                private boolean enabled;
+                private String clientId;
+                private String apiKey;
+                private String appId;
+
+                public String getClientId() {
+                    return clientId == null || clientId.trim().isEmpty() ? "" : clientId;
+                }
+
+                public String getApiKey() {
+                    return apiKey == null || apiKey.trim().isEmpty() ? "" : apiKey;
+                }
+
+                public String getAppId() {
+                    return appId == null || appId.trim().isEmpty() ? "" : appId;
+                }
+            }
         }
 
         @Data

src/main/resources/settings.yml.template

@@ -72,6 +72,11 @@ premium:
       author: username
       creator: Stirling-PDF
       producer: Stirling-PDF
+    googleDrive:
+      enabled: false
+      clientId: ''
+      apiKey: ''
+      appId: ''
 
 legal:
   termsAndConditions: https://www.stirlingpdf.com/terms-and-conditions # URL to the terms and conditions of your application (e.g. https://example.com/terms). Empty string to disable or filename to load from local file in static folder

src/main/resources/static/css/fileSelect.css

@@ -271,3 +271,28 @@
   align-items: center;
   z-index: 9999;
 }
+
+.google-drive-button {
+  width: 2.5rem;
+  pointer-events: auto;
+  cursor: pointer;
+  transition-duration: 0.4s;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 5px  var(--md-sys-color-on-surface-variant);
+  background-color: var(--md-sys-color-on-surface-container-high)
+}
+
+.horizontal-divider {
+  width:  85%;
+  border-top: 1px dashed;
+  padding: 0px;
+  margin: 10px;
+}
+
+.google-drive-button img {
+  width:100%
+}
+
+.google-drive-button:hover {
+  background-color: var(--md-sys-color-on-surface-variant)
+}

src/main/resources/static/images/google-drive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#1e88e5" d="M38.59,39c-0.535,0.93-0.298,1.68-1.195,2.197C36.498,41.715,35.465,42,34.39,42H13.61 c-1.074,0-2.106-0.285-3.004-0.802C9.708,40.681,9.945,39.93,9.41,39l7.67-9h13.84L38.59,39z"/><path fill="#fbc02d" d="M27.463,6.999c1.073-0.002,2.104-0.716,3.001-0.198c0.897,0.519,1.66,1.27,2.197,2.201l10.39,17.996 c0.537,0.93,0.807,1.967,0.808,3.002c0.001,1.037-1.267,2.073-1.806,3.001l-11.127-3.005l-6.924-11.993L27.463,6.999z"/><path fill="#e53935" d="M43.86,30c0,1.04-0.27,2.07-0.81,3l-3.67,6.35c-0.53,0.78-1.21,1.4-1.99,1.85L30.92,30H43.86z"/><path fill="#4caf50" d="M5.947,33.001c-0.538-0.928-1.806-1.964-1.806-3c0.001-1.036,0.27-2.073,0.808-3.004l10.39-17.996 c0.537-0.93,1.3-1.682,2.196-2.2c0.897-0.519,1.929,0.195,3.002,0.197l3.459,11.009l-6.922,11.989L5.947,33.001z"/><path fill="#1565c0" d="M17.08,30l-6.47,11.2c-0.78-0.45-1.46-1.07-1.99-1.85L4.95,33c-0.54-0.93-0.81-1.96-0.81-3H17.08z"/><path fill="#2e7d32" d="M30.46,6.8L24,18L17.53,6.8c0.78-0.45,1.66-0.73,2.6-0.79L27.46,6C28.54,6,29.57,6.28,30.46,6.8z"/></svg>

src/main/resources/static/js/fileInput.js

@@ -35,6 +35,7 @@ function setupFileInput(chooser) {
   const pdfPrompt = chooser.getAttribute('data-bs-pdf-prompt');
   const inputContainerId = chooser.getAttribute('data-bs-element-container-id');
   const showUploads = chooser.getAttribute('data-bs-show-uploads') === "true";
+  const name = chooser.getAttribute('data-bs-unique-id')
   const noFileSelectedPrompt = chooser.getAttribute('data-bs-no-file-selected');
 
   let inputContainer = document.getElementById(inputContainerId);
@@ -87,6 +88,21 @@ function setupFileInput(chooser) {
     overlay = false;
   }
 
+  const googleDriveFileListener = function (e) {
+    const googleDriveFiles = e.detail;
+
+    const fileInput = document.getElementById(elementId);
+    if (fileInput?.hasAttribute('multiple')) {
+      pushFileListTo(googleDriveFiles, allFiles);
+    } else if (fileInput) {
+      allFiles = [googleDriveFiles[0]];
+    }
+
+    const dataTransfer = new DataTransfer();
+    allFiles.forEach((file) => dataTransfer.items.add(file));
+    fileInput.files = dataTransfer.files;
+    fileInput.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { source: 'drag-drop' } }));
+  }
 
   const dropListener = function (e) {
     e.preventDefault();
@@ -137,6 +153,7 @@ function setupFileInput(chooser) {
   document.body.addEventListener('dragenter', dragenterListener);
   document.body.addEventListener('dragleave', dragleaveListener);
   document.body.addEventListener('drop', dropListener);
+  document.body.addEventListener(name + 'GoogleDriveDrivePicked', googleDriveFileListener);
 
   $('#' + elementId).on('change', async function (e) {
     let element = e.target;

src/main/resources/static/js/googleFilePicker.js

@@ -0,0 +1,158 @@
+const SCOPES = "https://www.googleapis.com/auth/drive.readonly";
+const SESSION_STORAGE_ID = "googleDrivePickerAccessToken";
+
+let tokenClient;
+let accessToken = sessionStorage.getItem(SESSION_STORAGE_ID);
+
+let isScriptExecuted = false;
+if (!isScriptExecuted) {
+  isScriptExecuted = true;
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(".google-drive-button").forEach(setupGoogleDrivePicker);
+  });
+}
+
+function gisLoaded() {
+  tokenClient = google.accounts.oauth2.initTokenClient({
+    client_id: window.stirlingPDF.GoogleDriveClientId,
+    scope: SCOPES,
+    callback: "", // defined later
+  });
+}
+
+// add more as needed. 
+// Google picker is limited on what mimeTypes are supported
+// Wild card are not supported
+const expandableMimeTypes = {
+  "image/*" : ["image/jpeg", "image/png","image/svg+xml" ]
+}
+
+function fileInputToGooglePickerMimeTypes(accept) {
+
+  if(accept == null || accept == "" || accept.includes("*/*")){ 
+
+    // Setting null will accept all supported mimetypes
+    return null; 
+  }
+
+  let mimeTypes = [];
+  accept.split(',').forEach(part => {
+    if(!(part in expandableMimeTypes)){
+      mimeTypes.push(part);
+      return;
+    }
+
+    expandableMimeTypes[part].forEach(mimeType => {
+      mimeTypes.push(mimeType);
+    });
+  });
+
+  const  mimeString =  mimeTypes.join(",").replace(/\s+/g, '');
+  console.log([accept, "became", mimeString]);
+  return mimeString;
+}
+
+/**
+ * Callback after api.js is loaded.
+ */
+function gapiLoaded() {
+  gapi.load("client:picker", initializePicker);
+} 
+
+/**
+ * Callback after the API client is loaded. Loads the
+ * discovery doc to initialize the API.
+ */
+async function initializePicker() {
+  await gapi.client.load("https://www.googleapis.com/discovery/v1/apis/drive/v3/rest");
+}
+
+function setupGoogleDrivePicker(picker) {
+  
+  const name = picker.getAttribute('data-name');
+  const accept = picker.getAttribute('data-accept');
+  const multiple = picker.getAttribute('data-multiple') === "true";
+  const mimeTypes = fileInputToGooglePickerMimeTypes(accept);
+
+  picker.addEventListener("click", onGoogleDriveButtonClick);
+
+  function onGoogleDriveButtonClick(e) {
+    e.stopPropagation();
+
+    tokenClient.callback = (response) => {
+      if (response.error !== undefined) {
+        throw response;
+      }
+      accessToken = response.access_token;
+      sessionStorage.setItem(SESSION_STORAGE_ID, accessToken);
+      createGooglePicker();
+    };
+
+    tokenClient.requestAccessToken({ prompt: accessToken === null ? "consent" : "" });
+  }
+
+  /**
+   *  Sign out the user upon button click.
+   */
+  function signOut() {
+    if (accessToken) {
+      sessionStorage.removeItem(SESSION_STORAGE_ID);
+      google.accounts.oauth2.revoke(accessToken);
+      accessToken = null;
+    }
+  }
+
+  function createGooglePicker() {
+    let builder = new google.picker.PickerBuilder()
+      .setDeveloperKey(window.stirlingPDF.GoogleDriveApiKey)
+      .setAppId(window.stirlingPDF.GoogleDriveAppId)
+      .setOAuthToken(accessToken)
+      .addView(
+        new google.picker.DocsView()
+          .setIncludeFolders(true)
+          .setMimeTypes(mimeTypes)
+      )
+      .addView(
+        new google.picker.DocsView()
+          .setIncludeFolders(true)
+          .setEnableDrives(true)
+          .setMimeTypes(mimeTypes)
+      )
+      .setCallback(pickerCallback);
+
+    if(multiple) {
+      builder.enableFeature(google.picker.Feature.MULTISELECT_ENABLED);
+    }
+    const picker = builder.build();
+
+    picker.setVisible(true);
+  }
+
+  /**
+   * Displays the file details of the user's selection.
+   * @param {object} data - Containers the user selection from the picker
+   */
+  async function pickerCallback(data) {
+    if (data.action === google.picker.Action.PICKED) {
+      const files = await Promise.all(
+        data[google.picker.Response.DOCUMENTS].map(async (pickedFile) => {
+          const fileId = pickedFile[google.picker.Document.ID];
+          console.log(fileId);
+          const res = await gapi.client.drive.files.get({
+            fileId: fileId,
+            alt: "media",
+          });
+
+          let file = new File([new Uint8Array(res.body.length).map((_, i) => res.body.charCodeAt(i))], pickedFile.name, {
+            type: pickedFile.mimeType,
+            lastModified: pickedFile.lastModified,
+            endings: pickedFile.endings,
+          });
+          return file;
+        })
+      );
+
+      document.body.dispatchEvent(new CustomEvent(name+"GoogleDriveDrivePicked", { detail: files }));
+    }
+  }
+}

src/main/resources/templates/fragments/common.html

@@ -228,8 +228,9 @@
       loading: '[[#{loading}]]'
     };</script>
   <div class="custom-file-chooser mb-3"
+
     th:attr="data-bs-unique-id=${name}, data-bs-element-id=${name+'-input'}, data-bs-element-container-id=${name+'-input-container'}, data-bs-show-uploads=${showUploads}, data-bs-files-selected=#{filesSelected}, data-bs-pdf-prompt=#{pdfPrompt}, data-bs-no-file-selected=#{noFileSelected}">
-    <div class="mb-3 d-flex flex-row justify-content-center align-items-center flex-wrap input-container"
+    <div class="mb-3 d-flex flex-column justify-content-center align-items-center flex-wrap input-container"
       th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}">
       <label class="file-input-btn d-none">
        <input type="file" class="form-control" 
@@ -240,10 +241,16 @@
 		  th:required="${notRequired} ? null : 'required'">
         Browse
       </label>
-      <div class="d-flex justify-content-start align-items-center" id="fileInputText">
-        <div th:text="#{fileChooser.click}" style="margin-right: 5px"></div>
-        <div th:text="#{fileChooser.or}" style="margin-right: 5px"></div>
-        <div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
+      <div class="d-flex flex-column align-items-center">
+        <div class="d-flex justify-content-start align-items-center" id="fileInputText">
+          <div th:text="#{fileChooser.click}" style="margin-right: 5px"></div>
+          <div th:text="#{fileChooser.or}" style="margin-right: 5px"></div>
+          <div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
+        </div>
+        <hr th:if="${@GoogleDriveEnabled == true}" class="horizontal-divider" >
+      </div>
+      <div th:if="${@GoogleDriveEnabled == true}"  th:id="${name}+'-google-drive-button'" class="google-drive-button" th:attr="data-name=${name}, data-multiple=${!disableMultipleFiles}, data-accept=${accept}"  > 
+        <img th:src="@{'/images/google-drive.svg'}" alt="google drive">
       </div>
     </div>
     <div class="selected-files flex-wrap"></div>
@@ -258,4 +265,16 @@
     </div>
   </div>
   <script th:src="@{'/js/fileInput.js'}" type="module"></script>
+
+  <div th:if="${@GoogleDriveEnabled == true}" >
+    <script type="text/javascript" th:src="@{'/js/googleFilePicker.js'}"></script>
+    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
+    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
+  
+    <script th:inline="javascript">
+      window.stirlingPDF.GoogleDriveClientId = /*[[${@GoogleDriveConfig.getClientId()}]]*/ null;
+      window.stirlingPDF.GoogleDriveApiKey = /*[[${@GoogleDriveConfig.getApiKey()}]]*/ null;
+      window.stirlingPDF.GoogleDriveAppId = /*[[${@GoogleDriveConfig.getAppId()}]]*/ null;
+    </script>
+  </div>
 </th:block>