@adminforth/upload 1.0.23 → 1.0.25

package/ChangeLog.md

@@ -0,0 +1,7 @@
+
+
+## [1.0.23] - 2021-10-07
+
+### Fixed
+- preview maxWidth to limit max width of image
+- Added accept attribute to input

package/custom/uploader.vue

@@ -59,7 +59,7 @@
               </div>
               
           </div>
-          <input :id="inputId" type="file" class="hidden" @change="onFileChange" ref="uploadInputRef" />
+          <input :id="inputId" type="file" :accept="allowedExtensionsAttribute"  class="hidden" @change="onFileChange" ref="uploadInputRef" />
       </label>
   </div> 
 
@@ -134,6 +134,13 @@ const allowedExtensionsLabel = computed(() => {
   return label
 });
 
+const allowedExtensionsAttribute = computed(() => {
+  const allowedExtensions = props.meta.allowedExtensions || [];
+  return allowedExtensions.length > 0 
+    ? allowedExtensions.map(ext => `.${ext}`).join(', ') 
+    : '';
+});
+
 function clear() {
   imgPreview.value = null;
   progress.value = 0;
@@ -159,7 +166,9 @@ function humanifySize(size) {
 
 const onFileChange = async (e) => {
   // if empty then return
-  if (!e.target.files || e.target.files.length === 0) {
+  const files = e.target?.files || e.dataTransfer.files
+
+  if (!files  || files.length === 0)  {
     return;
   }
 
@@ -167,14 +176,14 @@ const onFileChange = async (e) => {
   progress.value = 0;
   uploaded.value = false;
   
-  const file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];
+  const file = files[0];
 
   // get filename, extension, size, mimeType
   const { name, size, type } = file;
 
   uploadedSize.value = size;
 
-
+  
   const extension = name.split('.').pop();
   const nameNoExtension = name.replace(`.${extension}`, '');
   console.log('File details:', { name, extension, size, type });

package/dist/custom/uploader.vue

@@ -59,7 +59,7 @@
               </div>
               
           </div>
-          <input :id="inputId" type="file" class="hidden" @change="onFileChange" ref="uploadInputRef" />
+          <input :id="inputId" type="file" :accept="allowedExtensionsAttribute"  class="hidden" @change="onFileChange" ref="uploadInputRef" />
       </label>
   </div> 
 
@@ -134,6 +134,13 @@ const allowedExtensionsLabel = computed(() => {
   return label
 });
 
+const allowedExtensionsAttribute = computed(() => {
+  const allowedExtensions = props.meta.allowedExtensions || [];
+  return allowedExtensions.length > 0 
+    ? allowedExtensions.map(ext => `.${ext}`).join(', ') 
+    : '';
+});
+
 function clear() {
   imgPreview.value = null;
   progress.value = 0;
@@ -159,7 +166,9 @@ function humanifySize(size) {
 
 const onFileChange = async (e) => {
   // if empty then return
-  if (!e.target.files || e.target.files.length === 0) {
+  const files = e.target?.files || e.dataTransfer.files
+
+  if (!files  || files.length === 0)  {
     return;
   }
 
@@ -167,14 +176,14 @@ const onFileChange = async (e) => {
   progress.value = 0;
   uploaded.value = false;
   
-  const file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];
+  const file = files[0];
 
   // get filename, extension, size, mimeType
   const { name, size, type } = file;
 
   uploadedSize.value = size;
 
-
+  
   const extension = name.split('.').pop();
   const nameNoExtension = name.replace(`.${extension}`, '');
   console.log('File details:', { name, extension, size, type });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/upload",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",