-
`;
- })
- .join('');
-
- if (linesToShow < totalLines) {
- formattedCode += `${lineNumber}
- ${highlightedLine || ' '}
-
-
-
`;
- }
-
- return formattedCode;
- }, [highlightCode, visibleLines, renderCSVTable]);
+ return lines.map((line, i) =>
+ `... ${totalLines - linesToShow} more lines
-
+
`
+ ).join('');
+ }, [visibleLines, highlightCode]);
const handleShowMore = useCallback(() => {
setVisibleLines(prev => Math.min(prev + CHUNK_SIZE, content?.split('\n').length || 0));
@@ -297,84 +368,104 @@ export default function FilePreview({ url: initialUrl = '', filename: initialFil
setVisibleLines(INITIAL_LINES_TO_SHOW);
}, []);
+ // If URL is empty, show a message
+ if (!url) {
+ return (
+ ${i + 1}
+ ${line || ' '}
+
+
+ );
+ }
+
return (
+
+ No File URL Provided
+Please check if the file exists or if you have the necessary permissions.
+
- {!loading && !error && content === 'image' && (
-
- {
if (!this.auth.isAuthenticated()) {
throw new Error("User must be authenticated to upload files");
@@ -42,7 +42,9 @@ export class FileManager {
const formData = new FormData();
formData.append(field, file);
- const result = await pb.collection(collectionName).update(recordId, formData);
+ const result = await pb
+ .collection(collectionName)
+ .update(recordId, formData);
return result;
} catch (err) {
console.error(`Failed to upload file to ${collectionName}:`, err);
@@ -64,7 +66,7 @@ export class FileManager {
collectionName: string,
recordId: string,
field: string,
- files: File[]
+ files: File[],
): Promise {
if (!this.auth.isAuthenticated()) {
throw new Error("User must be authenticated to upload files");
@@ -73,14 +75,16 @@ export class FileManager {
try {
this.auth.setUpdating(true);
const pb = this.auth.getPocketBase();
-
+
const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB per file limit
const MAX_BATCH_SIZE = 25 * 1024 * 1024; // 25MB per batch
-
+
// Validate file sizes first
for (const file of files) {
if (file.size > MAX_FILE_SIZE) {
- throw new Error(`File ${file.name} is too large. Maximum size is 50MB.`);
+ throw new Error(
+ `File ${file.name} is too large. Maximum size is 50MB.`,
+ );
}
}
@@ -88,10 +92,12 @@ export class FileManager {
let existingFiles: string[] = [];
if (recordId) {
try {
- const record = await pb.collection(collectionName).getOne(recordId);
+ const record = await pb
+ .collection(collectionName)
+ .getOne(recordId);
existingFiles = (record as any)[field] || [];
} catch (error) {
- console.warn('Failed to fetch existing record:', error);
+ console.warn("Failed to fetch existing record:", error);
}
}
@@ -103,10 +109,10 @@ export class FileManager {
// Process each file
for (const file of files) {
let processedFile = file;
-
+
try {
// Try to compress image files if needed
- if (file.type.startsWith('image/')) {
+ if (file.type.startsWith("image/")) {
processedFile = await this.compressImageIfNeeded(file, 50); // 50MB max size
}
} catch (error) {
@@ -118,7 +124,12 @@ export class FileManager {
if (currentBatchSize + processedFile.size > MAX_BATCH_SIZE) {
// Upload current batch
if (currentBatch.length > 0) {
- await this.uploadBatch(collectionName, recordId, field, currentBatch);
+ await this.uploadBatch(
+ collectionName,
+ recordId,
+ field,
+ currentBatch,
+ );
allProcessedFiles.push(...currentBatch);
}
// Reset batch
@@ -138,7 +149,9 @@ export class FileManager {
}
// Get the final record state
- const finalRecord = await pb.collection(collectionName).getOne(recordId);
+ const finalRecord = await pb
+ .collection(collectionName)
+ .getOne(recordId);
return finalRecord;
} catch (err) {
console.error(`Failed to upload files to ${collectionName}:`, err);
@@ -156,7 +169,7 @@ export class FileManager {
collectionName: string,
recordId: string,
field: string,
- files: File[]
+ files: File[],
): Promise {
const pb = this.auth.getPocketBase();
const formData = new FormData();
@@ -170,7 +183,9 @@ export class FileManager {
await pb.collection(collectionName).update(recordId, formData);
} catch (error: any) {
if (error.status === 413) {
- throw new Error(`Upload failed: Batch size too large. Please try uploading smaller files.`);
+ throw new Error(
+ `Upload failed: Batch size too large. Please try uploading smaller files.`,
+ );
}
throw error;
}
@@ -188,7 +203,7 @@ export class FileManager {
collectionName: string,
recordId: string,
field: string,
- files: File[]
+ files: File[],
): Promise {
if (!this.auth.isAuthenticated()) {
throw new Error("User must be authenticated to upload files");
@@ -197,10 +212,10 @@ export class FileManager {
try {
this.auth.setUpdating(true);
const pb = this.auth.getPocketBase();
-
+
// First, get the current record to check existing files
const record = await pb.collection(collectionName).getOne(recordId);
-
+
// Create FormData with existing files
const formData = new FormData();
@@ -210,7 +225,9 @@ export class FileManager {
// For each existing file, we need to fetch it and add it to the FormData
for (const existingFile of existingFiles) {
try {
- const response = await fetch(this.getFileUrl(collectionName, recordId, existingFile));
+ const response = await fetch(
+ this.getFileUrl(collectionName, recordId, existingFile),
+ );
const blob = await response.blob();
const file = new File([blob], existingFile, { type: blob.type });
formData.append(field, file);
@@ -218,13 +235,15 @@ export class FileManager {
console.warn(`Failed to fetch existing file ${existingFile}:`, error);
}
}
-
+
// Append new files
- files.forEach(file => {
+ files.forEach((file) => {
formData.append(field, file);
});
- const result = await pb.collection(collectionName).update(recordId, formData);
+ const result = await pb
+ .collection(collectionName)
+ .update(recordId, formData);
return result;
} catch (err) {
console.error(`Failed to append files to ${collectionName}:`, err);
@@ -244,12 +263,13 @@ export class FileManager {
public getFileUrl(
collectionName: string,
recordId: string,
- filename: string
+ filename: string,
): string {
const pb = this.auth.getPocketBase();
- const token = pb.authStore.token;
- const url = `${pb.baseUrl}/api/files/${collectionName}/${recordId}/${filename}`;
- return url;
+ return pb.files.getURL(
+ { id: recordId, collectionId: collectionName },
+ filename,
+ );
}
/**
@@ -262,7 +282,7 @@ export class FileManager {
public async deleteFile(
collectionName: string,
recordId: string,
- field: string
+ field: string,
): Promise {
if (!this.auth.isAuthenticated()) {
throw new Error("User must be authenticated to delete files");
@@ -272,7 +292,9 @@ export class FileManager {
this.auth.setUpdating(true);
const pb = this.auth.getPocketBase();
const data = { [field]: null };
- const result = await pb.collection(collectionName).update(recordId, data);
+ const result = await pb
+ .collection(collectionName)
+ .update(recordId, data);
return result;
} catch (err) {
console.error(`Failed to delete file from ${collectionName}:`, err);
@@ -292,7 +314,7 @@ export class FileManager {
public async downloadFile(
collectionName: string,
recordId: string,
- filename: string
+ filename: string,
): Promise {
if (!this.auth.isAuthenticated()) {
throw new Error("User must be authenticated to download files");
@@ -302,11 +324,11 @@ export class FileManager {
this.auth.setUpdating(true);
const url = this.getFileUrl(collectionName, recordId, filename);
const response = await fetch(url);
-
+
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
-
+
const result = await response.blob();
return result;
} catch (err) {
@@ -327,7 +349,7 @@ export class FileManager {
public async getFiles(
collectionName: string,
recordId: string,
- field: string
+ field: string,
): Promise {
if (!this.auth.isAuthenticated()) {
throw new Error("User must be authenticated to get files");
@@ -336,18 +358,18 @@ export class FileManager {
try {
this.auth.setUpdating(true);
const pb = this.auth.getPocketBase();
-
+
// Get the record to retrieve the filenames
const record = await pb.collection(collectionName).getOne(recordId);
-
+
// Get the filenames from the specified field
const filenames = record[field] || [];
-
+
// Convert filenames to URLs
- const fileUrls = filenames.map((filename: string) =>
- this.getFileUrl(collectionName, recordId, filename)
+ const fileUrls = filenames.map((filename: string) =>
+ this.getFileUrl(collectionName, recordId, filename),
);
-
+
return fileUrls;
} catch (err) {
console.error(`Failed to get files from ${collectionName}:`, err);
@@ -363,8 +385,11 @@ export class FileManager {
* @param maxSizeInMB Maximum size in MB
* @returns Promise The compressed file
*/
- public async compressImageIfNeeded(file: File, maxSizeInMB: number = 50): Promise {
- if (!file.type.startsWith('image/')) {
+ public async compressImageIfNeeded(
+ file: File,
+ maxSizeInMB: number = 50,
+ ): Promise {
+ if (!file.type.startsWith("image/")) {
return file;
}
@@ -379,12 +404,12 @@ export class FileManager {
reader.onload = (e) => {
const img = new Image();
img.src = e.target?.result as string;
-
+
img.onload = () => {
- const canvas = document.createElement('canvas');
+ const canvas = document.createElement("canvas");
let width = img.width;
let height = img.height;
-
+
// Calculate new dimensions while maintaining aspect ratio
const maxDimension = 3840; // Higher quality for larger files
if (width > height && width > maxDimension) {
@@ -397,35 +422,155 @@ export class FileManager {
canvas.width = width;
canvas.height = height;
-
- const ctx = canvas.getContext('2d');
+
+ const ctx = canvas.getContext("2d");
ctx?.drawImage(img, 0, 0, width, height);
-
+
// Convert to blob with higher quality for larger files
canvas.toBlob(
(blob) => {
if (!blob) {
- reject(new Error('Failed to compress image'));
+ reject(new Error("Failed to compress image"));
return;
}
- resolve(new File([blob], file.name, {
- type: 'image/jpeg',
- lastModified: Date.now(),
- }));
+ resolve(
+ new File([blob], file.name, {
+ type: "image/jpeg",
+ lastModified: Date.now(),
+ }),
+ );
},
- 'image/jpeg',
- 0.85 // Higher quality setting for larger files
+ "image/jpeg",
+ 0.85, // Higher quality setting for larger files
);
};
-
+
img.onerror = () => {
- reject(new Error('Failed to load image for compression'));
+ reject(new Error("Failed to load image for compression"));
};
};
-
+
reader.onerror = () => {
- reject(new Error('Failed to read file for compression'));
+ reject(new Error("Failed to read file for compression"));
};
});
}
-}
\ No newline at end of file
+
+ /**
+ * Get a file token for accessing protected files
+ * @returns Promise The file token
+ */
+ public async getFileToken(): Promise {
+ // Check authentication status
+ if (!this.auth.isAuthenticated()) {
+ console.warn("User is not authenticated when trying to get file token");
+
+ // Try to refresh the auth if possible
+ try {
+ const pb = this.auth.getPocketBase();
+ if (pb.authStore.isValid) {
+ console.log(
+ "Auth store is valid, but auth check failed. Trying to refresh token.",
+ );
+ await pb.collection("users").authRefresh();
+ console.log("Auth refreshed successfully");
+ } else {
+ throw new Error("User must be authenticated to get a file token");
+ }
+ } catch (refreshError) {
+ console.error("Failed to refresh authentication:", refreshError);
+ throw new Error("User must be authenticated to get a file token");
+ }
+ }
+
+ try {
+ this.auth.setUpdating(true);
+ const pb = this.auth.getPocketBase();
+
+ // Log auth status
+ console.log("Auth status before getting token:", {
+ isValid: pb.authStore.isValid,
+ token: pb.authStore.token
+ ? pb.authStore.token.substring(0, 10) + "..."
+ : "none",
+ model: pb.authStore.model ? pb.authStore.model.id : "none",
+ });
+
+ const result = await pb.files.getToken();
+ console.log("Got file token:", result.substring(0, 10) + "...");
+ return result;
+ } catch (err) {
+ console.error("Failed to get file token:", err);
+ throw err;
+ } finally {
+ this.auth.setUpdating(false);
+ }
+ }
+
+ /**
+ * Get a file URL with an optional token for protected files
+ * @param collectionName The name of the collection
+ * @param recordId The ID of the record containing the file
+ * @param filename The name of the file
+ * @param useToken Whether to include a token for protected files
+ * @returns Promise The file URL with token if requested
+ */
+ public async getFileUrlWithToken(
+ collectionName: string,
+ recordId: string,
+ filename: string,
+ useToken: boolean = false,
+ ): Promise {
+ const pb = this.auth.getPocketBase();
+
+ // Check if filename is empty
+ if (!filename) {
+ console.error(
+ `Empty filename provided for ${collectionName}/${recordId}`,
+ );
+ return "";
+ }
+
+ // Check if user is authenticated
+ if (!this.auth.isAuthenticated()) {
+ console.warn("User is not authenticated when trying to get file URL");
+ }
+
+ // Always try to use token for protected files
+ if (useToken) {
+ try {
+ console.log(
+ `Getting file token for ${collectionName}/${recordId}/${filename}`,
+ );
+ const token = await this.getFileToken();
+ console.log(`Got token: ${token.substring(0, 10)}...`);
+
+ // Make sure to pass the token as a query parameter
+ const url = pb.files.getURL(
+ { id: recordId, collectionId: collectionName },
+ filename,
+ { token },
+ );
+ console.log(`Generated URL with token: ${url.substring(0, 50)}...`);
+ return url;
+ } catch (error) {
+ console.error("Error getting file token:", error);
+ // Fall back to URL without token
+ const url = pb.files.getURL(
+ { id: recordId, collectionId: collectionName },
+ filename,
+ );
+ console.log(`Fallback URL without token: ${url.substring(0, 50)}...`);
+ return url;
+ }
+ }
+
+ // If not using token
+ const url = pb.files.getURL(
+ { id: recordId, collectionId: collectionName },
+ filename,
+ );
+ console.log(`Generated URL without token: ${url.substring(0, 50)}...`);
+ return url;
+ }
+}
-
);
}
\ No newline at end of file
diff --git a/src/scripts/pocketbase/FileManager.ts b/src/scripts/pocketbase/FileManager.ts
index 9ee4a4e..eb4524c 100644
--- a/src/scripts/pocketbase/FileManager.ts
+++ b/src/scripts/pocketbase/FileManager.ts
@@ -30,7 +30,7 @@ export class FileManager {
collectionName: string,
recordId: string,
field: string,
- file: File
+ file: File,
): Promise
- {truncatedFilename}
- {fileType && (
- {fileType.split('/')[1]}
- )}
+
+
+
+
+ {truncatedFilename}
+ {fileType && (
+ {fileType.split('/')[1]}
+ )}
+
+
+
+ {loading && (
+
{
+ console.error('Image failed to load:', e);
+ setError('Failed to load image. This might be due to permission issues or the file may not exist.');
+
+ // Log additional details
+ console.log('Image URL that failed:', url);
+ console.log('Current auth status:',
+ Authentication.getInstance().isAuthenticated() ? 'Authenticated' : 'Not authenticated'
+ );
+ }}
/>
-
- )}
+ )}
- {!loading && !error && content === 'video' && (
-
+
+
+ )}
+
+ {error && (
+
+
+ )}
+
+ {!loading && !error && content === 'image' && (
+
+
+
+
Preview Unavailable
+{error}
-
-
- )}
+ )}
- {!loading && !error && content === 'pdf' && (
-
-
+ {!loading && !error && content === 'video' && (
- {truncatedFilename}
- {fileType && (
- {fileType.split('/')[1]}
- )}
-
-
-
-
-
- )}
+ )}
- {!loading && !error && content && !['image', 'video', 'pdf'].includes(content) && (
-
-
+ {!loading && !error && content === 'pdf' && (
- {truncatedFilename}
- {fileType && (
- {fileType.split('/')[1]}
- )}
-
-
-
-
-
- )}
-
- {loading && (
-
-
+ {!loading && !error && content && !['image', 'video', 'pdf'].includes(content) && (
- {truncatedFilename}
- {fileType && (
- {fileType.split('/')[1]}
- )}
-
-
- {content && content.split('\n').length > visibleLines && (
-
- )}
- {visibleLines > INITIAL_LINES_TO_SHOW && (
-
- )}
-
-
-
-
+ {filename.toLowerCase().endsWith('.csv') ? (
+
+ ) : (
+
+
+ )}
-
-
- )}
-
- {error && (
-
-
- )}
+ )}
+
-
-
-
-
- Preview Unavailable
-{error}
-