add read exported all chatflows json file functionality

packages/server/src/controllers/chatflows/index.ts

@@ -1,11 +1,11 @@
-import { Request, Response, NextFunction } from 'express'
-import chatflowsService from '../../services/chatflows'
-import { ChatFlow } from '../../database/entities/ChatFlow'
-import { createRateLimiter } from '../../utils/rateLimit'
-import { getApiKey } from '../../utils/apiKey'
-import { InternalFlowiseError } from '../../errors/internalFlowiseError'
+import { NextFunction, Request, Response } from 'express'
 import { StatusCodes } from 'http-status-codes'
+import { ChatFlow } from '../../database/entities/ChatFlow'
+import { InternalFlowiseError } from '../../errors/internalFlowiseError'
 import { ChatflowType } from '../../Interface'
+import chatflowsService from '../../services/chatflows'
+import { getApiKey } from '../../utils/apiKey'
+import { createRateLimiter } from '../../utils/rateLimit'
 
 const checkIfChatflowIsValidForStreaming = async (req: Request, res: Response, next: NextFunction) => {
     try {
@@ -105,6 +105,14 @@ const saveChatflow = async (req: Request, res: Response, next: NextFunction) =>
     }
 }
 
+const saveChatflows = async (req: Request, res: Response, next: NextFunction) => {
+    try {
+        res.send(req.body)
+    } catch (error) {
+        next(error)
+    }
+}
+
 const updateChatflow = async (req: Request, res: Response, next: NextFunction) => {
     try {
         if (typeof req.params === 'undefined' || !req.params.id) {
@@ -167,6 +175,7 @@ export default {
     getChatflowByApiKey,
     getChatflowById,
     saveChatflow,
+    saveChatflows,
     updateChatflow,
     getSinglePublicChatflow,
     getSinglePublicChatbotConfig

packages/server/src/routes/chatflows/index.ts

@@ -4,6 +4,7 @@ const router = express.Router()
 
 // CREATE
 router.post('/', chatflowsController.saveChatflow)
+router.post('/all', chatflowsController.saveChatflows)
 
 // READ
 router.get('/', chatflowsController.getAllChatflows)

packages/ui/src/api/chatflows.js

@@ -10,6 +10,8 @@ const getSpecificChatflowFromPublicEndpoint = (id) => client.get(`/public-chatfl
 
 const createNewChatflow = (body) => client.post(`/chatflows`, body)
 
+const createNewChatflows = (body) => client.post(`/chatflows/all`, body)
+
 const updateChatflow = (id, body) => client.put(`/chatflows/${id}`, body)
 
 const deleteChatflow = (id) => client.delete(`/chatflows/${id}`)
@@ -24,6 +26,7 @@ export default {
     getSpecificChatflow,
     getSpecificChatflowFromPublicEndpoint,
     createNewChatflow,
+    createNewChatflows,
     updateChatflow,
     deleteChatflow,
     getIsChatflowStreaming,

packages/ui/src/layout/MainLayout/Header/ProfileSection/index.jsx

@@ -51,6 +51,7 @@ const ProfileSection = ({ username, handleLogout }) => {
     const [aboutDialogOpen, setAboutDialogOpen] = useState(false)
 
     const anchorRef = useRef(null)
+    const inputRef = useRef()
 
     // ==============================|| Snackbar ||============================== //
 
@@ -85,9 +86,46 @@ const ProfileSection = ({ username, handleLogout }) => {
             }
         })
     }
+    const saveAllChatflowsApi = useApi(chatFlowsApi.createNewChatflows)
+    const fileChange = (e) => {
+        if (!e.target.files) return
 
+        const file = e.target.files[0]
+
+        const reader = new FileReader()
+        reader.onload = (evt) => {
+            if (!evt?.target?.result) {
+                return
+            }
+            const chatflows = JSON.parse(evt.target.result)
+            saveAllChatflowsApi.request(chatflows)
+        }
+        reader.readAsText(file)
+    }
+
+    const saveAllChatflowsSuccess = () => {
+        dispatch({ type: REMOVE_DIRTY })
+        enqueueSnackbar({
+            message: `Save All Chatflows Successful`,
+            options: {
+                key: new Date().getTime() + Math.random(),
+                variant: 'success',
+                action: (key) => (
+                    <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                        <IconX />
+                    </Button>
+                )
+            }
+        })
+    }
+    useEffect(() => {
+        if (saveAllChatflowsApi.error) errorFailed(`Failed to save Chatflows: ${saveAllChatflowsApi.error.response.data.message}`)
+        if (saveAllChatflowsApi.data) {
+            saveAllChatflowsSuccess()
+        }
+    }, [saveAllChatflowsApi.error, saveAllChatflowsApi.data])
     const importAllChatflows = () => {
-        console.log('reach importAllChatflows')
+        inputRef.current.click()
     }
     const getAllChatflowsApi = useApi(chatFlowsApi.getAllChatflows)
 
@@ -111,7 +149,7 @@ const ProfileSection = ({ username, handleLogout }) => {
         if (getAllChatflowsApi.error) errorFailed(`Failed to retrieve Chatflows: ${getAllChatflowsApi.error.response.data.message}`)
         if (getAllChatflowsApi.data) {
             const sanitizedChatflows = sanitizeChatflows(getAllChatflowsApi.data)
-            const dataStr = JSON.stringify(sanitizedChatflows, null, 2)
+            const dataStr = JSON.stringify({ Chatflows: sanitizedChatflows }, null, 2)
             const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr)
 
             const exportFileDefaultName = 'AllChatflows.json'
@@ -226,6 +264,7 @@ const ProfileSection = ({ username, handleLogout }) => {
                                                     </ListItemIcon>
                                                     <ListItemText primary={<Typography variant='body2'>Import Chatflows</Typography>} />
                                                 </ListItemButton>
+                                                <input ref={inputRef} type='file' hidden onChange={fileChange} />
                                                 <ListItemButton
                                                     sx={{ borderRadius: `${customization.borderRadius}px` }}
                                                     onClick={() => {