(v2.6) File uploads (single and multiple)

Author: kevincobain2000

ui/README.md

@@ -8,14 +8,14 @@ npm install
 npm run dev
 ```
 
-**Open in Browser** http://localhost:3000?api=http://localhost:3000/sample.json
+**Open in Browser** http://localhost:3000/request-docs?api=http://localhost:3000/request-docs/sample.json
 
 
 ### Developing with Laravel
 
 #### Step 1
 
-**Optional** Enable CORS on Laravel to allow localhost:3000
+**Optional** Enable CORS on Laravel to allow localhost:3000/request-docs
 **Recommended** Open Chrome with `--disable-web-security` flag
 
 On Mac to open chrome command:

ui/src/components/ApiAction.tsx

@@ -28,6 +28,7 @@ export default function ApiAction(props: Props) {
     const [sendingRequest, setSendingRequest] = useState(false);
     const [queryParams, setQueryParams] = useState('');
     const [bodyParams, setBodyParams] = useState('');
+    const [fileParams, setFileParams] = useState(null);
     const [responseData, setResponseData] = useState("");
     const [sqlQueriesCount, setSqlQueriesCount] = useState(0);
     const [sqlData, setSqlData] = useState("");
@@ -37,13 +38,20 @@ export default function ApiAction(props: Props) {
     const [responseHeaders, setResponseHeaders] = useState("");
     const [activeTab, setActiveTab] = useState('info');
 
-    const handleFileChange = (files: any) => {
-        const bodyAppend = JSON.parse(bodyParams)
-        bodyAppend["avatar"] = files[0]
-        setBodyParams(JSON.stringify(bodyAppend))
+    const handleFileChange = (files: any, file: any) => {
+        const formData: any = new FormData()
+        if (file.includes('.*')) {
+            const fileParam = file.replace('.*', '')
+            for (let i = 0; i < files.length; i++) {
+                formData.append(`${fileParam}[${i}]`, files[i]);
+            }
+        } else {
+            formData.append(file, files[0])
+        }
+        setFileParams(formData)
     }
 
-        // // update localstorage
+    // // update localstorage
     const updateLocalStorage = () => {
         const jsonAllParamsRegistry = JSON.parse(allParamsRegistry)
         if (method == 'GET' || method == 'HEAD' || method == 'DELETE') {
@@ -76,11 +84,22 @@ export default function ApiAction(props: Props) {
         if (method == 'POST' || method == 'PUT' || method == 'PATCH') {
             try {
                 JSON.parse(bodyParams)
+                if (fileParams != null) {
+                    for (const [key, value] of Object.entries(JSON.parse(bodyParams))) {
+                        fileParams.append(key, value)
+                    }
+                }
+
             } catch (error: any) {
                 setError("Request body incorrect: " + error.message)
                 return
             }
-            options['body'] = bodyParams
+
+            if (fileParams != null) {
+                options['body'] = fileParams // includes body as well
+            } else {
+                options['body'] = bodyParams // just the body
+            }
         }
 
         const startTime = performance.now();
@@ -93,51 +112,51 @@ export default function ApiAction(props: Props) {
         setError(null)
 
         fetch(`${host}/${requestUri}${queryParams}`, options)
-        .then((response) => {
-            let timeTaken = performance.now() - startTime
-            // round to 3 decimals
-            timeTaken = Math.round((timeTaken + Number.EPSILON) * 1000) / 1000
-            setTimeTaken(timeTaken)
-            setResponseStatus(response.status)
-            setResponseHeaders(JSON.stringify(Object.fromEntries(response.headers), null, 2))
-            setSendingRequest(false)
-            return response.json();
-        }).then((data) => {
-            
-            if (data && data._lrd && data._lrd.queries) {
-                const sqlQueries = data._lrd.queries.map((query: any) => {
-                    return "Connection: " 
-                        + query.connection_name 
-                        + " Time taken: " 
-                        + query.time 
-                        + "ms: \n" 
-                        + query.sql + "\n"
-                }).join("\n")
-                setSqlData(sqlQueries)
-                setSqlQueriesCount(data._lrd.queries.length)
-            }
-            if (data && data._lrd && data._lrd.logs) {
-                let logs = ""
-                for (const value of data._lrd.logs) {
-                    logs += value.level + ": " + value.message + "\n"
+            .then((response) => {
+                let timeTaken = performance.now() - startTime
+                // round to 3 decimals
+                timeTaken = Math.round((timeTaken + Number.EPSILON) * 1000) / 1000
+                setTimeTaken(timeTaken)
+                setResponseStatus(response.status)
+                setResponseHeaders(JSON.stringify(Object.fromEntries(response.headers), null, 2))
+                setSendingRequest(false)
+                return response.json();
+            }).then((data) => {
+
+                if (data && data._lrd && data._lrd.queries) {
+                    const sqlQueries = data._lrd.queries.map((query: any) => {
+                        return "Connection: "
+                            + query.connection_name
+                            + " Time taken: "
+                            + query.time
+                            + "ms: \n"
+                            + query.sql + "\n"
+                    }).join("\n")
+                    setSqlData(sqlQueries)
+                    setSqlQueriesCount(data._lrd.queries.length)
                 }
-                setLogData(logs)
-            }
-            if (data && data._lrd && data._lrd.memory) {
-                setServerMemory(data._lrd.memory)
-            }
-            // remove key _lrd from response
-            if (data && data._lrd) {
-                delete data._lrd
-            }
-            setResponseData(JSON.stringify(data, null, 2))
-            setActiveTab('response')
-        }).catch((error) => {
-            setError("Response error: " + error)
-            setResponseStatus(500)
-            setSendingRequest(false)
-            setActiveTab('response')
-        })
+                if (data && data._lrd && data._lrd.logs) {
+                    let logs = ""
+                    for (const value of data._lrd.logs) {
+                        logs += value.level + ": " + value.message + "\n"
+                    }
+                    setLogData(logs)
+                }
+                if (data && data._lrd && data._lrd.memory) {
+                    setServerMemory(data._lrd.memory)
+                }
+                // remove key _lrd from response
+                if (data && data._lrd) {
+                    delete data._lrd
+                }
+                setResponseData(JSON.stringify(data, null, 2))
+                setActiveTab('response')
+            }).catch((error) => {
+                setError("Response error: " + error)
+                setResponseStatus(500)
+                setSendingRequest(false)
+                setActiveTab('response')
+            })
 
     }
 
@@ -213,6 +232,7 @@ export default function ApiAction(props: Props) {
                 )}
                 {activeTab == 'request' && (
                     <ApiActionRequest
+                        lrdDocsItem={lrdDocsItem}
                         requestUri={requestUri}
                         method={method}
                         sendingRequest={sendingRequest}

ui/src/components/elements/ApiActionLog.tsx

@@ -30,6 +30,7 @@ export default function ApiActionLog(props: Props) {
                             maxLines={50}
                             width='100%'
                             mode="sh"
+                            readOnly={true}
                             value={logData}
                             theme="one_dark"
                             wrapEnabled={true}

ui/src/components/elements/ApiActionRequest.tsx

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
+import type { IAPIInfo } from '../libs/types'
+import Files from 'react-files'
 import "ace-builds";
+import shortid from 'shortid';
 import jsonWorkerUrl from 'ace-builds/src-min-noconflict/worker-json?url';
 ace.config.setModuleUrl('ace/mode/json_worker', jsonWorkerUrl);
 
@@ -9,10 +12,11 @@ import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-one_dark";
 import "ace-builds/src-noconflict/ext-language_tools";
 
-import { PaperAirplaneIcon  } from '@heroicons/react/24/solid'
+import { PaperAirplaneIcon, ChevronRightIcon } from '@heroicons/react/24/solid'
 
 
 interface Props {
+    lrdDocsItem: IAPIInfo,
     requestUri: string,
     method: string,
     sendingRequest: boolean,
@@ -22,13 +26,15 @@ interface Props {
     setRequestUri: (requestUri: string) => void,
     handleSendRequest: () => void,
     handleChangeRequestHeaders: (requestHeaders: string) => void,
-    handleFileChange: (e: any) => void,
+    handleFileChange: (files: any, file: any) => void,
     setBodyParams: (bodyParams: string) => void,
     setQueryParams: (queryParams: string) => void,
 }
 
 export default function ApiActionRequest(props: Props) {
-    const { requestUri,
+    const {
+        lrdDocsItem,
+        requestUri,
         method,
         sendingRequest,
         requestHeaders,
@@ -41,6 +47,27 @@ export default function ApiActionRequest(props: Props) {
         setBodyParams,
         setQueryParams } = props
 
+    const [files, setFiles] = useState<any>([])
+    const [uploadedFiles, setUploadedFiles] = useState<any>({})
+
+    const handleFileUploaded = (files: any, file: any) => {
+        const uf = { ...uploadedFiles }
+        uf[file] = files
+        setUploadedFiles(uf)
+        handleFileChange(files, file)
+    }
+
+    useEffect(() => {
+        //check if lrdDocsItem has rules
+        const files: any = []
+        for (const [key, rule] of Object.entries(lrdDocsItem.rules)) {
+            if (rule.includes('file') || rule.includes('image')) {
+                files.push(key)
+            }
+        }
+        setFiles(files)
+    }, [])
+
     return (
         <>
             <div className="form-control">
@@ -105,18 +132,40 @@ export default function ApiActionRequest(props: Props) {
             {(method == 'POST' || method == 'PUT' || method == 'PATCH') && (
                 <div className="mockup-code">
                     <span className='pl-5 text-sm text-slate-500'>REQUEST BODY</span>
-                    {/* <div className='pl-5'>Image</div>
-                    <div className="files-dropzone">
-                        <Files
-                            className='files-dropzone'
-                            onChange={handleFileChange}
-                            multiple={true}
-                            maxFileSize={10000000}
-                            minFileSize={0}
-                            clickable>
-                            Drop files here or click to upload
-                        </Files>
-                    </div> */}
+                    {files.map((file: string) =>
+                        <div key={shortid.generate()}>
+                            <div className='m-2 pl-3'>
+                                <code>
+                                    <small>{file}</small>
+                                </code>
+                                {file.includes('.*') && (
+                                    <ChevronRightIcon className='inline-block w-4 h-4 ml-1' />
+                                )}
+                            </div>
+                            <Files
+                                className='p-5 bg-gray-800 border border-gray-500 border-double hover:bg-gray-700 hover:border-dashed hover:cursor-pointer'
+                                onChange={(e: any) => handleFileUploaded(e, file)}
+                                multiple={file.includes('.*')}
+                                maxFileSize={10000000}
+                                minFileSize={0}
+                                clickable
+                            >
+                                {uploadedFiles[file] && uploadedFiles[file].length > 0 && (
+                                    <div className='text-sm text-gray-300'>
+                                        {uploadedFiles[file].map((file: any, index: any) => (
+                                            <div key={file.id}>
+                                                {index + 1}) {file.name} - {file.size} bytes
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                                {file.includes('.*')
+                                    ? 'Drop or click to upload multiple files'
+                                    : 'Drop or click to upload single file'
+                                }
+                            </Files>
+                        </div>
+                    )}
                     <AceEditor
                         height='200px'
                         width='100%'

ui/src/components/elements/ApiActionResponse.tsx

@@ -32,6 +32,7 @@ export default function ApiActionResponse(props: Props) {
                         <div className="collapse-content p-0">
                             <AceEditor
                                 maxLines={35}
+                                readOnly={true}
                                 width='100%'
                                 mode="json"
                                 wrapEnabled={true}
@@ -54,12 +55,15 @@ export default function ApiActionResponse(props: Props) {
             )}
             {responseData && (
                 <div className="mockup-code">
-                    <span className='pl-5 text-sm'>Response. Took: <b>{timeTaken}ms</b>, Status Code: <b>{responseStatus}</b>, Server memory: <b>{serverMemory}</b></span>
+                    <span className='pl-5 text-sm text-slate-500'>RESPONSE</span>
+                    <br />
+                    <span className='pl-5 text-sm'>Time taken: <b>{timeTaken}ms</b>, Status Code: <b>{responseStatus}</b>, Server memory: <b>{serverMemory}</b></span>
                     <AceEditor
                         maxLines={50}
                         width='100%'
                         mode="json"
                         wrapEnabled={true}
+                        readOnly={true}
                         value={responseData}
                         theme="one_dark"
                         onLoad={function (editor) { editor.renderer.setPadding(0); editor.renderer.setScrollMargin(5, 5, 5, 5); editor.renderer.setShowPrintMargin(false); }}

ui/src/components/elements/ApiActionSQL.tsx

@@ -30,6 +30,7 @@ export default function ApiActionSQL(props: Props) {
                         <AceEditor
                             maxLines={50}
                             width='100%'
+                            readOnly={true}
                             mode="sql"
                             wrapEnabled={true}
                             value={sqlData}

ui/src/global.css

@@ -98,6 +98,3 @@ td {
 .response-500,.response-501,.response-502,.response-503 {
     @apply bg-red-400 text-red-800;
 }
-.files-dropzone {
-    @apply bg-base-200 rounded p-5 mt-3 mb-3;
-}