mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
fix formatting
This commit is contained in:
Taylor Wilsdon
@@ -385,8 +385,8 @@
|
||||
// Configure fetch options with proper headers
|
||||
const fetchOptions = {
|
||||
headers: {
|
||||
'Authorization': fileData.headers.Authorization,
|
||||
'Accept': '*/*'
|
||||
Authorization: fileData.headers.Authorization,
|
||||
Accept: '*/*'
|
||||
},
|
||||
method: 'GET'
|
||||
};
|
||||
@@ -407,7 +407,7 @@
|
||||
// Convert response to blob
|
||||
console.log('Converting response to blob...');
|
||||
const fileBlob = await fileResponse.blob();
|
||||
|
||||
|
||||
if (fileBlob.size === 0) {
|
||||
throw new Error('Retrieved file is empty');
|
||||
}
|
||||
@@ -418,7 +418,7 @@
|
||||
});
|
||||
|
||||
// Create File object with proper MIME type
|
||||
const file = new File([fileBlob], fileData.name, {
|
||||
const file = new File([fileBlob], fileData.name, {
|
||||
type: fileBlob.type || contentType
|
||||
});
|
||||
|
||||
@@ -441,7 +441,7 @@
|
||||
}
|
||||
|
||||
console.log('File uploaded successfully:', uploadedFile);
|
||||
|
||||
|
||||
// Update file item with upload results
|
||||
fileItem.status = 'uploaded';
|
||||
fileItem.file = uploadedFile;
|
||||
@@ -449,15 +449,17 @@
|
||||
fileItem.size = file.size;
|
||||
fileItem.collection_name = uploadedFile?.meta?.collection_name;
|
||||
fileItem.url = `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`;
|
||||
|
||||
|
||||
files = files;
|
||||
toast.success($i18n.t('File uploaded successfully'));
|
||||
} catch (e) {
|
||||
console.error('Error uploading file:', e);
|
||||
files = files.filter((f) => f.itemId !== tempItemId);
|
||||
toast.error($i18n.t('Error uploading file: {{error}}', {
|
||||
error: e.message || 'Unknown error'
|
||||
}));
|
||||
toast.error(
|
||||
$i18n.t('Error uploading file: {{error}}', {
|
||||
error: e.message || 'Unknown error'
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -90,7 +90,6 @@
|
||||
};
|
||||
|
||||
const uploadFileHandler = async (file) => {
|
||||
|
||||
const tempItemId = uuidv4();
|
||||
const fileItem = {
|
||||
type: 'file',
|
||||
@@ -138,7 +137,7 @@
|
||||
name: fileItem.name,
|
||||
collection: uploadedFile?.meta?.collection_name
|
||||
});
|
||||
|
||||
|
||||
if (uploadedFile.error) {
|
||||
console.warn('File upload warning:', uploadedFile.error);
|
||||
toast.warning(uploadedFile.error);
|
||||
@@ -147,7 +146,8 @@
|
||||
fileItem.status = 'uploaded';
|
||||
fileItem.file = uploadedFile;
|
||||
fileItem.id = uploadedFile.id;
|
||||
fileItem.collection_name = uploadedFile?.meta?.collection_name || uploadedFile?.collection_name;
|
||||
fileItem.collection_name =
|
||||
uploadedFile?.meta?.collection_name || uploadedFile?.collection_name;
|
||||
fileItem.url = `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`;
|
||||
|
||||
files = files;
|
||||
@@ -526,9 +526,11 @@
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Google Drive Error:', error);
|
||||
toast.error($i18n.t('Error accessing Google Drive: {{error}}', {
|
||||
error: error.message
|
||||
}));
|
||||
toast.error(
|
||||
$i18n.t('Error accessing Google Drive: {{error}}', {
|
||||
error: error.message
|
||||
})
|
||||
);
|
||||
}
|
||||
}}
|
||||
onClose={async () => {
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
// Google Drive Picker API configuration
|
||||
const API_KEY = import.meta.env.VITE_GOOGLE_API_KEY;
|
||||
const CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
|
||||
const SCOPE = ['https://www.googleapis.com/auth/drive.readonly', 'https://www.googleapis.com/auth/drive.file'];
|
||||
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 === 'your-api-key' || CLIENT_ID === 'your-client-id') {
|
||||
throw new Error('Please configure valid Google Drive API credentials');
|
||||
}
|
||||
if (!API_KEY || !CLIENT_ID) {
|
||||
throw new Error('Google Drive API credentials not configured');
|
||||
}
|
||||
if (API_KEY === 'your-api-key' || CLIENT_ID === 'your-client-id') {
|
||||
throw new Error('Please configure valid Google Drive API credentials');
|
||||
}
|
||||
};
|
||||
|
||||
let pickerApiLoaded = false;
|
||||
@@ -18,170 +21,176 @@ 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);
|
||||
});
|
||||
}
|
||||
});
|
||||
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);
|
||||
}
|
||||
});
|
||||
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;
|
||||
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) {
|
||||
validateCredentials();
|
||||
await Promise.all([loadGoogleDriveApi(), loadGoogleAuthApi()]);
|
||||
initialized = true;
|
||||
}
|
||||
if (!initialized) {
|
||||
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');
|
||||
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'))
|
||||
.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];
|
||||
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'
|
||||
)
|
||||
)
|
||||
.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];
|
||||
|
||||
let downloadUrl;
|
||||
let exportFormat;
|
||||
|
||||
if (mimeType.includes('google-apps')) {
|
||||
// Handle Google Workspace files
|
||||
if (mimeType.includes('document')) {
|
||||
exportFormat = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
||||
} else if (mimeType.includes('presentation')) {
|
||||
exportFormat = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
|
||||
} 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 (!fileId || !fileName) {
|
||||
throw new Error('Required file details missing');
|
||||
}
|
||||
|
||||
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}`);
|
||||
}
|
||||
// Construct download URL based on MIME type
|
||||
const mimeType = doc[google.picker.Document.MIME_TYPE];
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
let downloadUrl;
|
||||
let exportFormat;
|
||||
|
||||
if (mimeType.includes('google-apps')) {
|
||||
// Handle Google Workspace files
|
||||
if (mimeType.includes('document')) {
|
||||
exportFormat =
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
||||
} else if (mimeType.includes('presentation')) {
|
||||
exportFormat =
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.presentation';
|
||||
} 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);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user