Allow changing the placeholder text of ipl-upload

CHANGELOG.md

@@ -1,6 +1,7 @@
 # 3.3.0
 
-- Add an `errorMessage` prop to ipl-button to allow changing the message that appears when an async action fails 
+- Add an `errorMessage` prop to ipl-button to allow changing the message that appears when an async action fails
+- Allow changing the placeholder text of ipl-upload
 - Fix the `progressMessage` prop of ipl-button doing nothing
 - Fix ipl-checkbox visuals sometimes disappearing with long labels
 

docs/examples/UploadExample.vue

@@ -2,7 +2,10 @@
     <div class="vertical-layout width-capped-content">
         <!-- #region example -->
         <div>Uploaded file: {{ file?.name }}</div>
-        <ipl-upload v-model="file" />
+        <ipl-upload
+            v-model="file"
+            placeholder="Click to upload a file..."
+        />
         <!-- #endregion example -->
     </div>
 </template>

src/components/__tests__/__snapshots__/iplUpload.test.ts.snap

@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`IplUpload shows custom message if no file is uploaded 1`] = `"<label class="ipl-upload"><span>Upload a file!</span><input type="file"></label>"`;
+
 exports[`IplUpload shows file data if a file is uploaded 1`] = `
 "<label class="ipl-upload">
   <font-awesome-icon-stub icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon"></font-awesome-icon-stub><span>mock-file.jpg</span><input type="file">
 </label>"
 `;
 
-exports[`IplUpload shows message if no file is uploaded 1`] = `"<label class="ipl-upload"><span> Drag a file here or<br> click to browse... </span><input type="file"></label>"`;
+exports[`IplUpload shows message if no file is uploaded 1`] = `"<label class="ipl-upload"><span>Drag a file here or click to browse...</span><input type="file"></label>"`;

src/components/__tests__/iplUpload.test.ts

@@ -48,6 +48,12 @@ describe('IplUpload', () => {
         expect(wrapper.html()).toMatchSnapshot();
     });
 
+    it('shows custom message if no file is uploaded', () => {
+        const wrapper = mount(IplUpload, { props: { modelValue: null, placeholder: 'Upload a file!' } });
+
+        expect(wrapper.html()).toMatchSnapshot();
+    });
+
     it('emits update when a file is dropped onto the element', async () => {
         const mockFile = new File([], 'mock-file');
         const wrapper = mount(IplUpload, { props: { modelValue: null } });

src/components/iplUpload.vue

@@ -7,8 +7,7 @@
         @drop="handleDrop"
     >
         <span v-if="!modelValue">
-            Drag a file here or<br>
-            click to browse...
+            {{ placeholder }}
         </span>
         <template v-else>
             <font-awesome-icon
@@ -38,6 +37,10 @@ export default defineComponent({
         modelValue: {
             type: [File, null] as PropType<File | null>,
             required: true
+        },
+        placeholder: {
+            type: String,
+            default: 'Drag a file here or click to browse...',
         }
     },