Track usage of media files and add a job to clean them

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Editor.vue

@@ -212,7 +212,7 @@ import { SEARCH_PERSONS } from "../graphql/search";
 import { Actor, IActor, IPerson } from "../types/actor";
 import Image from "./Editor/Image";
 import MaxSize from "./Editor/MaxSize";
-import { UPLOAD_PICTURE } from "../graphql/upload";
+import { UPLOAD_MEDIA } from "../graphql/upload";
 import { listenFileUpload } from "../utils/upload";
 import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
 import { IComment } from "../types/comment.model";
@@ -395,7 +395,15 @@ export default class EditorComponent extends Vue {
         new Image(),
         new MaxSize({ maxSize: this.maxSize }),
       ],
-      onUpdate: ({ getHTML }: { getHTML: Function }) => {
+      onUpdate: ({
+        getHTML,
+        transaction,
+        getJSON,
+      }: {
+        getHTML: Function;
+        getJSON: Function;
+        transaction: unknown;
+      }) => {
         this.$emit("input", getHTML());
       },
     });
@@ -526,14 +534,14 @@ export default class EditorComponent extends Vue {
     const image = await listenFileUpload();
     try {
       const { data } = await this.$apollo.mutate({
-        mutation: UPLOAD_PICTURE,
+        mutation: UPLOAD_MEDIA,
         variables: {
           file: image,
           name: image.name,
         },
       });
-      if (data.uploadPicture && data.uploadPicture.url) {
-        command({ src: data.uploadPicture.url });
+      if (data.uploadMedia && data.uploadMedia.url) {
+        command({ src: data.uploadMedia.url, "data-media-id": data.uploadMedia.id });
       }
     } catch (error) {
       console.error(error);

js/src/components/Editor/Image.ts

@@ -1,6 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { Node } from "tiptap";
-import { UPLOAD_PICTURE } from "@/graphql/upload";
+import { UPLOAD_MEDIA } from "@/graphql/upload";
 import apolloProvider from "@/vue-apollo";
 import ApolloClient from "apollo-client";
 import { NormalizedCacheObject } from "apollo-cache-inmemory";
@@ -27,16 +28,18 @@ export default class Image extends Node {
         title: {
           default: null,
         },
+        "data-media-id": {},
       },
       group: "inline",
       draggable: true,
       parseDOM: [
         {
-          tag: "img[src]",
+          tag: "img",
           getAttrs: (dom: any) => ({
             src: dom.getAttribute("src"),
             title: dom.getAttribute("title"),
             alt: dom.getAttribute("alt"),
+            "data-media-id": dom.getAttribute("data-media-id"),
           }),
         },
       ],
@@ -92,13 +95,16 @@ export default class Image extends Node {
               try {
                 images.forEach(async (image) => {
                   const { data } = await client.mutate({
-                    mutation: UPLOAD_PICTURE,
+                    mutation: UPLOAD_MEDIA,
                     variables: {
                       file: image,
                       name: image.name,
                     },
                   });
-                  const node = schema.nodes.image.create({ src: data.uploadPicture.url });
+                  const node = schema.nodes.image.create({
+                    src: data.uploadMedia.url,
+                    "data-media-id": data.uploadMedia.id,
+                  });
                   const transaction = view.state.tr.insert(coordinates.pos, node);
                   view.dispatch(transaction);
                 });

js/src/components/PictureUpload.vue

@@ -60,14 +60,14 @@ figure.image {
 </style>
 
 <script lang="ts">
-import { IPicture } from "@/types/picture.model";
+import { IMedia } from "@/types/media.model";
 import { Component, Model, Prop, Vue, Watch } from "vue-property-decorator";
 
 @Component
 export default class PictureUpload extends Vue {
   @Model("change", { type: File }) readonly pictureFile!: File;
 
-  @Prop({ type: Object, required: false }) defaultImage!: IPicture;
+  @Prop({ type: Object, required: false }) defaultImage!: IMedia;
 
   @Prop({ type: String, required: false, default: "image/gif,image/png,image/jpeg,image/webp" })
   accept!: string;
@@ -100,7 +100,7 @@ export default class PictureUpload extends Vue {
   }
 
   @Watch("defaultImage")
-  onDefaultImageChange(defaultImage: IPicture): void {
+  onDefaultImageChange(defaultImage: IMedia): void {
     console.log("onDefaultImageChange", defaultImage);
     this.imageSrc = defaultImage ? defaultImage.url : null;
   }