|
| 1 | +const SCOPES = "https://www.googleapis.com/auth/drive.readonly"; |
| 2 | +const SESSION_STORAGE_ID = "googleDrivePickerAccessToken"; |
| 3 | + |
| 4 | +let tokenClient; |
| 5 | +let accessToken = sessionStorage.getItem(SESSION_STORAGE_ID); |
| 6 | + |
| 7 | +let isScriptExecuted = false; |
| 8 | +if (!isScriptExecuted) { |
| 9 | + isScriptExecuted = true; |
| 10 | + document.addEventListener("DOMContentLoaded", function () { |
| 11 | + document.querySelectorAll(".google-drive-button").forEach(setupGoogleDrivePicker); |
| 12 | + }); |
| 13 | +} |
| 14 | + |
| 15 | +function gisLoaded() { |
| 16 | + tokenClient = google.accounts.oauth2.initTokenClient({ |
| 17 | + client_id: window.stirlingPDF.GoogleDriveClientId, |
| 18 | + scope: SCOPES, |
| 19 | + callback: "", // defined later |
| 20 | + }); |
| 21 | +} |
| 22 | + |
| 23 | +// add more as needed. |
| 24 | +// Google picker is limited on what mimeTypes are supported |
| 25 | +// Wild card are not supported |
| 26 | +const expandableMimeTypes = { |
| 27 | + "image/*" : ["image/jpeg", "image/png","image/svg+xml" ] |
| 28 | +} |
| 29 | + |
| 30 | +function fileInputToGooglePickerMimeTypes(accept) { |
| 31 | + |
| 32 | + if(accept == null || accept == "" || accept.includes("*/*")){ |
| 33 | + |
| 34 | + // Setting null will accept all supported mimetypes |
| 35 | + return null; |
| 36 | + } |
| 37 | + |
| 38 | + let mimeTypes = []; |
| 39 | + accept.split(',').forEach(part => { |
| 40 | + if(!(part in expandableMimeTypes)){ |
| 41 | + mimeTypes.push(part); |
| 42 | + return; |
| 43 | + } |
| 44 | + |
| 45 | + expandableMimeTypes[part].forEach(mimeType => { |
| 46 | + mimeTypes.push(mimeType); |
| 47 | + }); |
| 48 | + }); |
| 49 | + |
| 50 | + const mimeString = mimeTypes.join(",").replace(/\s+/g, ''); |
| 51 | + console.log([accept, "became", mimeString]); |
| 52 | + return mimeString; |
| 53 | +} |
| 54 | + |
| 55 | +/** |
| 56 | + * Callback after api.js is loaded. |
| 57 | + */ |
| 58 | +function gapiLoaded() { |
| 59 | + gapi.load("client:picker", initializePicker); |
| 60 | +} |
| 61 | + |
| 62 | +/** |
| 63 | + * Callback after the API client is loaded. Loads the |
| 64 | + * discovery doc to initialize the API. |
| 65 | + */ |
| 66 | +async function initializePicker() { |
| 67 | + await gapi.client.load("https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"); |
| 68 | +} |
| 69 | + |
| 70 | +function setupGoogleDrivePicker(picker) { |
| 71 | + |
| 72 | + const name = picker.getAttribute('data-name'); |
| 73 | + const accept = picker.getAttribute('data-accept'); |
| 74 | + const multiple = picker.getAttribute('data-multiple') === "true"; |
| 75 | + const mimeTypes = fileInputToGooglePickerMimeTypes(accept); |
| 76 | + |
| 77 | + picker.addEventListener("click", onGoogleDriveButtonClick); |
| 78 | + |
| 79 | + function onGoogleDriveButtonClick(e) { |
| 80 | + e.stopPropagation(); |
| 81 | + |
| 82 | + tokenClient.callback = (response) => { |
| 83 | + if (response.error !== undefined) { |
| 84 | + throw response; |
| 85 | + } |
| 86 | + accessToken = response.access_token; |
| 87 | + sessionStorage.setItem(SESSION_STORAGE_ID, accessToken); |
| 88 | + createGooglePicker(); |
| 89 | + }; |
| 90 | + |
| 91 | + tokenClient.requestAccessToken({ prompt: accessToken === null ? "consent" : "" }); |
| 92 | + } |
| 93 | + |
| 94 | + /** |
| 95 | + * Sign out the user upon button click. |
| 96 | + */ |
| 97 | + function signOut() { |
| 98 | + if (accessToken) { |
| 99 | + sessionStorage.removeItem(SESSION_STORAGE_ID); |
| 100 | + google.accounts.oauth2.revoke(accessToken); |
| 101 | + accessToken = null; |
| 102 | + } |
| 103 | + } |
| 104 | + |
| 105 | + function createGooglePicker() { |
| 106 | + let builder = new google.picker.PickerBuilder() |
| 107 | + .setDeveloperKey(window.stirlingPDF.GoogleDriveApiKey) |
| 108 | + .setAppId(window.stirlingPDF.GoogleDriveAppId) |
| 109 | + .setOAuthToken(accessToken) |
| 110 | + .addView( |
| 111 | + new google.picker.DocsView() |
| 112 | + .setIncludeFolders(true) |
| 113 | + .setMimeTypes(mimeTypes) |
| 114 | + ) |
| 115 | + .addView( |
| 116 | + new google.picker.DocsView() |
| 117 | + .setIncludeFolders(true) |
| 118 | + .setEnableDrives(true) |
| 119 | + .setMimeTypes(mimeTypes) |
| 120 | + ) |
| 121 | + .setCallback(pickerCallback); |
| 122 | + |
| 123 | + if(multiple) { |
| 124 | + builder.enableFeature(google.picker.Feature.MULTISELECT_ENABLED); |
| 125 | + } |
| 126 | + const picker = builder.build(); |
| 127 | + |
| 128 | + picker.setVisible(true); |
| 129 | + } |
| 130 | + |
| 131 | + /** |
| 132 | + * Displays the file details of the user's selection. |
| 133 | + * @param {object} data - Containers the user selection from the picker |
| 134 | + */ |
| 135 | + async function pickerCallback(data) { |
| 136 | + if (data.action === google.picker.Action.PICKED) { |
| 137 | + const files = await Promise.all( |
| 138 | + data[google.picker.Response.DOCUMENTS].map(async (pickedFile) => { |
| 139 | + const fileId = pickedFile[google.picker.Document.ID]; |
| 140 | + console.log(fileId); |
| 141 | + const res = await gapi.client.drive.files.get({ |
| 142 | + fileId: fileId, |
| 143 | + alt: "media", |
| 144 | + }); |
| 145 | + |
| 146 | + let file = new File([new Uint8Array(res.body.length).map((_, i) => res.body.charCodeAt(i))], pickedFile.name, { |
| 147 | + type: pickedFile.mimeType, |
| 148 | + lastModified: pickedFile.lastModified, |
| 149 | + endings: pickedFile.endings, |
| 150 | + }); |
| 151 | + return file; |
| 152 | + }) |
| 153 | + ); |
| 154 | + |
| 155 | + document.body.dispatchEvent(new CustomEvent(name+"GoogleDriveDrivePicked", { detail: files })); |
| 156 | + } |
| 157 | + } |
| 158 | +} |
0 commit comments