You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2019/10/02 19:01:46 UTC
[airavata-django-portal] 01/06: AIRAVATA-3081 Max file upload size
guidance in Uppy component
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit d28e87f1b70ca887351a3c857da77fdf06b66a04
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed Oct 2 13:16:13 2019 -0400
AIRAVATA-3081 Max file upload size guidance in Uppy component
---
.../experiment/input-editors/InputFileSelector.vue | 73 ++++------------------
.../components/experiment/input-editors/Uppy.vue | 46 ++++++++++++--
.../js/containers/UserStorageContainer.vue | 64 +++----------------
3 files changed, 60 insertions(+), 123 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputFileSelector.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputFileSelector.vue
index 645a198..df3063b 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputFileSelector.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputFileSelector.vue
@@ -7,7 +7,7 @@
/>
</div>
<div
- class="d-flex align-items-baseline"
+ class="d-flex align-items-center"
v-else
>
<b-button
@@ -15,27 +15,21 @@
class="input-file-option"
>Select file from storage</b-button>
<span class="text-muted mx-3">OR</span>
- <b-form-group
- :description="maxFileUploadSizeMessage"
- :state="fileUploadState"
- :invalid-feedback="fileUploadInvalidFeedback"
+ <uppy
class="input-file-option"
- >
- <uppy
- ref="uppy"
- xhr-upload-endpoint="/api/upload"
- tus-upload-finish-endpoint="/api/tus-upload-finish"
- @upload-success="uploadSuccess"
- @upload-started="$emit('uploadstart')"
- @upload-finished="uploadFinished"
- :multiple="multiple"
- />
- </b-form-group>
+ ref="uppy"
+ xhr-upload-endpoint="/api/upload"
+ tus-upload-finish-endpoint="/api/tus-upload-finish"
+ @upload-success="uploadSuccess"
+ @upload-started="$emit('uploadstart')"
+ @upload-finished="uploadFinished"
+ :multiple="multiple"
+ />
</div>
</template>
<script>
-import { models, services } from "django-airavata-api";
+import { models } from "django-airavata-api";
import UserStorageFileSelectionContainer from "../../storage/UserStorageFileSelectionContainer";
import Uppy from "./Uppy";
@@ -56,56 +50,13 @@ export default {
Uppy
},
computed: {
- maxFileUploadSizeMB() {
- return this.settings
- ? this.settings.fileUploadMaxFileSize / 1024 / 1024
- : 0;
- },
- maxFileUploadSizeMessage() {
- if (this.maxFileUploadSizeMB) {
- return (
- "Max file upload size is " +
- Math.round(this.maxFileUploadSizeMB) +
- " MB"
- );
- } else {
- return null;
- }
- },
- fileTooLarge() {
- return (
- this.settings &&
- this.settings.fileUploadMaxFileSize &&
- this.file &&
- this.file.size > this.settings.fileUploadMaxFileSize
- );
- },
- fileUploadState() {
- if (this.fileTooLarge) {
- return false;
- } else {
- return null;
- }
- },
- fileUploadInvalidFeedback() {
- if (this.fileTooLarge) {
- return (
- "File selected is larger than " + this.maxFileUploadSizeMB + " MB"
- );
- } else {
- return null;
- }
- }
},
data() {
return {
- file: null,
isSelectingFile: false,
- settings: null
};
},
created() {
- services.SettingsService.get().then(s => (this.settings = s));
},
methods: {
unselect() {
@@ -124,7 +75,7 @@ export default {
this.$emit("selected", dataProduct.productUri, dataProduct);
},
uploadFinished() {
- this.$emit('uploadend');
+ this.$emit("uploadend");
this.$refs.uppy.reset();
}
}
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/Uppy.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/Uppy.vue
index 39cfb2f..16e1966 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/Uppy.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/Uppy.vue
@@ -2,6 +2,11 @@
<div class="custom-Uppy">
<div ref="dragDrop" />
<div ref="statusBar" />
+ <b-alert
+ class="mt-1"
+ :show="restrictionFailed"
+ variant="danger"
+ >{{ restrictionFailedMessage }}</b-alert>
</div>
</template>
@@ -43,26 +48,51 @@ export default {
});
},
destroyed() {
- // TODO: tear down the Uppy instance
+ if (this.uppy) {
+ this.uppy.close();
+ }
},
data() {
return {
- uppy: null
+ uppy: null,
+ restrictionFailedMessage: null
};
},
+ computed: {
+ maxFileUploadSizeMB() {
+ return this.settings
+ ? this.settings.fileUploadMaxFileSize / 1024 / 1024
+ : 0;
+ },
+ maxFileUploadSizeMessage() {
+ if (this.maxFileUploadSizeMB) {
+ return (
+ "Max file upload size is " +
+ Math.round(this.maxFileUploadSizeMB) +
+ " MB"
+ );
+ } else {
+ return null;
+ }
+ },
+ restrictionFailed() {
+ return this.restrictionFailedMessage != null;
+ }
+ },
methods: {
initUppy() {
this.uppy = Uppy({
- // TODO: set id
autoProceed: true,
- // TODO: add maxFileSize restriction
debug: true,
restrictions: {
maxNumberOfFiles: this.multiple ? null : 1,
+ maxFileSize: this.settings.fileUploadMaxFileSize
}
});
- // TODO: add 'note' here as passed in through prop (Max file upload size is 64MB)
- this.uppy.use(DragDrop, { target: this.$refs.dragDrop });
+ this.uppy.use(DragDrop, {
+ target: this.$refs.dragDrop,
+ note: this.maxFileUploadSizeMessage
+ });
this.uppy.use(StatusBar, {
target: this.$refs.statusBar,
hideUploadButton: true,
@@ -97,6 +127,10 @@ export default {
});
this.uppy.on("complete", () => {
this.$emit("upload-finished");
+ this.restrictionFailedMessage = null;
+ });
+ this.uppy.on("restriction-failed", (file, error) => {
+ this.restrictionFailedMessage = `${file.name}: ${error.message}`;
});
},
reset() {
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/UserStorageContainer.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/UserStorageContainer.vue
index b7f34ef..d3a2aab 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/UserStorageContainer.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/UserStorageContainer.vue
@@ -12,19 +12,14 @@
</div>
<div class="row">
<div class="col">
- <b-form-group
- :description="maxFileUploadSizeMessage"
- :state="fileUploadState"
- :invalid-feedback="fileUploadInvalidFeedback"
- >
- <uppy
- ref="file-upload"
- :xhr-upload-endpoint="uploadEndpoint"
- :tus-upload-finish-endpoint="uploadEndpoint"
- @upload-success="uploadSuccess"
- multiple
- />
- </b-form-group>
+ <uppy
+ class="mb-1"
+ ref="file-upload"
+ :xhr-upload-endpoint="uploadEndpoint"
+ :tus-upload-finish-endpoint="uploadEndpoint"
+ @upload-success="uploadSuccess"
+ multiple
+ />
</div>
<div class="col">
<b-input-group>
@@ -79,46 +74,6 @@ export default {
username() {
return session.Session.username;
},
- maxFileUploadSizeMB() {
- return this.settings
- ? this.settings.fileUploadMaxFileSize / 1024 / 1024
- : 0;
- },
- maxFileUploadSizeMessage() {
- if (this.maxFileUploadSizeMB) {
- return (
- "Max file upload size is " +
- Math.round(this.maxFileUploadSizeMB) +
- " MB"
- );
- } else {
- return null;
- }
- },
- fileTooLarge() {
- return (
- this.settings &&
- this.settings.fileUploadMaxFileSize &&
- this.file &&
- this.file.size > this.settings.fileUploadMaxFileSize
- );
- },
- fileUploadState() {
- if (this.fileTooLarge) {
- return false;
- } else {
- return null;
- }
- },
- fileUploadInvalidFeedback() {
- if (this.fileTooLarge) {
- return (
- "File selected is larger than " + this.maxFileUploadSizeMB + " MB"
- );
- } else {
- return null;
- }
- },
uploadEndpoint() {
// This endpoint can handle XHR upload or a TUS uploadURL
return "/api/user-storage/" + this.storagePath;
@@ -127,9 +82,7 @@ export default {
data() {
return {
userStoragePath: null,
- file: null,
dirName: null,
- settings: null
};
},
methods: {
@@ -214,7 +167,6 @@ export default {
} else {
this.loadUserStoragePath(this.storagePath);
}
- services.SettingsService.get().then(s => (this.settings = s));
},
watch: {
$route() {