Added FileUploader component.

package.json

@@ -17,11 +17,16 @@
   },
   "dependencies": {
     "@bcgov/bootstrap-theme": "github:bcgov/bootstrap-theme",
+    "blueimp-load-image": "^5.14.0",
     "bootstrap": "^4.5.3",
     "core-js": "^3.6.5",
     "history": "^5.0.0",
     "jquery": "^3.5.1",
     "mdi-vue": "^1.8.1",
+    "pdfjs-dist": "^2.5.207",
+    "rxjs": "^6.6.3",
+    "sha1": "^1.1.1",
+    "uuid": "^8.3.1",
     "vue": "^2.6.11"
   },
   "devDependencies": {
@@ -44,13 +49,17 @@
     "eslint": "^7.11.0",
     "jest": "^26.6.1",
     "eslint-plugin-vue": "^7.1.0",
+    "jest-canvas-mock": "^2.3.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-sonar-reporter": "^2.0.0",
     "react-is": "^16.13.1",
     "vue-jest": "^3.0.6",
     "vue-template-compiler": "^2.6.11"
   },
   "jest": {
+    "setupFiles": [
+      "jest-canvas-mock"
+    ],
     "transformIgnorePatterns": [
       "<rootDir>/node_modules/(?!mdi-vue)"
     ],

src/components/file-uploader/FileUploader.css

@@ -0,0 +1,90 @@
+.dropzone {
+  border: 2px dashed lightgrey;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  padding: 2em 4em;
+}
+
+.preview-zone {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  align-items: left;
+}
+.preview-zone .preview-item {
+  position: relative;
+  height: 120px;
+  text-align: left;
+  margin-left: 1rem;
+  margin-bottom: 1.5rem;
+}
+.preview-zone .preview-item .icon-upload {
+  opacity: 0.3;
+  margin: 0 auto 15px auto;
+}
+.preview-zone .preview-item .icon-upload:hover {
+  cursor: pointer;
+  opacity: 0.6;
+}
+.preview-zone .preview-item .text-upload:hover {
+  cursor: pointer;
+}
+
+.thumbnail-container, .common-thumbnail .thumbnail-container {
+  transition: 0.3s;
+  transform: translateY(0);
+}
+.thumbnail-container .image-thumbnail, .thumbnail-container .image-thumbnail-width-priority, .common-thumbnail .thumbnail-container .image-thumbnail, .common-thumbnail .thumbnail-container .image-thumbnail-width-priority {
+  padding: 2px 2px 0 2px;
+  border-radius: 5px;
+}
+.thumbnail-container .image-thumbnail:hover, .thumbnail-container .image-thumbnail-width-priority:hover, .common-thumbnail .thumbnail-container .image-thumbnail:hover, .common-thumbnail .thumbnail-container .image-thumbnail-width-priority:hover {
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+}
+.thumbnail-container .demo-thumbnail, .common-thumbnail .thumbnail-container .demo-thumbnail {
+  height: 100px !important;
+  width: 100px;
+  background-color: #CCC;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.thumbnail-container .demo-thumbnail:hover, .common-thumbnail .thumbnail-container .demo-thumbnail:hover {
+  cursor: pointer !important;
+}
+.thumbnail-container .image-thumbnail, .common-thumbnail .thumbnail-container .image-thumbnail {
+  max-height: 100px;
+  height: auto;
+  max-width: 100%;
+}
+.thumbnail-container .image-thumbnail-width-priority, .common-thumbnail .thumbnail-container .image-thumbnail-width-priority {
+  max-width: 270px;
+  width: auto;
+  max-height: 100%;
+}
+.thumbnail-container:hover, .common-thumbnail .thumbnail-container:hover {
+  box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.1);
+  transform: translateY(-5px);
+}
+.thumbnail-container:hover .action-strip, .common-thumbnail .thumbnail-container:hover .action-strip {
+  border: solid #CCC thin;
+}
+.thumbnail-container .action-strip, .common-thumbnail .thumbnail-container .action-strip {
+  height: 2em;
+  border-radius: 0px 0px 5px 5px;
+  text-align: right;
+  margin: 0 2px 0 2px;
+  color: red;
+  padding: 0.3em;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.thumbnail-container .action-strip a, .common-thumbnail .thumbnail-container .action-strip a {
+  text-decoration: none;
+}
+
+.svg-icon {
+    width: 60px;
+    height: 60px;
+}

src/components/file-uploader/FileUploader.stories.js

@@ -0,0 +1,14 @@
+import FileUploader from "./FileUploader.vue";
+
+export default {
+  title: 'FileUploader',
+  component: FileUploader,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { FileUploader },
+  template: '<FileUploader v-bind="$props"></FileUploader>',
+});
+
+export const Example = Template.bind({});

src/components/file-uploader/FileUploader.stories.mdx

@@ -0,0 +1,41 @@
+import { Meta, Story } from "@storybook/addon-docs/blocks";
+import FileUploader from "./FileUploader.vue";
+
+<Meta title="FileUploader" component={FileUploader} />
+
+# FileUploader
+
+Component which stores blob image data from user selected images and/or PDFs.
+
+## When to Use
+
+Use for getting the blob data of user selected images or PDFs. 
+
+## When not to Use
+
+Don't use as file uploader for non-images or non-PDF.
+
+## API
+
+Note: Requires the following packages:
+```bash
+blueimp-load-image
+pdfjs-dist
+rxjs
+sha1
+uuid
+```
+
+| Prop            | Type          | Required | Description                                                         | Default                       |
+| --------------- | ------------- | -------- | ------------------------------------------------------------------- | ----------------------------- |
+| v-model         | Array         | true     | Stores the collection of images selected by the user.               |                               |
+| instructionText | String        | false    | Subtitle text to display in the component.                          | Please upload your documents. |
+| id              | String        | false    | Attribute to uniquely identify the component.                       | Empty string.                 |
+
+<br />
+
+## Example Usage
+
+```html
+<FileUploader v-model="files" />
+```