Some progress on user image uploading

app/imports/api/files/userImages/UserImages.ts

@@ -1,3 +1,5 @@
+
+import { incrementFileStorageUsed } from '/imports/api/users/methods/updateFileStorageUsed';
 let createS3FilesCollection;
 if (Meteor.isServer) {
   createS3FilesCollection = require('/imports/api/files/server/s3FileStorage').createS3FilesCollection
@@ -18,6 +20,9 @@ const UserImages = createS3FilesCollection({
       return 'Please upload an image file only';
     }
     return true
+  },
+  onAfterUpload(file) {
+    if (Meteor.isServer) incrementFileStorageUsed(file.userId, file.size);
   }
 });
 

app/imports/api/files/userImages/methods/index.js

@@ -0,0 +1,3 @@
+import '/imports/api/creature/archive/methods/archiveCreatureToFile';
+import '/imports/api/creature/archive/methods/restoreCreatureFromFile';
+import '/imports/api/creature/archive/methods/removeArchiveCreature';

app/imports/api/files/userImages/methods/removeUserImage.ts

@@ -0,0 +1,45 @@
+import SimpleSchema from 'simpl-schema';
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
+import { RateLimiterMixin } from 'ddp-rate-limiter-mixin';
+import { incrementFileStorageUsed } from '/imports/api/users/methods/updateFileStorageUsed';
+import UserImages from '/imports/api/files/userImages/UserImages';
+
+const removeArchiveCreature = new ValidatedMethod({
+  name: 'ArchiveCreatureFiles.methods.removeArchiveCreature',
+  validate: new SimpleSchema({
+    'fileId': {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    },
+  }).validator(),
+  mixins: [RateLimiterMixin],
+  // @ts-expect-error Rate limit not defined
+  rateLimit: {
+    numRequests: 5,
+    timeInterval: 5000,
+  },
+  async run({ fileId }) {
+    if (!this.userId) {
+      throw new Meteor.Error('logged-out',
+        'The user must be logged in to remove a file');
+    }
+    // fetch the file
+    const file = UserImages.findOne({ _id: fileId }).get();
+    if (!file) {
+      throw new Meteor.Error('File not found',
+        'The requested creature archive does not exist');
+    }
+    // Assert ownership
+    const userId = file?.userId;
+    if (!userId || userId !== this.userId) {
+      throw new Meteor.Error('Permission denied',
+        'You can only restore creatures you own');
+    }
+    //Remove the archive once the restore succeeded
+    UserImages.remove({ _id: fileId });
+    // Update the user's file storage limits
+    incrementFileStorageUsed(userId, -file.size);
+  },
+});
+
+export default removeArchiveCreature;

app/imports/client/ui/components/global/SmartImageInput.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <v-text-field
+      ref="input"
+      v-bind="$attrs"
+      class="dc-text-field"
+      :loading="loading"
+      :error-messages="errors"
+      :value="safeValue"
+      :disabled="isDisabled"
+      :outlined="!regular"
+      @input="input"
+      @focus="focused = true"
+      @blur="focused = false"
+      @keyup="e => $emit('keyup', e)"
+    >
+      <template #append>
+        <slot name="value" />
+      </template>
+      <template #prepend>
+        <slot name="prepend" />
+      </template>
+      <template #append-inner>
+        <input
+          type="file"
+          @change="handleFileChange"
+          @dragover="handleDragOver"
+          @drop="handleDrop"
+        >
+      </template>
+    </v-text-field>
+    <input
+      v-model="url"
+      type="text"
+      @change="handleUrlChange"
+    >
+  </div>
+</template>
+
+<script lang="js">
+import SmartInput from '/imports/client/ui/components/global/SmartInputMixin';
+
+export default {
+  mixins: [SmartInput],
+  data() {
+    return {
+      url: '',
+    };
+  },
+  methods: {
+    handleUrlChange() {
+      this.$emit('change', this.url);
+    },
+    handleFileChange(event) {
+      const file = event.target.files[0];
+      this.uploadFile(file);
+    },
+    handleDragOver(event) {
+      event.preventDefault();
+    },
+    handleDrop(event) {
+      event.preventDefault();
+      const file = event.dataTransfer.files[0];
+      this.uploadFile(file);
+    },
+    uploadFile(file) {
+      // Implement your file upload logic here
+    },
+  },
+};
+</script>

app/imports/client/ui/files/UserImageCard.vue

@@ -34,6 +34,7 @@
 </template>
 
 <script lang="js">
+import removeUserImage from '/imports/api/files/UserImages/methods/removeUserImage';
 
 export default {
   props: {
@@ -50,7 +51,9 @@ export default {
   },
   methods: {
     remove() {
-
+      removeUserImage.call({ fileId: this.model._id }, (error) => {
+        if (error) console.error(error);
+      });
     },
   },
 }