From d82b65f879fecbb9f091e24212308cf5c5cbbc34 Mon Sep 17 00:00:00 2001 From: phegalante Date: Thu, 22 Oct 2020 20:39:03 -0300 Subject: [PATCH] feat: support multi files upload --- backend/src/controllers/MessageController.ts | 10 +++-- backend/src/routes/messageRoutes.ts | 11 ++++- backend/src/server.ts | 5 +-- frontend/src/components/MessageInput/index.js | 41 +++++++++---------- 4 files changed, 37 insertions(+), 30 deletions(-) diff --git a/backend/src/controllers/MessageController.ts b/backend/src/controllers/MessageController.ts index 7aa0bc6..cd16ec9 100644 --- a/backend/src/controllers/MessageController.ts +++ b/backend/src/controllers/MessageController.ts @@ -38,12 +38,16 @@ export const index = async (req: Request, res: Response): Promise => { export const store = async (req: Request, res: Response): Promise => { const { ticketId } = req.params; const { body }: MessageData = req.body; - const media = req.file; + const medias = req.files as Express.Multer.File[]; const ticket = await ShowTicketService(ticketId); - if (media) { - await SendWhatsAppMedia({ media, ticket }); + if (medias) { + await Promise.all( + medias.map(async (media: Express.Multer.File) => { + await SendWhatsAppMedia({ media, ticket }); + }) + ); } else { await SendWhatsAppMessage({ body, ticket }); } diff --git a/backend/src/routes/messageRoutes.ts b/backend/src/routes/messageRoutes.ts index 554672c..a97303b 100644 --- a/backend/src/routes/messageRoutes.ts +++ b/backend/src/routes/messageRoutes.ts @@ -1,13 +1,22 @@ import { Router } from "express"; +import multer from "multer"; import isAuth from "../middleware/isAuth"; +import uploadConfig from "../config/upload"; import * as MessageController from "../controllers/MessageController"; const messageRoutes = Router(); +const upload = multer(uploadConfig); + messageRoutes.get("/messages/:ticketId", isAuth, MessageController.index); -messageRoutes.post("/messages/:ticketId", isAuth, MessageController.store); +messageRoutes.post( + "/messages/:ticketId", + isAuth, + upload.array("medias"), + MessageController.store +); messageRoutes.delete("/messages/:messageId", isAuth, MessageController.remove); diff --git a/backend/src/server.ts b/backend/src/server.ts index 1225df6..04cd1da 100644 --- a/backend/src/server.ts +++ b/backend/src/server.ts @@ -4,11 +4,10 @@ import "express-async-errors"; import express, { Request, Response, NextFunction } from "express"; import cors from "cors"; import cookieParser from "cookie-parser"; -import multer from "multer"; import * as Sentry from "@sentry/node"; -import "./database"; import uploadConfig from "./config/upload"; +import "./database"; import AppError from "./errors/AppError"; import routes from "./routes"; import { initIO } from "./libs/socket"; @@ -16,7 +15,6 @@ import { StartWhatsAppSessions } from "./services/WbotServices/StartWhatsAppSess Sentry.init({ dsn: process.env.SENTRY_DSN }); -const upload = multer(uploadConfig); const app = express(); app.use( @@ -28,7 +26,6 @@ app.use( app.use(cookieParser()); app.use(express.json()); app.use(Sentry.Handlers.requestHandler()); -app.use(upload.single("media")); app.use("/public", express.static(uploadConfig.directory)); app.use(routes); diff --git a/frontend/src/components/MessageInput/index.js b/frontend/src/components/MessageInput/index.js index 755cfb8..28148a7 100644 --- a/frontend/src/components/MessageInput/index.js +++ b/frontend/src/components/MessageInput/index.js @@ -109,8 +109,7 @@ const MessageInput = ({ ticketStatus }) => { const { ticketId } = useParams(); const username = localStorage.getItem("username"); - const mediaInitialState = { preview: "", raw: "", name: "" }; - const [media, setMedia] = useState(mediaInitialState); + const [medias, setMedias] = useState([]); const [inputMessage, setInputMessage] = useState(""); const [showEmoji, setShowEmoji] = useState(false); const [loading, setLoading] = useState(false); @@ -120,7 +119,7 @@ const MessageInput = ({ ticketStatus }) => { return () => { setInputMessage(""); setShowEmoji(false); - setMedia({}); + setMedias([]); }; }, [ticketId]); @@ -133,23 +132,18 @@ const MessageInput = ({ ticketStatus }) => { setInputMessage(prevState => prevState + emoji); }; - const handleChangeMedia = e => { - if (e.target.files.length) { - setMedia({ - preview: URL.createObjectURL(e.target.files[0]), - raw: e.target.files[0], - name: e.target.files[0].name, - }); + const handleChangeMedias = e => { + if (!e.target.files) { + return; } + + const selectedMedias = Array.from(e.target.files); + setMedias(selectedMedias); }; const handleInputPaste = e => { if (e.clipboardData.files[0]) { - setMedia({ - preview: URL.createObjectURL(e.clipboardData.files[0]), - raw: e.clipboardData.files[0], - name: e.clipboardData.files[0].name, - }); + setMedias([e.clipboardData.files[0]]); } }; @@ -158,9 +152,11 @@ const MessageInput = ({ ticketStatus }) => { e.preventDefault(); const formData = new FormData(); - formData.append("media", media.raw); formData.append("fromMe", true); - formData.append("body", media.name); + medias.forEach(media => { + formData.append("medias", media); + formData.append("body", media.name); + }); try { await api.post(`/messages/${ticketId}`, formData); @@ -178,7 +174,7 @@ const MessageInput = ({ ticketStatus }) => { } setLoading(false); - setMedia(mediaInitialState); + setMedias([]); }; const handleSendMessage = async () => { @@ -267,13 +263,13 @@ const MessageInput = ({ ticketStatus }) => { } }; - if (media.preview) + if (medias.length > 0) return ( setMedia(mediaInitialState)} + onClick={e => setMedias([])} > @@ -284,7 +280,7 @@ const MessageInput = ({ ticketStatus }) => { ) : ( - {media.name} + {medias[0]?.name} {/* */} )} @@ -321,11 +317,12 @@ const MessageInput = ({ ticketStatus }) => { ) : null}