diff --git a/changes/changelog.d/550.enhancement b/changes/changelog.d/550.enhancement
new file mode 100644
index 000000000..1ec0243de
--- /dev/null
+++ b/changes/changelog.d/550.enhancement
@@ -0,0 +1 @@
+Show remaining storage space during import and prevent file upload if not enough space is remaining (#550)
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index f5cf432e9..a8a5d2f37 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -27,7 +27,6 @@
-
@@ -59,7 +58,15 @@
Proceed
-
+
+
+
+ Remaining storage space
+
+
+ {{ remainingSpace * 1000 * 1000 | humanSize}}
+
+
{
+ self.quotaStatus = response.data.quota_status
+ self.isLoadingQuota = false
+ })
+ },
inputFile(newFile, oldFile) {
- this.$refs.upload.active = true;
+ if (!newFile) {
+ return
+ }
+ if (this.remainingSpace < newFile.size / (1000 * 1000)) {
+ newFile.error = 'denied'
+ } else {
+ this.$refs.upload.active = true;
+ }
},
fetchStatus() {
let self = this;
@@ -307,6 +332,19 @@ export default {
},
hasActiveUploads () {
return this.sortedFiles.filter((f) => { return f.active }).length > 0
+ },
+ remainingSpace () {
+ if (!this.quotaStatus) {
+ return 0
+ }
+ return Math.max(0, this.quotaStatus.remaining - (this.uploadedSize / (1000 * 1000)))
+ },
+ uploadedSize () {
+ let uploaded = 0
+ this.files.forEach((f) => {
+ uploaded += f.size * (f.progress / 100)
+ })
+ return uploaded
}
},
watch: {
@@ -318,7 +356,12 @@ export default {
},
importReference: _.debounce(function() {
this.$router.replace({ query: { import: this.importReference } });
- }, 500)
+ }, 500),
+ remainingSpace (newValue) {
+ if (newValue <= 0) {
+ this.$refs.upload.active = false;
+ }
+ }
}
};