upload video and audio

package.json

@@ -66,10 +66,10 @@
     "vue-advanced-cropper": "^2.8.8",
     "vue-dragscroll": "^4.0.5",
     "vue-router": "^4.1.6",
-    "vue-tiptap-katex-core": "^2.1.2",
+    "vue-tiptap-katex-core": "^2.1.4",
     "vue3-carousel": "^0.3.1",
     "vue3-otp-input": "^0.4.1",
-    "vue3-tiptap-katex": "^1.1.20",
+    "vue3-tiptap-katex": "^1.1.25",
     "vuex": "^4.1.0",
     "vuex-persistedstate": "^4.1.0",
     "workbox-build": "^7.0.0",

src/components/PostItem.vue

@@ -1,24 +1,26 @@
 <template>
-  <q-card flat
-          class="PostItem col-md-4 col-sm-6 col-12">
-    <div class="thumbnail">
-      <router-link :to="{name: 'Public.Post.Show', params: {id: post.id}}">
-        <q-img :src="post.thumbnail" />
-      </router-link>
-    </div>
-    <div class="title">
-      <router-link :to="{name: 'Public.Post.Show', params: {id: post.id}}">
-        {{post.title}}
-      </router-link>
-    </div>
-    <q-card-actions class="action-section">
-      <q-btn color="primary"
-             class="btn-show-post"
-             :to="{name: 'Public.Post.Show', params: {id: post.id}}">
-        مشاهده جزئیات
-      </q-btn>
-    </q-card-actions>
-  </q-card>
+  <div class="col-md-4 col-sm-6 col-12">
+    <q-card flat
+            class="PostItem">
+      <div class="thumbnail">
+        <router-link :to="{name: 'Public.Post.Show', params: {id: post.id}}">
+          <q-img :src="post.thumbnail" />
+        </router-link>
+      </div>
+      <div class="title">
+        <router-link :to="{name: 'Public.Post.Show', params: {id: post.id}}">
+          {{post.title}}
+        </router-link>
+      </div>
+      <q-card-actions class="action-section">
+        <q-btn color="primary"
+               class="btn-show-post"
+               :to="{name: 'Public.Post.Show', params: {id: post.id}}">
+          مشاهده جزئیات
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </div>
 </template>
 
 <script>
@@ -41,6 +43,7 @@ export default defineComponent({
   background-color: #f6f6f6;
   border-radius: 54px 0 54px 54px;
   padding: 20px 20px 30px;
+  margin: 8px;
   .thumbnail {
     margin-bottom: 43px;
     .q-img {

src/components/Widgets/Post/AdminPostCreate/AdminPostCreate.vue

@@ -31,8 +31,10 @@ import { EntityCreate } from 'quasar-crud'
 import { mixinWidget } from 'src/mixin/Mixins.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import BtnControl from 'src/components/Control/btn.vue'
+import PostMixin from 'src/components/Widgets/Post/PostMixin.js'
 import PostCategorySelector from 'src/components/FormBuilderCustumComponents/PostCategorySelector.vue'
 import FormBuilderTiptapEditor from 'src/components/FormBuilderCustumComponents/FormBuilderTiptapEditor.vue'
+// import { FormBuilderAssist } from 'quasar-form-builder'
 
 const BtnControlComp = shallowRef(BtnControl)
 const PostCategorySelectorComp = shallowRef(PostCategorySelector)
@@ -41,9 +43,11 @@ const FormBuilderTiptapEditorComp = shallowRef(FormBuilderTiptapEditor)
 export default {
   name: 'AdminPostCreate',
   components: { EntityCreate },
-  mixins: [mixinWidget],
+  mixins: [mixinWidget, PostMixin],
   data () {
     const authorization = 'Bearer ' + this.$store.getters['Auth/accessToken']
+    const uploadVideo = this.uploadVideo
+    const uploadAudio = this.uploadAudio
     return {
       mounted: false,
       entityLoading: false,
@@ -74,7 +78,9 @@ export default {
               instantUpload: true,
               responseKey: 'file',
               headers: { Authorization: authorization }
-            }
+            },
+            uploadVideo,
+            uploadAudio
           },
           col: 'col-md-12 col-12'
         },
@@ -96,7 +102,9 @@ export default {
               instantUpload: true,
               responseKey: 'file',
               headers: { Authorization: authorization }
-            }
+            },
+            uploadVideo,
+            uploadAudio
           },
           col: 'col-md-12 col-12'
         },
@@ -104,8 +112,11 @@ export default {
       ]
     }
   },
-  mounted() {
+  mounted () {
     this.setActionBtn()
+    // const options = FormBuilderAssist.getInputsByName(this.inputs, 'text').options
+    // options.uploadVideo = this.uploadVideo
+    // FormBuilderAssist.setAttributeByName(this.inputs, 'text', 'options', options)
     this.mounted = true
   },
   methods: {

src/components/Widgets/Post/AdminPostShow/AdminPostShow.vue

@@ -33,6 +33,7 @@ import { EntityEdit } from 'quasar-crud'
 import { mixinWidget } from 'src/mixin/Mixins.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import BtnControl from 'src/components/Control/btn.vue'
+import PostMixin from 'src/components/Widgets/Post/PostMixin.js'
 import PostCategorySelector from 'src/components/FormBuilderCustumComponents/PostCategorySelector.vue'
 import FormBuilderTiptapEditor from 'src/components/FormBuilderCustumComponents/FormBuilderTiptapEditor.vue'
 
@@ -45,10 +46,12 @@ export default {
   components: {
     EntityEdit
   },
-  mixins: [mixinWidget],
+  mixins: [mixinWidget, PostMixin],
   data () {
     const postId = this.$route.params.id
     const authorization = 'Bearer ' + this.$store.getters['Auth/accessToken']
+    const uploadVideo = this.uploadVideo
+    const uploadAudio = this.uploadAudio
     return {
       mounted: false,
       entityLoading: true,
@@ -80,7 +83,9 @@ export default {
               instantUpload: true,
               responseKey: 'file',
               headers: { Authorization: authorization }
-            }
+            },
+            uploadVideo,
+            uploadAudio
           },
           col: 'col-md-12 col-12'
         },
@@ -102,7 +107,9 @@ export default {
               instantUpload: true,
               responseKey: 'file',
               headers: { Authorization: authorization }
-            }
+            },
+            uploadVideo,
+            uploadAudio
           },
           col: 'col-md-12 col-12'
         },

src/components/Widgets/Post/PostMixin.js

@@ -0,0 +1,50 @@
+import { APIGateway } from 'src/api/APIGateway.js'
+
+const mixinAuth = {
+  methods: {
+    uploadAudio (files, updateUploadingProgressBar, onFileUpload, onError) {
+      const formData = new FormData()
+      formData.append('file', files[0])
+      formData.append('type', 'SOUND')
+      this.$axios.post(APIGateway.media.APIAdresses.base, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        },
+        onUploadProgress: progressEvent => {
+          const { loaded, total } = progressEvent
+          const percentage = Math.floor((loaded * 100) / total)
+          updateUploadingProgressBar(percentage + '%')
+        }
+      })
+        .then((response) => {
+          onFileUpload(response.data.file)
+        })
+        .catch(() => {
+          onError()
+        })
+    },
+    uploadVideo (files, updateUploadingProgressBar, onFileUpload, onError) {
+      const formData = new FormData()
+      formData.append('file', files[0])
+      formData.append('type', 'VIDEO')
+      this.$axios.post(APIGateway.media.APIAdresses.base, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        },
+        onUploadProgress: progressEvent => {
+          const { loaded, total } = progressEvent
+          const percentage = Math.floor((loaded * 100) / total)
+          updateUploadingProgressBar(percentage + '%')
+        }
+      })
+        .then((response) => {
+          onFileUpload(response.data.file)
+        })
+        .catch(() => {
+          onError()
+        })
+    }
+  }
+}
+
+export default mixinAuth

yarn.lock

@@ -7465,10 +7465,10 @@ vue-router@^4.1.0, vue-router@^4.1.6:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
-vue-tiptap-katex-core@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/vue-tiptap-katex-core/-/vue-tiptap-katex-core-2.1.2.tgz#ea994c8d15119de3cf6aa10dd3f45de4fa5deb26"
-  integrity sha512-JTZsColfjXCXbwO/7lkUsphUXECCeHWr6vul85uWcIFCojz/8AAB5AZiVzRDcWfH49cKCYmGsSQQdkLNoYqr6A==
+vue-tiptap-katex-core@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/vue-tiptap-katex-core/-/vue-tiptap-katex-core-2.1.4.tgz#47e8f4b7233b6f1bafbd403401805cb0ebc35131"
+  integrity sha512-m3wpL5rSOdo3nNRqQYfmM5u1GATplQkRROKfrx3U0c99WYU5Fr4hYl5mBL66fndbtE1SiwoNnjFLNgJrJ7G9MQ==
   dependencies:
     "@mdi/font" "^6.9.96"
     "@tiptap/core" "^2.0.0-beta.209"
@@ -7507,10 +7507,10 @@ vue3-otp-input@^0.4.1:
   resolved "https://registry.yarnpkg.com/vue3-otp-input/-/vue3-otp-input-0.4.1.tgz#4757cc771bb0c723e34b78857424322079d07fae"
   integrity sha512-wVl9i3DcWlO0C7fBI9V+RIP3crm/1tY72fuhvb3YM2JfbLoYofB96aPl5AgFhA0Cse5bQEMYtIvOeiqW3rfbAw==
 
-vue3-tiptap-katex@^1.1.20:
-  version "1.1.20"
-  resolved "https://registry.yarnpkg.com/vue3-tiptap-katex/-/vue3-tiptap-katex-1.1.20.tgz#3f53a63921a2d683cda442a7601847aed8bd6080"
-  integrity sha512-uCnKy/5lblzkpFw15cQqneIwMFcdPK8OuWKc5zuJCEtnkCkrQXKHal4kO3dDZkOGE3QrDmcCO+kitbP5/t6KGA==
+vue3-tiptap-katex@^1.1.25:
+  version "1.1.25"
+  resolved "https://registry.yarnpkg.com/vue3-tiptap-katex/-/vue3-tiptap-katex-1.1.25.tgz#63a676e0a1a2fbc88861a3195906f17151ad3be5"
+  integrity sha512-myTg0jtvG/tjl0wY4kmmuFVzrl44P0BIZmcRSDNENbYZSNS1HAIkLakD72J4VcaSz1TsAeWjJFHebQY1CrXSyQ==
   dependencies:
     "@ckpack/vue-color" "^1.4.1"
     "@mdi/font" "^6.9.96"
@@ -7539,7 +7539,7 @@ vue3-tiptap-katex@^1.1.20:
     tiptap-text-direction-extension "^1.0.7"
     vue "^3.2.47"
     vue-filepond "^7.0.3"
-    vue-tiptap-katex-core "^2.1.2"
+    vue-tiptap-katex-core "^2.1.4"
     vue3-drag-resize "^2.0.5"
 
 vue@^3.2.37, vue@^3.2.47: