image upload from torrent upload page.

front-end to back-end with upload system => OK
back-end to db from api => OK

Author: Klaiment

api/src/controllers/torrent.js

@@ -137,6 +137,7 @@ export const uploadTorrent = async (req, res, next) => {
         source: req.body.source,
         infoHash,
         binary: req.body.torrent,
+        poster: req.body.poster,
         uploadedBy: req.userId,
         downloads: 0,
         anonymous: false,
@@ -154,7 +155,9 @@ export const uploadTorrent = async (req, res, next) => {
         group: groupId,
         mediaInfo: req.body.mediaInfo,
       });
-
+      console.log(req.body.name);
+      console.log(req.body.poster);
+      console.log(req.body);
       await newTorrent.save();
 
       if (groupId) await addToGroup(groupId, infoHash);

api/src/schema/torrent.js

@@ -4,6 +4,7 @@ import fuzzySearch from "mongoose-fuzzy-searching";
 const Torrent = new mongoose.Schema({
   infoHash: String,
   binary: String,
+  poster: String,
   uploadedBy: mongoose.Schema.ObjectId,
   name: String,
   description: String,

client/pages/upload.js

@@ -185,6 +185,7 @@ export const TorrentFields = ({
 
 const Upload = ({ token, userId }) => {
   const [torrentFile, setTorrentFile] = useState();
+  const [posterFile, setPosterFile] = useState();
   const [dropError, setDropError] = useState("");
   const [groupSuggestions, setGroupSuggestions] = useState([]);
 
@@ -234,19 +235,51 @@ const Upload = ({ token, userId }) => {
       setDropError(e.message);
     }
   }, []);
+  const onPosterDrop = useCallback((acceptedFiles) => {
+    try {
+      const [file] = acceptedFiles;
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = async () => {
+          console.log(`[DEBUG] Poster upload complete: ${reader.result.slice(0, 64)}...`);
+          const [, posterB64] = reader.result.split("base64,");
+          setPosterFile({ name: file.name, b64: posterB64 });
+        };
+        reader.onerror = () => {
+          console.log(`[DEBUG] Poster upload error: ${reader.error}`);
+          // Gérer les erreurs, si nécessaire
+        };
+        reader.readAsDataURL(file);
+      }
+    } catch (e) {
+      console.error(e);
+      // Gérer les erreurs, si nécessaire
+    }
+  }, []);
+
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     accept: { "application/x-bittorrent": [".torrent"] },
     maxFiles: 1,
   });
+  const { getRootProps: getPosterRootProps, getInputProps: getPosterInputProps, isDragActive: isPosterDragActive } = useDropzone({
+    onDrop: onPosterDrop,
+    accept: {
+      "image/jpeg": [".jpg", ".jpeg"],
+      "image/png": [".png"],
+    },
+    maxFiles: 1,
+  });
+
 
   const handleUpload = async (e) => {
     e.preventDefault();
     setLoading(true);
     const form = new FormData(e.target);
 
     try {
+      form.append("poster", posterFile.b64); // Ajoutez la valeur de l'image de l'affiche à la requête
       if (!torrentFile) throw new Error("No .torrent file added");
 
       const uploadRes = await fetch(`${SQ_API_URL}/torrent/upload`, {
@@ -265,6 +298,7 @@ const Upload = ({ token, userId }) => {
           tags: form.get("tags"),
           groupWith,
           mediaInfo: form.get("mediaInfo"),
+          poster: posterFile.b64,
         }),
       });
 
@@ -381,6 +415,27 @@ const Upload = ({ token, userId }) => {
             </Text>
           )}
         </Box>
+        <Box mb={4}>
+          <WrapLabel label={getLocaleString("uploadPosterImage")} as="div">
+            <FileUpload {...getPosterRootProps()}>
+              <input {...getPosterInputProps()} />
+              {posterFile ? (
+                <Text icon={Check} iconColor="success" iconSize={24} ml={2}>
+                  {posterFile.name}
+                </Text>
+              ) : isPosterDragActive ? (
+                <Text color="grey">
+                  {getLocaleString("uploadDropImageHere")}
+                </Text>
+              ) : (
+                <Text color="grey">
+                  {getLocaleString("uploadDragDropClickSelect")}
+                </Text>
+              )}
+            </FileUpload>
+          </WrapLabel>
+        </Box>
+
         <TorrentFields
           categories={SQ_TORRENT_CATEGORIES}
           handleGroupSearch={handleGroupSearch}