Drag and drop a file here
+or
+
+
diff --git a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.js b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.js index e17fe03689..0b817e3fdf 100644 --- a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.js +++ b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.js @@ -216,6 +216,21 @@ class GrEditControls extends mixinBehaviors( [ this._closeDialog(this._getDialogFromEvent(e), true); } + _handleUploadConfirm(path, fileData) { + if (!this.change || !path || !fileData) { + this._closeDialog(this.$.openDialog, true); + return; + } + this.$.restAPI.saveFileUploadChangeEdit(this.change._number, path, + fileData).then(res => { + if (!res.ok) { return; } + + this._closeDialog(this.$.openDialog, true); + const url = Gerrit.Nav.getUrlForChange(this.change, this.patchNum); + Gerrit.Nav.navigateToRelativeUrl(url); + }); + } + _handleDeleteConfirm(e) { // Get the dialog before the api call as the event will change during bubbling // which will make Polymer.dom(e).path an emtpy array in polymer 2 @@ -258,6 +273,39 @@ class GrEditControls extends mixinBehaviors( [ _computeIsInvisible(id, hiddenActions) { return hiddenActions.includes(id) ? 'invisible' : ''; } + + _handleDragAndDropUpload(event) { + // We prevent the default clicking. + event.preventDefault(); + event.stopPropagation(); + + this._fileUpload(event); + } + + _handleFileUploadChanged(event) { + this._fileUpload(event); + } + + _fileUpload(event) { + const e = event.target.files || event.dataTransfer.files; + for (const file of e) { + if (!file) continue; + + let path = this._path; + if (!path) { + path = file.name; + } + + const fr = new FileReader(); + fr.file = file; + fr.onload = fileLoadEvent => { + if (!fileLoadEvent) return; + const fileData = fileLoadEvent.target.result; + this._handleUploadConfirm(path, fileData); + }; + fr.readAsDataURL(file); + } + } } customElements.define(GrEditControls.is, GrEditControls); diff --git a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls_html.js b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls_html.js index 2d09069c8c..482ab1d340 100644 --- a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls_html.js +++ b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls_html.js @@ -47,6 +47,20 @@ export const htmlTemplate = html` width: 100%; box-sizing: content-box; } + #fileUploadBrowse { + margin-left: 0; + } + #dragDropArea { + border: 2px dashed var(--border-color); + border-radius: var(--border-radius); + margin-top: var(--spacing-l); + padding: var(--spacing-xxl) var(--spacing-xxl); + text-align: center; + } + #dragDropArea > p { + font-weight: var(--font-weight-bold); + padding: var(--spacing-s); + } @media screen and (max-width: 50em) { gr-dialog { width: 100vw; @@ -63,6 +77,25 @@ export const htmlTemplate = html`
Drag and drop a file here
+or
+
+