Skip to content

Commit fe9b489

Browse files
committed
feat(maz-ui): add parallel upload with worker pool and enhanced file type detection in MazDropzone
Add `maxConcurrentUploads` prop (default: 5) to control concurrent file uploads. Replace sequential uploads with worker pool pattern for optimal performance. Workers automatically pick the next file from the queue as soon as they finish, maintaining constant throughput without overwhelming the server. Refactor icon mapping system: - Replace complex switch/case with Map-based structure for better maintainability - Add support for 100+ file extensions with appropriate icons - Integrate new file type logos (js, ts, vue, react, html, json, xml, markdown, etc.) - Replace MazCamera with MazFilm for video files - Add support for code files, documents, media, archives, fonts, and design files The combination of parallel uploads and smart file type detection significantly improves both performance and user experience for file upload workflows.
1 parent 695bf91 commit fe9b489

File tree

2 files changed

+212
-90
lines changed

2 files changed

+212
-90
lines changed

apps/docs/src/components/maz-dropzone.md

Lines changed: 84 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,8 @@ function handleError({ code, files }) {
8080
ref="dropzone"
8181
v-model="files"
8282
:max-file-size="3"
83-
:max-files="5"
83+
multiple
84+
:max-concurrent-uploads="3"
8485
@upload-success="onUploadSuccess"
8586
@upload-error="onUploadError"
8687
@error="onError"
@@ -128,9 +129,10 @@ function onError({ files, event, code }) {
128129
<template>
129130
<MazDropzone
130131
v-model="files"
131-
:data-types="['image/*']"
132+
:data-types="['image/*', '.zip', '.strings', '.json', '.stringsdict']"
132133
:max-file-size="3"
133134
:max-files="5"
135+
:max-concurrent-uploads="5"
134136
url="https://httpbin.org/post"
135137
:request-options="{
136138
headers: { 'My-Awesome-Header': 'header value' },
@@ -156,15 +158,52 @@ You can restrict allowed file types using the `data-types` prop:
156158
<ComponentDemo>
157159
<MazDropzone
158160
v-model="files"
159-
:data-types="['image/jpeg', 'image/png']"
161+
:data-types="acceptedFormats"
160162
:max-file-size="5"
161163
@error="onError"
162164
/>
163165

164166
<template #code>
165167

166-
```html
167-
<MazDropzone v-model="files" :data-types="['image/jpeg', 'image/png']" :max-file-size="5" @error="onError" />
168+
```vue
169+
<script lang="ts" setup>
170+
const acceptedFormats = [
171+
'.strings',
172+
'.stringsdict',
173+
'.plist',
174+
'.xliff',
175+
'.xlf',
176+
'.xml',
177+
'.json',
178+
'.yaml',
179+
'.yml',
180+
'.po',
181+
'.pot',
182+
'.mo',
183+
'.properties',
184+
'.arb',
185+
'.csv',
186+
'.tsv',
187+
'.txt',
188+
'text/*',
189+
'application/json',
190+
'text/xml',
191+
'application/xml',
192+
'text/yaml',
193+
'text/html',
194+
'image/svg+xml',
195+
'video/mp4',
196+
'video/quicktime',
197+
'video/mpeg',
198+
'video/ogg',
199+
'video/webm',
200+
'audio/*',
201+
]
202+
</script>
203+
204+
<template>
205+
<MazDropzone v-model="files" :data-types="acceptedFormats" :max-file-size="5" @error="onError" />
206+
</template>
168207
```
169208

170209
</template>
@@ -439,4 +478,44 @@ const onError = ({ files, event, code }) => {
439478
console.error('Error:', files, event, code)
440479
toast.error(`${files?.length} files upload failed: ${code} - ${files?.map(file => file.name).join(', ')}`)
441480
}
481+
482+
const acceptedFormats = [
483+
// iOS
484+
'.strings',
485+
'.stringsdict',
486+
'.plist',
487+
'.xliff',
488+
'.xlf',
489+
// Android
490+
'.xml',
491+
// Web
492+
'.json',
493+
'.yaml',
494+
'.yml',
495+
'.po',
496+
'.pot',
497+
'.mo',
498+
// Java
499+
'.properties',
500+
// Flutter
501+
'.arb',
502+
// Général
503+
'.csv',
504+
'.tsv',
505+
'.txt',
506+
// MIME types fallback
507+
'text/*',
508+
'application/json',
509+
'text/xml',
510+
'application/xml',
511+
'text/yaml',
512+
'text/html',
513+
'image/svg+xml',
514+
'video/mp4',
515+
'video/quicktime',
516+
'video/mpeg',
517+
'video/ogg',
518+
'video/webm',
519+
'audio/*',
520+
]
442521
</script>

0 commit comments

Comments
 (0)