Parametrize upload mixin as provider component ♻️

Author: MiroDojkic

client/api/asset.js

@@ -5,12 +5,11 @@ const urls = {
 };
 
 function getUrl(folder, key) {
-  const params = { key: `${folder}/${key}` };
+  const params = { key: folder ? `${folder}/${key}` : key };
   return request.get(urls.base, { params }).then(res => res.data.url);
 }
 
-function upload(folder, data) {
-  if (folder) data.append('folder', folder);
+function upload(data) {
   return request.post(urls.base, data).then(res => res.data);
 }
 

client/components/common/FileInput.vue

@@ -1,49 +1,56 @@
 <template>
-  <form @submit.prevent>
-    <v-file-input
-      v-if="!fileKey"
-      :ref="id"
-      @change.native="upload"
-      @click:append="$refs[id].$el.querySelector('input').click()"
-      :accept="acceptedFileTypes"
-      :label="label"
-      :placeholder="placeholder"
-      :outlined="outlined"
-      :dense="dense"
-      :clearable="false"
-      :append-icon="uploading ? 'mdi-loading mdi-spin' : 'mdi-upload'"
-      prepend-icon="" />
-    <div v-else class="mb-5 px-1 grey--text text--darken-3">
-      <div>{{ label }}</div>
-      <v-btn
-        @click="downloadFile(fileKey, fileName)"
-        text
-        class="grey--text text--darken-4 text-none px-0">
-        {{ fileName | truncate(35) }}
-      </v-btn>
-      <v-btn
-        @click="deleteFile({ id, fileName })"
-        color="grey darken-4"
-        icon x-small
-        class="ml-1">
-        <v-icon>mdi-close</v-icon>
-      </v-btn>
-    </div>
-  </form>
+  <upload-provider
+    v-slot="{ uploading, uploadFile, downloadFile, deleteFile }"
+    @upload="$emit('upload', $event)"
+    @uploading="$emit('update:uploading', $event)"
+    @delete="$emit('delete', $event)"
+    :folder="folder">
+    <form @submit.prevent>
+      <v-file-input
+        v-if="!fileKey"
+        :ref="id"
+        @change.native="uploadFile"
+        @click:append="$refs[id].$el.querySelector('input').click()"
+        :accept="acceptedFileTypes"
+        :label="label"
+        :placeholder="placeholder"
+        :outlined="outlined"
+        :dense="dense"
+        :clearable="false"
+        :append-icon="uploading ? 'mdi-loading mdi-spin' : 'mdi-upload'"
+        prepend-icon="" />
+      <div v-else class="mb-5 px-1 grey--text text--darken-3">
+        <div>{{ label }}</div>
+        <v-btn
+          @click="downloadFile(fileKey, fileName)"
+          text
+          class="grey--text text--darken-4 text-none px-0">
+          {{ fileName | truncate(35) }}
+        </v-btn>
+        <v-btn
+          @click="deleteFile({ id, fileName })"
+          color="grey darken-4"
+          icon x-small
+          class="ml-1">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </div>
+    </form>
+  </upload-provider>
 </template>
 
 <script>
 import get from 'lodash/get';
 import uniqueId from 'lodash/uniqueId';
-import uploadMixin from '@/components/common/mixins/upload';
+import UploadProvider from '@/components/common/mixins/UploadProvider';
 
 export default {
   name: 'file-input',
-  mixins: [uploadMixin],
   props: {
     id: { type: String, default: () => uniqueId('file_') },
     fileKey: { type: String, default: '' },
     fileName: { type: String, default: '' },
+    folder: { type: String, default: null },
     validate: { type: Object, default: () => ({ ext: [] }) },
     label: { type: String, default: 'File upload' },
     placeholder: { type: String, default: 'Choose a file' },
@@ -56,10 +63,6 @@ export default {
       return ext.length ? `.${ext.join(',.')}` : '';
     }
   },
-  watch: {
-    uploading(val) {
-      this.$emit('update:uploading', val);
-    }
-  }
+  components: { UploadProvider }
 };
 </script>

client/components/common/InputAsset.vue

@@ -15,6 +15,7 @@
       :uploading.sync="uploading"
       :validate="{ ext: extensions }"
       :confirm-deletion="false"
+      :folder="folder"
       :label="uploadLabel"
       class="upload-btn" />
     <template v-if="file">
@@ -93,6 +94,7 @@ function isUploaded(url) {
 export default {
   name: 'input-asset',
   props: {
+    folder: { type: String, default: null },
     url: { type: String, default: null },
     publicUrl: { type: String, default: null },
     extensions: { type: Array, required: true },

client/components/common/mixins/upload.js renamed to client/components/common/mixins/UploadProvider.vue

@@ -1,25 +1,33 @@
+<template>
+  <div>
+    <slot v-bind="{ uploading, uploadFile, downloadFile, deleteFile }"></slot>
+  </div>
+</template>
+
+<script>
 import downloadMixin from 'utils/downloadMixin';
 import loader from '@/components/common/loader';
-import { mapGetters } from 'vuex';
 import { mapRequests } from '@/plugins/radio';
 
 export default {
   inject: ['$storageService'],
   mixins: [downloadMixin],
+  props: {
+    folder: { type: String, default: null }
+  },
   data: () => ({ uploading: false }),
-  computed: mapGetters('repository', { repositoryId: 'id' }),
   methods: {
     ...mapRequests('app', ['showConfirmationModal']),
     createFileForm(e) {
       this.form = new FormData();
       const [file] = e.target.files;
       if (!file) return;
       this.form.append('file', file, file.name);
+      if (this.folder) this.form.append('folder', this.folder);
     },
-    upload: loader(function (e) {
+    uploadFile: loader(function (e) {
       this.createFileForm(e);
-      const folder = `repository/${this.repositoryId}`;
-      return this.$storageService.upload(folder, this.form)
+      return this.$storageService.upload(this.form)
         .then(data => {
           const { name } = this.form.get('file');
           this.$emit('upload', { ...data, name });
@@ -38,5 +46,11 @@ export default {
         action: () => this.$emit('delete', item.id, null)
       });
     }
+  },
+  watch: {
+    uploading(val) {
+      this.$emit('uploading', val);
+    }
   }
 };
+</script>;

client/components/common/tce-core/UploadBtn.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="file-upload">
+  <upload-provider
+    v-slot="{ uploading, downloadFile, deleteFile }"
+    ref="provider"
+    @upload="$emit('upload', $event)"
+    @uploading="$emit('update:uploading', $event)"
+    @delete="$emit('delete', $event)"
+    :folder="folder"
+    class="file-upload">
     <form @submit.prevent class="upload-form">
       <validation-provider ref="validator" :rules="validate">
         <input
@@ -32,35 +39,31 @@
         <v-icon>mdi-delete</v-icon>
       </v-btn>
     </form>
-  </div>
+  </upload-provider>
 </template>
 
 <script>
 import uniqueId from 'lodash/uniqueId';
-import uploadMixin from '@/components/common/mixins/upload';
+import UploadProvider from '@/components/common/mixins/UploadProvider';
 
 export default {
   name: 'upload-btn',
-  mixins: [uploadMixin],
   props: {
     id: { type: String, default: () => uniqueId('file_') },
     fileName: { type: String, default: '' },
     fileKey: { type: String, default: '' },
+    folder: { type: String, default: null },
     validate: { type: Object, default: () => ({ ext: [] }) },
     label: { type: String, default: 'Choose a file' },
     sm: { type: Boolean, default: false }
   },
   methods: {
     async validateAndUpload(e) {
       const { valid } = await this.$refs.validator.validate(e);
-      if (valid) this.upload(e);
+      if (valid) this.$refs.provider.uploadFile(e);
     }
   },
-  watch: {
-    uploading(val) {
-      this.$emit('update:uploading', val);
-    }
-  }
+  components: { UploadProvider }
 };
 </script>
 

client/components/content-elements/tce-audio/edit/Toolbar.vue

@@ -6,6 +6,7 @@
     <v-toolbar-title class="pl-1">Audio Component</v-toolbar-title>
     <input-asset
       @input="save"
+      :folder="`repository/${element.repositoryId}`"
       :url="url"
       :public-url="publicUrl"
       :extensions="[

client/components/content-elements/tce-image/edit/Toolbar.vue

@@ -7,6 +7,7 @@
     <v-toolbar-items class="mx-auto">
       <upload-btn
         @change="upload"
+        :folder="`repository/${element.repositoryId}`"
         :label="isUploaded ? 'Upload a new image' : 'Upload image'" />
       <template v-if="isUploaded">
         <v-btn @click="toggleTool('cropper')" text>

client/components/content-elements/tce-pdf/edit/Toolbar.vue

@@ -6,6 +6,7 @@
     <v-toolbar-title>PDF Component</v-toolbar-title>
     <input-asset
       @input="save"
+      :folder="`repository/${element.repositoryId}`"
       :url="url"
       :public-url="publicUrl"
       :extensions="['.pdf']"

client/components/content-elements/tce-video/edit/Toolbar.vue

@@ -6,6 +6,7 @@
     <v-toolbar-title class="pl-1">Video component</v-toolbar-title>
     <input-asset
       @input="save"
+      :folder="`repository/${element.repositoryId}`"
       :url="url"
       :public-url="publicUrl"
       :extensions="['.mp4']"