Commit 6a6a1e5b authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch...

Merge branch '35052-please-select-a-file-when-attempting-to-upload-or-replace-from-the-ui' into 'master'

Resolve "'Please select a file' when attempting to upload or replace from the UI"

Closes #35052

See merge request !12863
parents b612a47d f3634798
/* eslint-disable func-names, object-shorthand, prefer-arrow-callback */ /* eslint-disable func-names, object-shorthand, prefer-arrow-callback */
/* global Dropzone */ /* global Dropzone */
import '../lib/utils/url_utility';
import { HIDDEN_CLASS } from '../lib/utils/constants';
function toggleLoading($el, $icon, loading) {
if (loading) {
$el.disable();
$icon.removeClass(HIDDEN_CLASS);
} else {
$el.enable();
$icon.addClass(HIDDEN_CLASS);
}
}
export default class BlobFileDropzone { export default class BlobFileDropzone {
constructor(form, method) { constructor(form, method) {
const formDropzone = form.find('.dropzone'); const formDropzone = form.find('.dropzone');
const submitButton = form.find('#submit-all');
const submitButtonLoadingIcon = submitButton.find('.js-loading-icon');
const dropzoneMessage = form.find('.dz-message');
Dropzone.autoDiscover = false; Dropzone.autoDiscover = false;
const dropzone = formDropzone.dropzone({ const dropzone = formDropzone.dropzone({
...@@ -26,12 +41,20 @@ export default class BlobFileDropzone { ...@@ -26,12 +41,20 @@ export default class BlobFileDropzone {
}, },
init: function () { init: function () {
this.on('addedfile', function () { this.on('addedfile', function () {
toggleLoading(submitButton, submitButtonLoadingIcon, false);
dropzoneMessage.addClass(HIDDEN_CLASS);
$('.dropzone-alerts').html('').hide(); $('.dropzone-alerts').html('').hide();
}); });
this.on('removedfile', function () {
toggleLoading(submitButton, submitButtonLoadingIcon, false);
dropzoneMessage.removeClass(HIDDEN_CLASS);
});
this.on('success', function (header, response) { this.on('success', function (header, response) {
window.location.href = response.filePath; $('#modal-upload-blob').modal('hide');
window.gl.utils.visitUrl(response.filePath);
}); });
this.on('maxfilesexceeded', function (file) { this.on('maxfilesexceeded', function (file) {
dropzoneMessage.addClass(HIDDEN_CLASS);
this.removeFile(file); this.removeFile(file);
}); });
this.on('sending', function (file, xhr, formData) { this.on('sending', function (file, xhr, formData) {
...@@ -48,14 +71,15 @@ export default class BlobFileDropzone { ...@@ -48,14 +71,15 @@ export default class BlobFileDropzone {
}, },
}); });
const submitButton = form.find('#submit-all')[0]; submitButton.on('click', (e) => {
submitButton.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (dropzone[0].dropzone.getQueuedFiles().length === 0) { if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
// eslint-disable-next-line no-alert // eslint-disable-next-line no-alert
alert('Please select a file'); alert('Please select a file');
return false;
} }
toggleLoading(submitButton, submitButtonLoadingIcon, true);
dropzone[0].dropzone.processQueue(); dropzone[0].dropzone.processQueue();
return false; return false;
}); });
......
/* eslint-disable import/prefer-default-export */ /* eslint-disable import/prefer-default-export */
export const BYTES_IN_KIB = 1024; export const BYTES_IN_KIB = 1024;
export const HIDDEN_CLASS = 'hidden';
...@@ -372,6 +372,10 @@ table { ...@@ -372,6 +372,10 @@ table {
background: $gl-success !important; background: $gl-success !important;
} }
.dz-message {
margin: 0;
}
.space-right { .space-right {
margin-right: 10px; margin-right: 10px;
} }
......
...@@ -216,6 +216,9 @@ ...@@ -216,6 +216,9 @@
} }
.blob-upload-dropzone-previews { .blob-upload-dropzone-previews {
display: flex;
justify-content: center;
align-items: center;
text-align: center; text-align: center;
border: 2px; border: 2px;
border-style: dashed; border-style: dashed;
......
...@@ -19,7 +19,9 @@ ...@@ -19,7 +19,9 @@
= render 'shared/new_commit_form', placeholder: placeholder = render 'shared/new_commit_form', placeholder: placeholder
.form-actions .form-actions
= button_tag button_title, class: 'btn btn-small btn-create btn-upload-file', id: 'submit-all' = button_tag class: 'btn btn-create btn-upload-file', id: 'submit-all', type: 'button' do
= icon('spin spinner', class: 'js-loading-icon hidden' )
= button_title
= link_to _("Cancel"), '#', class: "btn btn-cancel", "data-dismiss" => "modal" = link_to _("Cancel"), '#', class: "btn btn-cancel", "data-dismiss" => "modal"
- unless can?(current_user, :push_code, @project) - unless can?(current_user, :push_code, @project)
......
---
title: improve file upload/replace experience
merge_request:
author:
import 'dropzone';
import BlobFileDropzone from '~/blob/blob_file_dropzone';
describe('BlobFileDropzone', () => {
preloadFixtures('blob/show.html.raw');
beforeEach(() => {
loadFixtures('blob/show.html.raw');
const form = $('.js-upload-blob-form');
this.blobFileDropzone = new BlobFileDropzone(form, 'POST');
this.dropzone = $('.js-upload-blob-form .dropzone').get(0).dropzone;
this.replaceFileButton = $('#submit-all');
});
describe('submit button', () => {
it('requires file', () => {
spyOn(window, 'alert');
this.replaceFileButton.click();
expect(window.alert).toHaveBeenCalled();
});
it('is disabled while uploading', () => {
spyOn(window, 'alert');
const file = {
name: 'some-file.jpg',
type: 'jpg',
};
const fakeEvent = jQuery.Event('drop', {
dataTransfer: { files: [file] },
});
this.dropzone.listeners[0].events.drop(fakeEvent);
this.replaceFileButton.click();
expect(window.alert).not.toHaveBeenCalled();
expect(this.replaceFileButton.is(':disabled')).toEqual(true);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment