feat(file-uploader): add default slot for drop area (#559)

* feat(file-uploader): add slot for drop area

* feat(utils): edit isImage to use mime type

* chore: increment version

Author: stubbo

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.19.2",
+    "version": "0.20.0",
     "files": [
         "dist",
         "types"

package.json

@@ -1,14 +1,31 @@
 <template>
-    <div class="flex justify-evenly mb-6">
-        <UIButton theme="red" @click="error ? error = '' : error = 'Error message.'">
-            {{ error ? 'Remove' : 'Set' }} Error state
-        </UIButton>
-    </div>
+    <div class="space-y-6">
+        <div class="flex justify-evenly">
+            <UIButton theme="red" @click="error ? error = '' : error = 'Error message.'">
+                {{ error ? 'Remove' : 'Set' }} Error state
+            </UIButton>
+        </div>
+
+        <UIFileUploader :error="error"
+                        :upload="upload"
+                        class="border-brand-400"
+                        @validation-error="logError" />
 
-    <UIFileUploader :error="error"
-                    :upload="upload"
-                    class="border-brand-400"
-                    @validation-error="logError" />
+        <UIFileUploader :error="error"
+                        :upload="upload"
+                        class="border-brand-400"
+                        @validation-error="logError">
+            <template #default="{ uploadIcon }">
+                <p class="text-pink-600" v-html="uploadIcon" />
+                <p class="text-lg">
+                    Drop files here to upload them
+                </p>
+                <UIButton theme="pink" class="mt-2">
+                    Browse
+                </UIButton>
+            </template>
+        </UIFileUploader>
+    </div>
 </template>
 
 <script lang="ts">

src/components/file-uploader/Demo.vue

@@ -23,15 +23,17 @@
 
             <div class="grow flex flex-col items-center justify-center py-24 px-2 text-center cursor-pointer"
                  @click="openFileBrowser">
-                <p class="mb-4 text-brand-600" v-html="uploadIcon" />
-                <p class="text-lg">
-                    Drag and Drop file
-                    <br>
-                    or
-                </p>
-                <UIButton theme="brand" class="mt-2">
-                    Browse
-                </UIButton>
+                <slot :upload-icon="uploadIcon">
+                    <p class="mb-4 text-brand-600" v-html="uploadIcon" />
+                    <p class="text-lg">
+                        Drag and Drop file
+                        <br>
+                        or
+                    </p>
+                    <UIButton theme="brand" class="mt-2">
+                        Browse
+                    </UIButton>
+                </slot>
             </div>
             <div v-show="files.length"
                  class="w-full sm:w-1/2 flex flex-col py-6 px-2

src/components/file-uploader/UIFileUploader.vue

@@ -16,6 +16,7 @@ exports[`UIFileUploader should display correctly 1`] = `
     <div
       class="grow flex flex-col items-center justify-center py-24 px-2 text-center cursor-pointer"
     >
+      
       <p
         class="mb-4 text-brand-600"
       >
@@ -44,6 +45,7 @@ exports[`UIFileUploader should display correctly 1`] = `
          Browse 
         
       </button>
+      
     </div>
     <div
       class="w-full sm:w-1/2 flex flex-col py-6 px-2 justify-between bg-gray-200 dark:bg-gray-600 items-center"

src/components/file-uploader/__snapshots__/UIFileUploader.test.ts.snap

@@ -3,12 +3,13 @@ import { createFileList, getExtension, getSizeString, isImage } from './index';
 describe('utils', () => {
     describe('isImage', () => {
         it('should correctly determine the image based on the extension', () => {
-            expect(isImage(new File([''], 'text.txt'))).toBe(false);
+            expect(isImage(new File([''], 'text.txt', { type: 'text/plain' }))).toBe(false);
 
-            expect(isImage(new File([''], 'img.jpeg'))).toBe(true);
-            expect(isImage(new File([''], 'img.jpg'))).toBe(true);
-            expect(isImage(new File([''], 'img.png'))).toBe(true);
-            expect(isImage(new File([''], 'img.gif'))).toBe(true);
+            expect(isImage(new File([''], 'img.jpeg', { type: 'image/jpeg' }))).toBe(true);
+            expect(isImage(new File([''], 'img.jpg', { type: 'image/jpeg' }))).toBe(true);
+            expect(isImage(new File([''], 'img.png', { type: 'image/png' }))).toBe(true);
+            expect(isImage(new File([''], 'img.gif', { type: 'image/gif' }))).toBe(true);
+            expect(isImage(new File([''], 'img.webp', { type: 'image/webp' }))).toBe(true);
         });
     });
 

src/composables/utils/index.test.ts

@@ -40,7 +40,7 @@ export const createFileList = (files: File | File[]): FileList => {
  * Determine whether the given file is an image.
  */
 export const isImage = (file: File): boolean => {
-    return !!RegExp(/[/.](gif|jp(e)?g|png)$/i).exec(file.name);
+    return file.type.startsWith('image/');
 };
 
 /**