open-webui / src /lib /utils /google-drive-picker.ts
github-actions[bot]
GitHub deploy: 15a182c9d6910ec8430c19ce3d6c22498c32214d
6842c08
raw
history blame
6.35 kB
// Google Drive Picker API configuration
let API_KEY = '';
let CLIENT_ID = '';
// Function to fetch credentials from backend config
async function getCredentials() {
const response = await fetch('/api/config');
if (!response.ok) {
throw new Error('Failed to fetch Google Drive credentials');
}
const config = await response.json();
API_KEY = config.google_drive?.api_key;
CLIENT_ID = config.google_drive?.client_id;
if (!API_KEY || !CLIENT_ID) {
throw new Error('Google Drive API credentials not configured');
}
}
const SCOPE = [
'https://www.googleapis.com/auth/drive.readonly',
'https://www.googleapis.com/auth/drive.file'
];
// Validate required credentials
const validateCredentials = () => {
if (!API_KEY || !CLIENT_ID) {
throw new Error('Google Drive API credentials not configured');
}
if (API_KEY === '' || CLIENT_ID === '') {
throw new Error('Please configure valid Google Drive API credentials');
}
};
let pickerApiLoaded = false;
let oauthToken: string | null = null;
let initialized = false;
export const loadGoogleDriveApi = () => {
return new Promise((resolve, reject) => {
if (typeof gapi === 'undefined') {
const script = document.createElement('script');
script.src = 'https://apis.google.com/js/api.js';
script.onload = () => {
gapi.load('picker', () => {
pickerApiLoaded = true;
resolve(true);
});
};
script.onerror = reject;
document.body.appendChild(script);
} else {
gapi.load('picker', () => {
pickerApiLoaded = true;
resolve(true);
});
}
});
};
export const loadGoogleAuthApi = () => {
return new Promise((resolve, reject) => {
if (typeof google === 'undefined') {
const script = document.createElement('script');
script.src = 'https://accounts.google.com/gsi/client';
script.onload = resolve;
script.onerror = reject;
document.body.appendChild(script);
} else {
resolve(true);
}
});
};
export const getAuthToken = async () => {
if (!oauthToken) {
return new Promise((resolve, reject) => {
const tokenClient = google.accounts.oauth2.initTokenClient({
client_id: CLIENT_ID,
scope: SCOPE.join(' '),
callback: (response: any) => {
if (response.access_token) {
oauthToken = response.access_token;
resolve(oauthToken);
} else {
reject(new Error('Failed to get access token'));
}
},
error_callback: (error: any) => {
reject(new Error(error.message || 'OAuth error occurred'));
}
});
tokenClient.requestAccessToken();
});
}
return oauthToken;
};
const initialize = async () => {
if (!initialized) {
await getCredentials();
validateCredentials();
await Promise.all([loadGoogleDriveApi(), loadGoogleAuthApi()]);
initialized = true;
}
};
export const createPicker = () => {
return new Promise(async (resolve, reject) => {
try {
console.log('Initializing Google Drive Picker...');
await initialize();
console.log('Getting auth token...');
const token = await getAuthToken();
if (!token) {
console.error('Failed to get OAuth token');
throw new Error('Unable to get OAuth token');
}
console.log('Auth token obtained successfully');
const picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.addView(
new google.picker.DocsView()
.setIncludeFolders(false)
.setSelectFolderEnabled(false)
.setMimeTypes(
'application/pdf,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.google-apps.document,application/vnd.google-apps.spreadsheet,application/vnd.google-apps.presentation'
)
)
.setOAuthToken(token)
.setDeveloperKey(API_KEY)
// Remove app ID setting as it's not needed and can cause 404 errors
.setCallback(async (data: any) => {
if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
try {
const doc = data[google.picker.Response.DOCUMENTS][0];
const fileId = doc[google.picker.Document.ID];
const fileName = doc[google.picker.Document.NAME];
const fileUrl = doc[google.picker.Document.URL];
if (!fileId || !fileName) {
throw new Error('Required file details missing');
}
// Construct download URL based on MIME type
const mimeType = doc[google.picker.Document.MIME_TYPE];
let downloadUrl;
let exportFormat;
if (mimeType.includes('google-apps')) {
// Handle Google Workspace files
if (mimeType.includes('document')) {
exportFormat = 'text/plain';
} else if (mimeType.includes('spreadsheet')) {
exportFormat = 'text/csv';
} else if (mimeType.includes('presentation')) {
exportFormat = 'text/plain';
} else {
exportFormat = 'application/pdf';
}
downloadUrl = `https://www.googleapis.com/drive/v3/files/${fileId}/export?mimeType=${encodeURIComponent(exportFormat)}`;
} else {
// Regular files use direct download URL
downloadUrl = `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`;
}
// Create a Blob from the file download
const response = await fetch(downloadUrl, {
headers: {
Authorization: `Bearer ${token}`,
Accept: '*/*'
}
});
if (!response.ok) {
const errorText = await response.text();
console.error('Download failed:', {
status: response.status,
statusText: response.statusText,
error: errorText
});
throw new Error(`Failed to download file (${response.status}): ${errorText}`);
}
const blob = await response.blob();
const result = {
id: fileId,
name: fileName,
url: downloadUrl,
blob: blob,
headers: {
Authorization: `Bearer ${token}`,
Accept: '*/*'
}
};
resolve(result);
} catch (error) {
reject(error);
}
} else if (data[google.picker.Response.ACTION] === google.picker.Action.CANCEL) {
resolve(null);
}
})
.build();
picker.setVisible(true);
} catch (error) {
console.error('Google Drive Picker error:', error);
reject(error);
}
});
};