can upload images

src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -21,6 +21,7 @@ import { useRouter } from "next/navigation";
 import { AssignmentFooterButtons } from "./AssignmentFooterButtons";
 import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates";
 import EditAssignmentHeader from "./EditAssignmentHeader";
+import { Spinner } from "@/components/Spinner";
 
 export default function EditAssignment({
   moduleName,
@@ -37,6 +38,7 @@ export default function EditAssignment({
     { dataUpdatedAt: serverDataUpdatedAt, isFetching: assignmentIsFetching },
   ] = useAssignmentQuery(moduleName, assignmentName);
   const updateAssignment = useUpdateAssignmentMutation();
+  const { isPending: imageUpdateIsPending } =
     useUpdateImageSettingsForAssignment({ moduleName, assignmentName });
 
   const {
@@ -152,6 +154,12 @@ export default function EditAssignment({
           <div className="px-3 h-full">
             <ClientOnly>
               <SuspenseAndErrorHandling showToast={false}>
+                {imageUpdateIsPending && (
+                  <div className="flex justify-center">
+                    <Spinner /> images being uploaded to canvas
+                  </div>
+                )}
+
                 <AssignmentPreview assignment={assignment} />
               </SuspenseAndErrorHandling>
             </ClientOnly>

src/hooks/localCourse/assignmentHooks.ts

@@ -35,7 +35,7 @@ export const useUpdateImageSettingsForAssignment = ({
   const [settings] = useLocalCourseSettingsQuery();
   const [assignment] = useAssignmentQuery(moduleName, assignmentName);
   const updateSettings = useUpdateLocalCourseSettingsMutation();
-  const [isUpdatingSettings, setIsUpdatingSettings] = useState(false);
+  const [isPending, setIsPending] = useState(false);
   const createCanvasUrlMutation =
     trpc.canvasFile.getCanvasFileUrl.useMutation();
 
@@ -45,18 +45,17 @@ export const useUpdateImageSettingsForAssignment = ({
       return;
     }
 
-    if (isUpdatingSettings) {
+    if (isPending) {
       console.log("not updating image assets, still loading");
       return;
     }
-    setIsUpdatingSettings(true);
+    setIsPending(true);
     const assignmentMarkdown = markdownToHtmlNoImages(assignment.description);
 
     const imageSources = extractImageSources(assignmentMarkdown);
     const imagesToUpdate = imageSources.filter((source) =>
       settings.assets.every((a) => a.sourceUrl !== source)
     );
-    console.log("images to update", imagesToUpdate);
 
     if (imagesToUpdate.length) {
       Promise.all(
@@ -78,17 +77,20 @@ export const useUpdateImageSettingsForAssignment = ({
             assets: [...settings.assets, ...newAssets],
           },
         });
-        setIsUpdatingSettings(false);
+        setIsPending(false);
       });
+    } else {
+      setIsPending(false)
     }
   }, [
     assignment.description,
     createCanvasUrlMutation,
-    isUpdatingSettings,
+    isPending,
     settings,
     settings.assets,
     updateSettings,
   ]);
+  return { isPending };
 };
 
 export const useAssignmentNamesQuery = (moduleName: string) => {

src/services/canvas/canvasAssignmentService.ts

@@ -29,6 +29,7 @@ export const canvasAssignmentService = {
   ) {
     console.log(`Creating assignment: ${localAssignment.name}`);
     const url = `${canvasApi}/courses/${canvasCourseId}/assignments`;
+    const content = markdownToHTMLSafe(localAssignment.description, settings);
     const body = {
       assignment: {
         name: localAssignment.name,
@@ -38,7 +39,7 @@ export const canvasAssignmentService = {
         allowed_extensions: localAssignment.allowedFileUploadExtensions.map(
           (e) => e.toString()
         ),
-        description: markdownToHTMLSafe(localAssignment.description, settings),
+        description: content,
         due_at: getDateFromString(localAssignment.dueAt)?.toISOString(),
         lock_at:
           localAssignment.lockAt &&

src/services/htmlMarkdownUtils.ts

@@ -4,10 +4,12 @@ import  DOMPurify from "isomorphic-dompurify";
 import { LocalCourseSettings } from "@/models/local/localCourseSettings";
 import markedKatex from "marked-katex-extension";
 
-marked.use(markedKatex({
+marked.use(
+  markedKatex({
     throwOnError: false,
-  output: "mathml"
-}));
+    output: "mathml",
+  })
+);
 
 export function extractImageSources(htmlString: string) {
   const srcUrls = [];
@@ -46,7 +48,8 @@ export function markdownToHTMLSafe(
   markdownString: string,
   settings: LocalCourseSettings
 ) {
-  return markdownToHtmlNoImages(markdownString);
+  const html = markdownToHtmlNoImages(markdownString);
+  return convertImagesToCanvasImages(html, settings);
 }
 
 export function markdownToHtmlNoImages(markdownString: string) {

src/services/serverFunctions/router/canvasFileRouter.ts

@@ -7,6 +7,8 @@ import {
   uploadToCanvasPart2,
 } from "@/services/canvas/files/canvasFileService";
 
+const fileStorageLocation = process.env.FILE_STORAGE_LOCATION ?? "/app/public";
+
 export const canvasFileRouter = router({
   getCanvasFileUrl: publicProcedure
     .input(
@@ -16,15 +18,17 @@ export const canvasFileRouter = router({
       })
     )
     .mutation(async ({ input: { sourceUrl, canvasCourseId } }) => {
-      const localTempFile = await downloadUrlToTempDirectory(sourceUrl);
-      console.log("local temp file", localTempFile);
+      const localFile = sourceUrl.startsWith("/")
+        ? fileStorageLocation + sourceUrl
+        : await downloadUrlToTempDirectory(sourceUrl);
+      console.log("local temp file", localFile);
       const { upload_url, upload_params } = await uploadToCanvasPart1(
-        localTempFile,
+        localFile,
         canvasCourseId
       );
       console.log("part 1 done", upload_url, upload_params);
       const canvasUrl = await uploadToCanvasPart2({
-        pathToUpload: localTempFile,
+        pathToUpload: localFile,
         upload_url,
         upload_params,
       });