File Uploader (#80)

* file-select

* $file

* file-upload

* progress

* file-drop

* drag-drop zone vector

* filesize dependency

* spec to jest

* file extension to method

* Add error message under the progress bar

* visual hint after file is completed

* remove setTimeout

* translation filesize

* file-upload spec

* extract file mocking utils

* Style modifications

* update shapshot

* meta: support optional prop

* line break

* extra typing

* extension - convert to getter

* Typing getters

* update package-lock (to resolve conflict)

Author: jfnadeau

package-lock.json

@@ -61,6 +61,7 @@
         "css-loader": "^0.28.7",
         "enquire.js": "^2.1.6",
         "file-loader": "^1.1.5",
+        "filesize": "^3.6.0",
         "moment": "^2.19.3",
         "node-sass": "^4.7.2",
         "popper.js": "^1.12.9",
@@ -76,9 +77,11 @@
     },
     "devDependencies": {
         "@types/es6-promise": "^0.0.33",
+        "@types/filesize": "^3.6.0",
         "@types/jest": "^22.1.1",
         "@types/node": "^8.0.54",
         "@vue/test-utils": "^1.0.0-beta.11",
+        "ajv": "^6.1.1",
         "awesome-typescript-loader": "^3.4.1",
         "axios": "^0.17.1",
         "bundle-loader": "^0.5.5",
@@ -90,6 +93,7 @@
         "enquire.js": "^2.1.6",
         "es6-promise": "^4.1.1",
         "file-loader": "^1.1.5",
+        "filesize": "^3.6.0",
         "html-webpack-plugin": "^2.30.1",
         "jest": "^22.1.4",
         "jest-junit": "^3.6.0",

package.json

@@ -13,6 +13,8 @@ export const DROPDOWN_NAME: string = 'm-dropdown';
 export const DROPDOWN_ITEM_NAME: string = 'm-dropdown-item';
 export const DROPDOWN_GROUP_NAME: string = 'm-dropdown-group';
 export const DYNAMIC_TEMPLATE_NAME: string = 'm-dynamic-template';
+export const FILE_SELECT_NAME: string = 'm-file-select';
+export const FILE_UPLOAD_NAME: string = 'm-file-upload';
 export const EDIT_WINDOW_NAME: string = 'm-edit-window';
 export const FLEX_TEMPLATE_NAME: string = 'm-flex-template';
 export const I18N_NAME: string = 'm-i18n';
@@ -31,6 +33,7 @@ export const PANEL_NAME: string = 'm-panel';
 export const PHONE_NUMBER_NAME: string = 'm-phone-number';
 export const POPPER_NAME: string = 'm-popper';
 export const POPUP_NAME: string = 'm-popup';
+export const PROGRESS_NAME: string = 'm-progress';
 export const RADIO_NAME: string = 'm-radio';
 export const RADIO_GROUP_NAME: string = 'm-radio-group';
 export const RADIO_STYLE_NAME: string = 'm-radio-style';

src/assets/icons/sprites-default.svg

@@ -1,11 +1,12 @@
-import { ModulVue } from '../../utils/vue/vue';
 import { PluginObject } from 'vue';
 import Component from 'vue-class-component';
-import WithRender from './dialog.html?style=./dialog.scss';
 import { Prop } from 'vue-property-decorator';
-import { DIALOG_NAME } from '../component-names';
-import { Portal, PortalMixin, PortalMixinImpl, BackdropMode, PortalTransitionDuration } from '../../mixins/portal/portal';
+
 import { MediaQueriesMixin } from '../../mixins/media-queries/media-queries';
+import { BackdropMode, Portal, PortalMixin, PortalMixinImpl, PortalTransitionDuration } from '../../mixins/portal/portal';
+import { ModulVue } from '../../utils/vue/vue';
+import { DIALOG_NAME } from '../component-names';
+import WithRender from './dialog.html?style=./dialog.scss';
 
 export enum MDialogSize {
     FullScreen = 'full-screen',
@@ -45,6 +46,10 @@ export class MDialog extends ModulVue implements PortalMixinImpl {
     @Prop({ default: true })
     public paddingFooter: boolean;
 
+    public closeDialog(): void {
+        this.as<PortalMixin>().tryClose();
+    }
+
     public handlesFocus(): boolean {
         return true;
     }
@@ -102,10 +107,6 @@ export class MDialog extends ModulVue implements PortalMixinImpl {
             this.as<PortalMixin>().tryClose();
         }
     }
-
-    private closeDialog(): void {
-        this.as<PortalMixin>().tryClose();
-    }
 }
 
 const DialogPlugin: PluginObject<any> = {

src/components/component-names.ts

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`file-select should render correctly 1`] = `
+<div class="m-file-select">
+    <input type="file" id="mFileSelect-uuid" tabindex="-1" class="m-file-select__hidden">
+    <label for="mFileSelect-uuid" class="m-file-select__hidden"><span class="m-i18n">Browse</span></label>
+    <button type="button" aria-hidden="true" class="m-button m--is-skin-secondary"> <span class="m-button__text"><span class="m-i18n">Browse</span> </span>
+    </button>
+</div>
+`;

src/components/dialog/dialog.ts

@@ -0,0 +1,24 @@
+<div class="m-file-select">
+    <input ref="inputFile" type="file" :id="id" class="m-file-select__hidden" @change="processFile" :disabled="disabled || isWaiting" tabindex="-1" :multiple="multiple">
+    <label :for="id" class="m-file-select__hidden">
+            <m-i18n v-if="!hasLabel" k="m-select-file:label"></m-i18n>
+            <template v-else>{{ label }}</template>
+    </label>
+    <m-button @click="onClick" @focus="onFocus" @blur="onBlur" aria-hidden="true"
+            :skin="skin"
+            :disabled="disabled"
+            :waiting="waiting"
+            :fullSize="fullSize"
+            :iconName="iconName"
+            :iconPosition="iconPosition"
+            :iconSize="iconSize">
+        <m-i18n v-if="!hasLabel" k="m-select-file:label"></m-i18n>
+        <template v-else>{{ label }}</template>
+    </m-button>
+    <m-validation-message ref="validation"
+        :disabled="isDisabled"
+        :error="hasError"
+        :error-message="errorMessage"
+        :valid-message="validMessage"
+        :helper-message="helperMessage"></m-validation-message>
+</div>

src/components/file-select/__snapshots__/file-select.spec.ts.snap

@@ -0,0 +1,5 @@
+{
+    "m-select-file": {
+        "label": "Browse"
+    }
+}

src/components/file-select/file-select.html

@@ -0,0 +1,5 @@
+{
+    "m-select-file": {
+        "label": "Parcourir"
+    }
+}

src/components/file-select/file-select.lang.en.json

@@ -0,0 +1,7 @@
+@import 'abstracts/variables';
+
+.m-file-select {
+    &__hidden {
+        @include m-visually-hidden;
+    }
+}