add new field when uploading file

src/assets/styles/components/_files.scss

 
 .files-view-page-delete-btn {
   margin: 0 auto !important;
+}
+
+.files-note{
+  width: 100%;
+  resize: none;
+  padding: 10px;
+  height: 100px;
+  border: 1px solid #e4e4e4;
+  border-radius:6px;
+  outline:none;
+  font-size: 18px;
 }

src/pages/FilesPage/AddFile.js

   const categories = useSelector(selectCategories);
   const tags = useSelector(selectTags);
   const [selectedCategory, setSelectedCategory] = useState(null);
+  const [note,setNote] = useState("")
   const { t } = useTranslation();
 
   useEffect(() => {
     setPdfFile(null);
     setTitle("");
     setShowMessage(true);
+    setNote("")
   };
 
   useEffect(() => {
         categoryId: selectedCategory,
         tagsIds,
         fileToUpload: pdfFile,
+        note:note,
         onSuccessUploadFile,
       })
     );
   };
 
+  const handleChangeNote = (e) => {
+    setNote(e.target.value)
+  }
+
   return (
-    <div className="files-page">
+    <div className="files-page" style={{ paddingTop: "0px" }}>
       <div className="l-t-rectangle"></div>
       <div className="r-b-rectangle"></div>
       {/* <div className="files-page-card">
         </div>
       </div>
 
+      <div className="files-page-card">
+        <div className="files-page-card-title"></div>
+        <textarea className="files-note" placeholder="Note..." value={note} onChange={(e) => handleChangeNote(e)}/>
+      </div>
+
       <div
         className="add-file-message"
         style={

src/store/saga/filesSaga.js

     for (let i = 0; i < payload.tagsIds.length; i++)
       formData.append("tagsIds[]", payload.tagsIds[i]);
     formData.append("fileToUpload", payload.fileToUpload);
+    formData.append("note", payload.note);
     const result = yield call(uploadFileRequest, formData);
     yield put(uploadFile(result.data));
     payload.onSuccessUploadFile();