Extend base storage, resolve deps with IoC container ♻️

Author: MiroDojkic

client/api/asset.js

@@ -1,19 +1,33 @@
 import request from './request';
 
 const urls = {
-  base: 'assets'
+  base: 'assets',
+  repository: repositoryId => `repositories/${repositoryId}/assets`
 };
 
-function getUrl(folder, key) {
-  const params = { key: folder ? `${folder}/${key}` : key };
+function getUrl(key) {
+  const params = { key };
   return request.get(urls.base, { params }).then(res => res.data.url);
 }
 
 function upload(data) {
   return request.post(urls.base, data).then(res => res.data);
 }
 
+function getRepositoryAssetUrl(repositoryId, key) {
+  const params = { key };
+  return request.get(urls.repository(repositoryId), { params })
+    .then(res => res.data.url);
+}
+
+function uploadRepositoryAsset(repositoryId, data) {
+  return request.post(urls.repository(repositoryId), data)
+    .then(res => res.data);
+}
+
 export default {
   getUrl,
-  upload
+  upload,
+  getRepositoryAssetUrl,
+  uploadRepositoryAsset
 };

client/components/common/FileInput.vue

@@ -4,7 +4,7 @@
     @upload="$emit('upload', $event)"
     @uploading="$emit('update:uploading', $event)"
     @delete="$emit('delete', $event)"
-    :folder="folder">
+    :repository-id="repositoryId">
     <form @submit.prevent>
       <v-file-input
         v-if="!fileKey"
@@ -50,7 +50,7 @@ export default {
     id: { type: String, default: () => uniqueId('file_') },
     fileKey: { type: String, default: '' },
     fileName: { type: String, default: '' },
-    folder: { type: String, default: null },
+    repositoryId: { type: Number, default: null },
     validate: { type: Object, default: () => ({ ext: [] }) },
     label: { type: String, default: 'File upload' },
     placeholder: { type: String, default: 'Choose a file' },

client/components/common/InputAsset.vue

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

client/components/common/UploadProvider.vue

@@ -13,7 +13,7 @@ export default {
   inject: ['$storageService'],
   mixins: [downloadMixin],
   props: {
-    folder: { type: String, default: null }
+    repositoryId: { type: Number, default: null }
   },
   data: () => ({ uploading: false }),
   methods: {
@@ -23,11 +23,14 @@ export default {
       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(data) {
+      if (!this.repositoryId) return this.storageService.upload(data);
+      return this.$storageService.uploadRepositoryAsset(this.repositoryId, data);
     },
     uploadFile: loader(function (e) {
       this.createFileForm(e);
-      return this.$storageService.upload(this.form)
+      return this.upload(this.form)
         .then(data => {
           const { name } = this.form.get('file');
           this.$emit('upload', { ...data, name });
@@ -36,7 +39,9 @@ export default {
         });
     }, 'uploading'),
     async downloadFile(key, name) {
-      const url = await this.$storageService.getUrl(this.repositoryId, key);
+      const url = this.repositoryId
+        ? await this.$storageService.getRepositoryAssetUrl(this.repositoryId, key)
+        : await this.$storageService.getUrl(key);
       return this.download(url, name);
     },
     deleteFile(item) {

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

@@ -5,7 +5,7 @@
     @upload="$emit('upload', $event)"
     @uploading="$emit('update:uploading', $event)"
     @delete="$emit('delete', $event)"
-    :folder="folder"
+    :repository-id="repositoryId"
     class="file-upload">
     <form @submit.prevent class="upload-form">
       <validation-provider ref="validator" :rules="validate">
@@ -52,7 +52,7 @@ export default {
     id: { type: String, default: () => uniqueId('file_') },
     fileName: { type: String, default: '' },
     fileKey: { type: String, default: '' },
-    folder: { type: String, default: null },
+    repositoryId: { type: Number, default: null },
     validate: { type: Object, default: () => ({ ext: [] }) },
     label: { type: String, default: 'Choose a file' },
     sm: { type: Boolean, default: false }

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

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

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

@@ -7,7 +7,6 @@
     <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-image/server/index.js

@@ -8,7 +8,7 @@ const mime = require('mime-types');
 
 const DEFAULT_IMAGE_EXTENSION = 'png';
 
-function processImage(asset, { storage }) {
+function processImage(asset, { getRepositoryStorage }) {
   const image = asset.data.url;
   const base64Pattern = /^data:image\/(\w+);base64,/;
 
@@ -22,21 +22,24 @@ function processImage(asset, { storage }) {
     return Promise.resolve(asset);
   }
 
+  const storage = getRepositoryStorage(asset.repositoryId);
   const file = Buffer.from(image.replace(base64Pattern, ''), 'base64');
   const extension = image.match(base64Pattern)[1] || DEFAULT_IMAGE_EXTENSION;
   const hashString = `${asset.id}${file}`;
   const hash = crypto.createHash('md5').update(hashString).digest('hex');
-  const storagePath = storage.getPath(asset.repositoryId);
-  const key = `${storagePath}/${asset.id}/${hash}.${extension}`;
+  const key = `${asset.id}/${hash}.${extension}`;
   asset.data.url = key;
   return saveFile(key, file, storage).then(() => asset);
 }
 
-function resolveImage(asset, { storage, storageProxy }) {
+function resolveImage(asset, { getRepositoryStorage, storageProxy }) {
   if (!asset.data || !asset.data.url) return Promise.resolve(asset);
 
+  const storage = getRepositoryStorage(asset.repositoryId);
+
   function getUrl(key) {
-    asset.data.url = storageProxy.getFileUrl(key);
+    const fullKey = storage.getFullKey(key);
+    asset.data.url = storageProxy.getFileUrl(fullKey);
     return asset;
   }
 

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

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

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

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