feat(component): add upload funcionality

Author: Walker Leite

README.md

@@ -57,11 +57,11 @@ function getFileName(file) {
   return file.name + Math.floor(Math.random() * 1000)
 }
 
-function onUpload(fullPath, doUpload) {
+function onUpload({fullPath, doUpload}) {
   doUpload();
 }
 
-function onDelete(fullPath, doDelete) {
+function onDelete({fullPath, doDelete}) {
   doDelete();
 }
 ```

docs/Example with Firebase.md

@@ -12,33 +12,41 @@ const config = {
   messagingSenderId: "526916383818"
 }
 
+const app = firebase.initializeApp(config)
+window.unload = app.delete
+
 function getFileName(file) {
-  return file.name + Math.floor(Math.random() * 1000)
+  return Math.floor(Math.random() * 1000) + file.name
 }
 
 function getStorage() {
-  return firebase.initializeApp(config).storage()
+  return app.storage()
 }
 
-function onUpload(fullPath, doUpload) {
+function onUpload({fullPath, doUpload}) {
   doUpload();
 }
 
-function onDelete(fullPath, doDelete) {
+function onDelete({fullPath, doDelete}) {
   doDelete();
 }
 
-function onClick(fullPath, downloadUrl) {
+function onClick({fullPath, downloadUrl}) {
   window.open(downloadUrl)
 }
 
+function onError(err) {
+  console.error(err)
+}
+
 <ic-firebase-uploader
   path="images"
   max-files="3"
   :getFileName="getFileName"
   :storage="getStorage()"
   @upload="onUpload"
   @delete="onDelete"
-  @click="onClick">
+  @click="onClick"
+  @error="onError">
 </ic-firebase-uploader>
 ```

src/ic-firebase-uploader/ic-firebase-uploader.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="ic-fb_uploader">
     <ul class="ic-fb_uploader-files">
-      <li>Lorem Ipsum1.jpg</li>
-      <li>Lorem Ipsum2.jpg</li>
-      <li>Lorem Ipsum3.jpg</li>
+      <li v-for="fileRef in sentFiles" :key="fileRef.fullPath">
+        {{fileRef.name}}
+      </li>
     </ul>
-
-    <button class="ic-fb_uploader-btn">
+    <input
+      type="file"
+      class="ic-fb_uploader-loader"
+      ref="loader"
+      multiple
+      @change="onChangeLoader">
+    <button class="ic-fb_uploader-btn" @click="onBtnClick">
       UPLOAD
     </button>
   </div>
@@ -16,27 +21,79 @@
 export default {
   name: 'ic-firebase-uploader',
   props: {
+    /**
+     * Maximum files
+     */
     maxFiles: {
       type: [Number, String],
       required: true,
     },
+    /**
+     * Path to save files on firebase
+     */
     path: {
       type: String,
       required: true,
     },
+    /**
+     * This function is called for each user submitted file
+     * with the associated File object, the return must be a string
+     * containing the file name to be saved remotely
+     */
     getFileName: {
       type: Function,
       required: true,
     },
+    /**
+     * Firebase storage object
+     * {@link https://firebase.google.com/docs/reference/js/firebase.storage | firebase.storage}
+     */
     storage: {
       type: Object,
       required: true,
     }
+  },
+  data: () => ({
+    sentFiles: [],
+  }),
+  methods: {
+    onBtnClick() {
+      this.$refs.loader.click()
+    },
+    onChangeLoader(event) {
+      const files = event.target.files
+      const curFilesLength = this.sentFiles.length + files.length
+      if (curFilesLength > Number(this.maxFiles)) {
+        this.$emit('error', new Error('maximum files reached'))
+      }
+      const cFiles = Array.prototype.slice.call(files, 0, 3)
+      cFiles.forEach(this.uploadFile)
+    },
+    uploadFile(file, index, files) {
+      const fileName = this.getFileName(file)
+      const rootRef = this.storage.ref()
+      const fileRef = rootRef.child(this.path + '/' + fileName)
+      this.$emit('upload', {
+        fullPath: fileRef.fullPath,
+        remainingFiles: files.length - index,
+        file,
+        doUpload: this.getUploadFn(fileRef, file)
+      })
+    },
+    getUploadFn(fileRef, file) {
+      return () => {
+        fileRef.put(file)
+          .then(() => this.sentFiles.push(fileRef))
+          .catch(err => this.$emit('error', err))
+      }
+    }
   }
 }
 </script>
 
 <style lang="css" scoped>
-
+.ic-fb_uploader .ic-fb_uploader-loader {
+  display: none;
+}
 </style>