Vps 104/upload csv

frontend/package.json

@@ -18,6 +18,7 @@
     "material-ui-image": "^3.3.2",
     "node-sass": "^6.0.0",
     "normalize.css": "^8.0.1",
+    "papaparse": "^5.4.1",
     "react": "^17.0.2",
     "react-audio-player": "^0.17.0",
     "react-dom": "^17.0.2",

frontend/src/components/DraggableScene.js

@@ -0,0 +1,25 @@
+// DraggableScene.js
+import React from "react";
+import { useDrag } from "react-dnd";
+
+const DraggableScene = ({ scene, index, onDragStart }) => {
+  const [{ isDragging }, drag] = useDrag({
+    type: "SCENE",
+    item: { index },
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+    begin: () => {
+      onDragStart(index);
+    },
+  });
+
+  return (
+    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
+      {/* Render your scene component here */}
+      {/* For example: <div>{scene.name}</div> */}
+    </div>
+  );
+};
+
+export default DraggableScene;

frontend/src/containers/pages/SceneSelectionPage.js

@@ -1,11 +1,12 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState, useRef } from "react";
 import {
   useParams,
   Route,
   useRouteMatch,
   Switch,
   useHistory,
 } from "react-router-dom";
+import Papa from "papaparse";
 import { Button } from "@material-ui/core";
 import TopBar from "../../components/TopBar";
 import ListContainer from "../../components/ListContainer";
@@ -33,6 +34,20 @@ export function SceneSelectionPage({ data = null }) {
   const { scenes, currentScene, setCurrentScene, reFetch } =
     useContext(SceneContext);
   const { getUserIdToken, VpsUser } = useContext(AuthenticationContext);
+  const fileInputRef = useRef(null);
+  const handCSVClick = () => {
+    fileInputRef.current.click();
+  };
+  const handleFileChange = (e) => {
+    const selectedFile = e.target.files[0];
+    Papa.parse(selectedFile, {
+      header: true,
+      skipEmptyLines: true,
+      complete(results) {
+        console.log(results.data);
+      },
+    });
+  };
 
   /** called when the Add card is clicked */
   async function createNewScene() {
@@ -173,6 +188,22 @@ export function SceneSelectionPage({ data = null }) {
         >
           Share
         </Button>
+        <Button
+          className="btn top contained white"
+          color="default"
+          variant="outlined"
+          onClick={() => handCSVClick(true)}
+        >
+          Upload CSV
+        </Button>
+        <input
+          type="file"
+          ref={fileInputRef}
+          accept=".csv"
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+        />
+
         <HelpButton />
       </TopBar>
       <ListContainer