diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue | 37 |
1 files changed, 36 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue b/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue index 0a7a22ed3a8..62de76e46b5 100644 --- a/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue +++ b/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue @@ -41,6 +41,16 @@ export default { required: false, default: false, }, + inputFieldName: { + type: String, + required: false, + default: 'upload_file', + }, + shouldUpdateInputOnFileDrop: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -84,6 +94,30 @@ export default { return; } + // NOTE: This is a temporary solution to integrate dropzone into a Rails + // form. On file drop if `shouldUpdateInputOnFileDrop` is true, the file + // input value is updated. So that when the form is submitted — the file + // value would be send together with the form data. This solution should + // be removed when License file upload page is fully migrated: + // https://gitlab.com/gitlab-org/gitlab/-/issues/352501 + // NOTE: as per https://caniuse.com/mdn-api_htmlinputelement_files, IE11 + // is not able to set input.files property, thought the user would still + // be able to use the file picker dialogue option, by clicking the + // "openFileUpload" button + if (this.shouldUpdateInputOnFileDrop) { + // Since FileList cannot be easily manipulated, to match requirement of + // singleFileSelection, we're throwing an error if multiple files were + // dropped on the dropzone + // NOTE: we can drop this logic together with + // `shouldUpdateInputOnFileDrop` flag + if (this.singleFileSelection && files.length > 1) { + this.$emit('error'); + return; + } + + this.$refs.fileUpload.files = files; + } + this.$emit('change', this.singleFileSelection ? files[0] : files); }, ondragenter(e) { @@ -116,6 +150,7 @@ export default { <slot> <button class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" + type="button" @click="openFileUpload" > <div @@ -147,7 +182,7 @@ export default { <input ref="fileUpload" type="file" - name="upload_file" + :name="inputFieldName" :accept="validFileMimetypes" class="hide" :multiple="!singleFileSelection" |