diff --git a/app/imports/api/creature/archive/ArchiveCreatureFiles.js b/app/imports/api/creature/archive/ArchiveCreatureFiles.js
index dda1499f..10280566 100644
--- a/app/imports/api/creature/archive/ArchiveCreatureFiles.js
+++ b/app/imports/api/creature/archive/ArchiveCreatureFiles.js
@@ -3,6 +3,7 @@ import SimpleSchema from 'simpl-schema';
 import { incrementFileStorageUsed } from '/imports/api/users/methods/updateFileStorageUsed';
 import { CreaturePropertySchema } from '/imports/api/creature/creatureProperties/CreatureProperties';
 import { CreatureSchema } from '/imports/api/creature/creatures/Creatures';
+import assertUserHasFileSpace from '/imports/api/files/assertUserHasFileSpace';
 let createS3FilesCollection;
 if (Meteor.isServer) {
   createS3FilesCollection = require('/imports/api/files/server/s3FileStorage').createS3FilesCollection
@@ -18,6 +19,9 @@ const ArchiveCreatureFiles = createS3FilesCollection({
     if (file.size > 10485760) {
       return 'Please upload with size equal or less than 10MB';
     }
+    // Make sure the user has enough space
+    assertUserHasFileSpace(Meteor.userId(), file.size);
+    // Only accept JSON
     if (!/json/i.test(file.extension)) {
       return 'Please upload only a JSON file';
     }
diff --git a/app/imports/api/files/assertUserHasFileSpace.ts b/app/imports/api/files/assertUserHasFileSpace.ts
new file mode 100644
index 00000000..59d79713
--- /dev/null
+++ b/app/imports/api/files/assertUserHasFileSpace.ts
@@ -0,0 +1,23 @@
+import { getUserTier } from '/imports/api/users/patreon/tiers';
+import prettyBytes from 'pretty-bytes';
+
+export default function assertUserHasFileSpace(userId: string | null, spaceRequiredInBytes: number) {
+  // Get the user
+  if (!userId) throw new Meteor.Error('permission-denied', 'No user was provided');
+  const user = Meteor.users.findOne(userId, { fields: { fileStorageUsed: 1 } });
+  if (!user) throw new Meteor.Error('permission-denied', 'User not found');
+
+  // Work out how much space they have and need
+  const fileStorageUsed = user.fileStorageUsed || 0;
+  const fileStorageAllowed = getUserTier(Meteor.userId()).fileStorage * 1000000;
+  let fileStorageLeft = fileStorageAllowed - fileStorageUsed;
+  if (fileStorageLeft < 0) fileStorageLeft = 0;
+
+  // Throw an error if they don't have space
+  if (fileStorageLeft < spaceRequiredInBytes) {
+    throw new Meteor.Error('insufficient-space',
+      `Not enough storage space left, you need ${prettyBytes(spaceRequiredInBytes)}, ` +
+      `but only have ${prettyBytes(fileStorageLeft)} available`
+    );
+  }
+}
\ No newline at end of file
diff --git a/app/imports/api/files/userImages/UserImages.ts b/app/imports/api/files/userImages/UserImages.ts
index 895aaed7..e6dff275 100644
--- a/app/imports/api/files/userImages/UserImages.ts
+++ b/app/imports/api/files/userImages/UserImages.ts
@@ -1,5 +1,6 @@
 
 import { incrementFileStorageUsed } from '/imports/api/users/methods/updateFileStorageUsed';
+import assertUserHasFileSpace from '/imports/api/files/assertUserHasFileSpace';
 let createS3FilesCollection;
 if (Meteor.isServer) {
   createS3FilesCollection = require('/imports/api/files/server/s3FileStorage').createS3FilesCollection
@@ -11,10 +12,12 @@ const UserImages = createS3FilesCollection({
   collectionName: 'userImages',
   storagePath: Meteor.isDevelopment ? '../../../../../fileStorage/userImages' : 'assets/app/userImages',
   onBeforeUpload(file) {
-    // Allow upload files under 10MB
-    if (file.size > 10485760) {
-      return 'Please upload with size equal or less than 10MB';
+    // Allow upload files under 30MB
+    if (file.size > 30_000_000) {
+      return 'Images must be less than 30MB';
     }
+    // Make sure the user has enough space
+    assertUserHasFileSpace(Meteor.userId(), file.size);
     // Allow common image extensions
     if (!/gif|png|jpe?g|webp/i.test(file.extension || '')) {
       return 'Please upload an image file only';
diff --git a/app/imports/client/ui/components/ImageUploadInput.vue b/app/imports/client/ui/components/ImageUploadInput.vue
index 8a331ff8..970076c5 100644
--- a/app/imports/client/ui/components/ImageUploadInput.vue
+++ b/app/imports/client/ui/components/ImageUploadInput.vue
@@ -1,34 +1,46 @@
 <template>
-  <v-btn
-    outlined
-    class="image-upload-button"
+  <div
     v-bind="$attrs"
-    :color="fileUploadError ? 'error' : undefined"
-    :disabled="uploadingInProgress"
-    @click="$refs.hiddenFileInput.click()"
+    class="d-flex flex-column "
   >
-    <v-icon left>
-      mdi-file-upload-outline
-    </v-icon>
-    <template v-if="fileUploadError">
-      {{ fileUploadError }}
-    </template>
-    <template v-else>
-      Upload Image
-    </template>
-    <v-progress-linear
-      v-if="uploadingInProgress"
-      :value="progress"
-      :indeterminate="uploadIndeterminate"
-    />
-    <input
-      ref="hiddenFileInput"
-      type="file"
-      accept="image/*"
-      style="display: none;"
-      @input="inputChange"
+    <v-btn
+      outlined
+      block
+      class="image-upload-button flex-grow-1"
+      v-bind="$attrs"
+      style="min-height: 64px;"
+      :loading="uploadingInProgress"
+      @click="$refs.hiddenFileInput.click()"
     >
-  </v-btn>
+      <v-icon left>
+        mdi-file-upload-outline
+      </v-icon>
+      <div>
+        Upload Image
+      </div>
+      <template #loader>
+        <v-progress-circular
+          :value="progress"
+          :indeterminate="uploadIndeterminate"
+        />
+      </template>
+      <input
+        ref="hiddenFileInput"
+        type="file"
+        accept="image/*"
+        style="display: none;"
+        @input="inputChange"
+      >
+    </v-btn>
+    <v-alert
+      v-if="fileUploadError"
+      outlined
+      type="error"
+      class="mb-0 mt-4"
+    >
+      {{ fileUploadError }}
+    </v-alert>
+  </div>
 </template>
 
 <script lang="js">
@@ -62,7 +74,7 @@ export default {
       }
 
       // Start the image insert process
-      let uploadInstance = UserImages.insert({
+      const uploadInstance = UserImages.insert({
         file: file,
         chunkSize: 'dynamic',
         allowWebWorkers: true,
@@ -73,32 +85,42 @@ export default {
       }, false);
 
       uploadInstance.on('start', function () {
+        console.log('start')
         self.progress = 0;
         self.uploadIndeterminate = false;
+        // Remove errors
+        self.fileUploadError = undefined;
       });
 
       uploadInstance.on('end', function (error, fileObj) {
+        console.log('end', error)
         self.resetState();
         self.$emit('uploaded', UserImages.link(fileObj));
       });
 
       uploadInstance.on('uploaded', function (error, fileObj) {
-        self.resetState();
+        console.log('uploaded')
         self.progress = 0;
       });
 
       uploadInstance.on('error', function (error, fileObj) {
-        self.resetState();
-        this.fileUploadError = error.reason || error.message || error.toString();
+        console.log('error', error)
+        self.fileUploadError = error.reason || error.message || error.toString();
       });
 
       uploadInstance.on('progress', function (progress, fileObj) {
         // Update our progress bar with actual progress
+        console.log('progress')
         self.uploadIndeterminate = false;
         self.progress = progress;
       });
 
-      uploadInstance.start(); // Must manually start the upload
+      try {
+        uploadInstance.start(); // Must manually start the upload
+      } catch (error) {
+        self.fileUploadError = error.reason || error.message || error.toString();
+        self.resetState();
+      }
     },
   },
   methods: {
@@ -112,11 +134,10 @@ export default {
     resetState() {
       // Remove file from input
       this.file = undefined;
+      this.$refs.hiddenFileInput.value = '';
       // stop progress
       this.uploadingInProgress = false;
       this.progress = 0;
-      // Remove errors
-      this.fileUploadError = undefined;
     },
   },