blsmedia/bot
2
0
Fork 0
Code Activity

fix(bot): 🐛 Files upload progress bar not sequential

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-07-02 17:07:48 +02:00
parent 066147f81d
commit b0010aae32
2 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/FileUploadForm.tsx
View File

@@ -24,7 +24,7 @@ export const FileUploadForm = ({
const { resultId } = useAnswers() const { resultId } = useAnswers()
const [selectedFiles, setSelectedFiles] = useState<File[]>([]) const [selectedFiles, setSelectedFiles] = useState<File[]>([])
const [isUploading, setIsUploading] = useState(false) const [isUploading, setIsUploading] = useState(false)
const [uploadProgressPercent, setUploadProgressPercent] = useState(10) const [uploadProgressPercent, setUploadProgressPercent] = useState(0)
const [isDraggingOver, setIsDraggingOver] = useState(false) const [isDraggingOver, setIsDraggingOver] = useState(false)
const [errorMessage, setErrorMessage] = useState<string>() const [errorMessage, setErrorMessage] = useState<string>()
@@ -85,6 +85,8 @@ export const FileUploadForm = ({
})), })),
onUploadProgress: setUploadProgressPercent, onUploadProgress: setUploadProgressPercent,
}) })
setIsUploading(false)
setUploadProgressPercent(0)
if (urls.length !== files.length) if (urls.length !== files.length)
return setErrorMessage('An error occured while uploading the files') return setErrorMessage('An error occured while uploading the files')
onSubmit({ onSubmit({
@@ -121,7 +123,7 @@ export const FileUploadForm = ({
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDropFile} onDrop={handleDropFile}
> >
{isUploading && uploadProgressPercent ? ( {isUploading ? (
<> <>
{selectedFiles.length === 1 ? ( {selectedFiles.length === 1 ? (
<Spinner /> <Spinner />
@@ -130,7 +132,9 @@ export const FileUploadForm = ({
<div <div
className="upload-progress-bar h-2.5 rounded-full" className="upload-progress-bar h-2.5 rounded-full"
style={{ style={{
width: `${uploadProgressPercent}%`, width: `${
uploadProgressPercent > 0 ? uploadProgressPercent : 10
}%`,
transition: 'width 150ms cubic-bezier(0.4, 0, 0.2, 1)', transition: 'width 150ms cubic-bezier(0.4, 0, 0.2, 1)',
}} }}
/> />

21
packages/utils/src/utils.ts
View File

@@ -207,7 +207,11 @@ export const uploadFiles = async ({
files, files,
onUploadProgress, onUploadProgress,
}: UploadFileProps): Promise<UrlList> => { }: UploadFileProps): Promise<UrlList> => {
const requests = files.map(async ({ file, path }) => { const urls = []
let i = 0
for (const { file, path } of files) {
onUploadProgress && onUploadProgress((i / files.length) * 100)
i += 1
const { data } = await sendRequest<{ const { data } = await sendRequest<{
presignedUrl: { url: string; fields: any } presignedUrl: { url: string; fields: any }
}>( }>(
@@ -216,7 +220,7 @@ export const uploadFiles = async ({
)}&fileType=${file.type}` )}&fileType=${file.type}`
) )
if (!data?.presignedUrl) return null if (!data?.presignedUrl) continue
const { url, fields } = data.presignedUrl const { url, fields } = data.presignedUrl
const formData = new FormData() const formData = new FormData()
@@ -228,18 +232,9 @@ export const uploadFiles = async ({
body: formData, body: formData,
}) })
if (!upload.ok) return if (!upload.ok) continue
return `${url.split('?')[0]}/${path}` urls.push(`${url.split('?')[0]}/${path}`)
})
const urls = []
let i = 0
for (const request of requests) {
i += 1
const url = await request
onUploadProgress && onUploadProgress((i / requests.length) * 100)
if (!url) continue
urls.push(url)
} }
return urls return urls
} }