Show uploaded file from pyodide FS

Author: markmiro

src/components/notebook/cell/CsvUploadButton.tsx

@@ -30,21 +30,14 @@ export function CsvUploadButton({
   const { addCell } = useAddCell();
   const { uploadFile, isUploading } = useFileUpload({
     notebookId: store.storeId,
-    onFileUploaded: (artifactId, fileName) => {
+    onFileUploaded: ({ fileName }) => {
       toast.success(`File uploaded: ${fileName}`);
       // Create a new code cell with CSV loading code
       const newCellId = addCell(cellId, "code", position);
 
       // Set the cell content to load the CSV
       const csvCode = `import pandas as pd
-import pyodide
-
-# Load CSV file: ${fileName}
-dataset_url = "/api/artifacts/${artifactId}"
-df = pd.read_csv(pyodide.http.open_url(dataset_url))
-
-# Display basic info about the dataset
-print(f"Dataset shape: {df.shape}")
+df = pd.read_csv('${fileName}')
 df.head()`;
 
       store.commit(

src/hooks/useFileUpload.ts

@@ -6,7 +6,13 @@ import { events } from "@runtimed/schema";
 
 interface FileUploadOptions {
   notebookId: string;
-  onFileUploaded?: (artifactId: string, fileName: string) => void;
+  onFileUploaded?: ({
+    artifactId,
+    fileName,
+  }: {
+    artifactId: string;
+    fileName: string;
+  }) => void;
 }
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -67,7 +73,7 @@ export const useFileUpload = ({
       );
 
       setIsUploading(false);
-      onFileUploaded?.(result.artifactId, file.name);
+      onFileUploaded?.({ artifactId: result.artifactId, fileName: file.name });
 
       return result.artifactId;
     },