inertia-bootstrap-forms 1.0.64 → 1.0.66

package/index.d.ts

@@ -165,6 +165,10 @@ export const UppyInput: DefineComponent<{
         type: Boolean,
         default: false,
     },
+    showRestrictionCaption: {
+        type: Boolean,
+        default: true,
+    },
     modelValue: String,
     url: { type: String, default: "/upload" },
     options: { type: Object, default: () => ({}) },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.64",
+    "version": "1.0.66",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",

package/src/UppyInput.vue

@@ -6,6 +6,7 @@
         <Dropzone/>
       </slot>
     </UppyContextProvider>
+    <div class="uppy-input-area--caption small text-body-secondary fst-italic" v-if="restrictionCaption">{{restrictionCaption}}</div>
   </div>
 </template>
 
@@ -28,6 +29,7 @@ const props = defineProps({
   url: {type: String, default: '/upload'},
   config: {type: Object, default: () => ({})},
   errorHandler: {type: Function, default: null},
+  showRestrictionCaption: {type: Boolean, default: true},
 })
 
 const emits = defineEmits([
@@ -38,6 +40,7 @@ const emits = defineEmits([
   'restriction-failed',
 ])
 
+const restrictionCaption = ref(null);
 const inputEl = ref(null);
 const uppy = shallowRef(null);
 
@@ -67,7 +70,7 @@ uppy.value = new Uppy({
   autoProceed: true,
   ...props.config,
   restrictions: {
-    maxNumberOfFiles: props.multiple ? 10 : 1,
+    maxNumberOfFiles: props.multiple ? null : 1,
     ...(props.config?.restrictions || {})
   },
 });
@@ -89,8 +92,9 @@ uppy.value.on('upload-success', (file, response) => {
 
 uppy.value.on('file-added', (file) => emits('file-added', file));
 uppy.value.on('file-removed', (file) => {
+  const serverResponse = file.response?.body ?? file.response;
+
   if (props.multiple && Array.isArray(modelValue.value)) {
-    const serverResponse = file.response?.body ?? file.response;
     modelValue.value = modelValue.value.filter(item => {
       // مقایسه بر اساس شناسه یا کل آبجکت (بسته به ساختار ارسالی سرور شما)
       // اگر سرور ID برمی‌گرداند: return item.id !== serverResponse.id;
@@ -101,30 +105,42 @@ uppy.value.on('file-removed', (file) => {
     modelValue.value = null;
   }
 
-  // بخش حذف از سرور
-  if (file.response) {
+  if (serverResponse) {
     fetch(props.url, {
       method: 'DELETE',
       headers: {
         'X-Requested-With': 'XMLHttpRequest',
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify(file.response.body ?? file.response),
+      body: JSON.stringify(serverResponse),
     });
   }
 
   emits('file-removed', file);
 });
 
+uppy.value.on('progress', (progress) => emits('progress', progress));
+uppy.value.on('upload-progress', (file, progress) => emits('upload-progress', file, progress));
+uppy.value.on('upload-pause', (file, progress) => emits('upload-pause', file, progress));
+uppy.value.on('cancel-all', () => emits('cancel-all'));
+uppy.value.on('retry-all', () => emits('retry-all', ));
+uppy.value.on('upload-stalled', (error, files) => emits('upload-stalled', error, files));
+uppy.value.on('upload-retry', (file) => emits('upload-retry', file));
+
 uppy.value.on('complete', (result) => emits('complete', result));
-uppy.value.on('error', (error) => emits('error', error));
+
+uppy.value.on('error', (error) => {
+  emits('error', error)
+});
+
+uppy.value.on('upload-error', (file, error, response) => {
+  const errorMessage = JSON.parse(response.response)?.message ?? error;
+  handleError(errorMessage);
+  emits('upload-error', file, error, response, errorMessage)
+});
 
 uppy.value.on('restriction-failed', (file, error) => {
-  if (props.errorHandler) {
-    props.errorHandler(error);
-  } else {
-    showError(error.message);
-  }
+  handleError(error.message);
   emits('restriction-failed', file, error);
 });
 
@@ -136,7 +152,6 @@ onMounted(() => {
       uppy.value.use(XHR, {
         method: 'POST',
         endpoint: props.url,
-        withCredentials: false,
         headers: {
           'accept': 'application/json',
         },
@@ -144,6 +159,12 @@ onMounted(() => {
       });
     });
   }
+
+  if(uppy.value?.opts?.restrictions){
+    console.log(uppy.value?.opts?.restrictions);
+    restrictionCaption.value = buildRestrictionsCaption(uppy.value.opts.restrictions)
+    console.log('restrictionCaption', restrictionCaption.value);
+  }
 });
 
 onBeforeUnmount(() => {
@@ -152,6 +173,14 @@ onBeforeUnmount(() => {
   }
 });
 
+function handleError(error) {
+  if (props.errorHandler) {
+    props.errorHandler(error);
+  } else if (error) {
+    showError(error);
+  }
+}
+
 function showError(message) {
   const errorEl = document.createElement('div');
   errorEl.textContent = message;
@@ -162,6 +191,62 @@ function showError(message) {
     setTimeout(() => errorEl.remove(), 3000);
   }
 }
+
+function formatBytesToKB(size) {
+  if (!size) return null;
+  return Math.round(size / 1024);
+}
+
+function buildRestrictionsCaption(restrictions) {
+  if (!restrictions) return '';
+
+  const {
+    allowedFileTypes,
+    maxFileSize,
+    minFileSize,
+    maxNumberOfFiles,
+    minNumberOfFiles,
+    maxTotalFileSize,
+  } = restrictions;
+
+  const parts = [];
+
+  // پسوندها
+  if (allowedFileTypes && allowedFileTypes.length) {
+    const types = allowedFileTypes
+        .map(type => type.replace('.', ''))
+        .join('، ');
+    parts.push(`فقط فایل با پسوندهای ${types}`);
+  }
+
+  // تعداد فایل
+  if (maxNumberOfFiles) {
+    parts.push(`امکان انتخاب حداکثر ${maxNumberOfFiles} فایل`);
+  }
+
+  if (minNumberOfFiles) {
+    parts.push(`حداقل ${minNumberOfFiles} فایل نیاز است`);
+  }
+
+  // حجم هر فایل
+  if (maxFileSize) {
+    parts.push(`با حداکثر حجم ${formatBytesToKB(maxFileSize)} کیلوبایت برای هر فایل`);
+  }
+
+  if (minFileSize) {
+    parts.push(`با حداقل حجم ${formatBytesToKB(minFileSize)} کیلوبایت برای هر فایل`);
+  }
+
+  // مجموع حجم
+  if (maxTotalFileSize) {
+    parts.push(`و مجموع حجم کل حداکثر ${formatBytesToKB(maxTotalFileSize)} کیلوبایت`);
+  }
+
+  if (!parts.length) return '';
+
+  return parts.join('، ') + ' مجاز است.';
+}
+
 </script>
 
 <style>