persist OneDrive thumbnails to ImageKit CDN to fix expiring URLs

client/src/screens/browse/components/file-display/index.jsx

@@ -66,6 +66,8 @@ const FileDisplay = ({ file, path, code, isMobileView = false }) => {
     const dispatch = useDispatch();
 
     const preview_url = file.webUrl;
+    const thumbnailUrl =
+        typeof file.thumbnail === "string" ? file.thumbnail : file.thumbnail?.url;
 
     const handleDownload = async () => {
         if (!isLoggedIn) {
@@ -147,7 +149,7 @@ const FileDisplay = ({ file, path, code, isMobileView = false }) => {
             }`}
         >
             <img
-                src={file.thumbnail}
+                src={thumbnailUrl}
                 style={{ display: "none" }}
                 onError={() => {
                     async function thumbnailrefresh() {
@@ -161,7 +163,7 @@ const FileDisplay = ({ file, path, code, isMobileView = false }) => {
             <div
                 className="img-preview"
                 style={{
-                    background: `url(${file.thumbnail}) center/cover no-repeat`,
+                    background: `url(${thumbnailUrl}) center/cover no-repeat`,
                 }}
             >
                 <div className="top">

server/.env.example

@@ -18,3 +18,8 @@ API_BASE_URL=
 
 # OneDrive storage
 ONEDRIVE_FOLDER_ID=
+
+# ImageKit — get from ImageKit dashboard > Developer Options
+IMAGEKIT_PUBLIC_KEY=<your_imagekit_public_key>
+IMAGEKIT_PRIVATE_KEY=<your_imagekit_private_key>
+IMAGEKIT_URL_ENDPOINT=<your_imagekit_url_endpoint>

server/modules/course/course.model.js

@@ -13,7 +13,11 @@ const FileSchema = Schema({
     name: { type: String, required: true },
     fileId: { type: String, required: true },
     size: { type: String, required: true },
-    thumbnail: { type: String },
+    thumbnail: {
+        url: { type: String },
+        fileId: { type: String },
+        path: { type: String },
+    },
     webUrl: { type: String, required: true },
     downloadUrl: { type: String, required: true },
     isVerified: { type: Boolean, default: false, required: true },

server/modules/onedrive/onedrive.controller.js

@@ -5,6 +5,7 @@ import settings from "../../config/onedrive.js";
 import fs from "fs";
 import { extractGraphErrorDetails, formatGraphErrorMessage } from "../../utils/graphError.js";
 import { normalizeCourseCode, getCourseCodeCaseInsensitiveRegex } from "../../utils/course.js";
+import { uploadThumbnail, isImageKitUrl } from "../../services/imagekit.js";
 
 import CourseModel, { FolderModel, FileModel } from "../course/course.model.js";
 import SearchResults from "../search/search.model.js";
@@ -79,16 +80,46 @@ export async function getCourseIds(req, res) {
 
 export async function thumbnail(req, res) {
     const fileId = req.body.fileId;
-    const thumbnaillink = `https://graph.microsoft.com/v1.0/me/drive/items/${fileId}/thumbnails`;
+
+    // 1. Already a permanent ImageKit URL in DB — return immediately
+    const file = await FileModel.findOne({ fileId }).select("thumbnail");
+    const storedThumbnailUrl =
+        typeof file?.thumbnail === "string"
+            ? file.thumbnail
+            : file?.thumbnail?.url;
+
+    if (storedThumbnailUrl && isImageKitUrl(storedThumbnailUrl)) {
+        return res.status(200).json(storedThumbnailUrl);
+    }
+
+    // 2. Fetch a fresh temporary URL from Graph API (legacy files with expired OneDrive URLs)
     const access_token = await getAccessToken();
-    const thumbnaildata = await axios.get(thumbnaillink, {
-        headers: {
-            Authorization: `Bearer ${access_token}`,
-        },
-    });
+    const thumbnaildata = await axios.get(
+        `https://graph.microsoft.com/v1.0/me/drive/items/${fileId}/thumbnails`,
+        { headers: { Authorization: `Bearer ${access_token}` } }
+    );
     const thumbnailurl = thumbnaildata.data.value?.[0]?.medium?.url;
-    await FileModel.updateOne({ fileId }, { $set: { thumbnail: thumbnailurl } });
-    return res.status(200).json(thumbnailurl);
+    if (!thumbnailurl) throw new AppError(404, "Thumbnail not found");
+
+    // 3. Download raw image bytes and upload to ImageKit as WebP permanently
+    const imgResponse = await axios.get(thumbnailurl, { responseType: "arraybuffer" });
+    const { url: permanentUrl, fileId: imagekitFileId, path: imagekitPath } = await uploadThumbnail(fileId, Buffer.from(imgResponse.data));
+
+    // 4. Persist permanent URL to DB so this file never hits Graph API again
+    await FileModel.updateOne(
+        { fileId },
+        {
+            $set: {
+                thumbnail: {
+                    url: permanentUrl,
+                    fileId: imagekitFileId,
+                    path: imagekitPath,
+                },
+            },
+        }
+    );
+
+    return res.status(200).json(permanentUrl);
 }
 
 export async function getFile(req, res) {
@@ -281,7 +312,9 @@ async function visitFile(file, currCourse) {
         name: file.name,
         id: file.id,
         size: file.size * 0.000001,
-        thumbnail: file?.thumbnails?.[0]?.medium?.url || "null",
+        thumbnail: {
+            url: file?.thumbnails?.[0]?.medium?.url || "null",
+        },
     });
     return NewFile._id;
 }