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
This commit is contained in:
commit
6a6a1e5b9e
7 changed files with 84 additions and 4 deletions
|
@ -1,9 +1,24 @@
|
|||
/* eslint-disable func-names, object-shorthand, prefer-arrow-callback */
|
||||
/* 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 {
|
||||
constructor(form, method) {
|
||||
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;
|
||||
|
||||
const dropzone = formDropzone.dropzone({
|
||||
|
@ -26,12 +41,20 @@ export default class BlobFileDropzone {
|
|||
},
|
||||
init: function () {
|
||||
this.on('addedfile', function () {
|
||||
toggleLoading(submitButton, submitButtonLoadingIcon, false);
|
||||
dropzoneMessage.addClass(HIDDEN_CLASS);
|
||||
$('.dropzone-alerts').html('').hide();
|
||||
});
|
||||
this.on('removedfile', function () {
|
||||
toggleLoading(submitButton, submitButtonLoadingIcon, false);
|
||||
dropzoneMessage.removeClass(HIDDEN_CLASS);
|
||||
});
|
||||
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) {
|
||||
dropzoneMessage.addClass(HIDDEN_CLASS);
|
||||
this.removeFile(file);
|
||||
});
|
||||
this.on('sending', function (file, xhr, formData) {
|
||||
|
@ -48,14 +71,15 @@ export default class BlobFileDropzone {
|
|||
},
|
||||
});
|
||||
|
||||
const submitButton = form.find('#submit-all')[0];
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
submitButton.on('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
|
||||
// eslint-disable-next-line no-alert
|
||||
alert('Please select a file');
|
||||
return false;
|
||||
}
|
||||
toggleLoading(submitButton, submitButtonLoadingIcon, true);
|
||||
dropzone[0].dropzone.processQueue();
|
||||
return false;
|
||||
});
|
||||
|
|
|
@ -1,2 +1,3 @@
|
|||
/* eslint-disable import/prefer-default-export */
|
||||
export const BYTES_IN_KIB = 1024;
|
||||
export const HIDDEN_CLASS = 'hidden';
|
||||
|
|
|
@ -372,6 +372,10 @@ table {
|
|||
background: $gl-success !important;
|
||||
}
|
||||
|
||||
.dz-message {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.space-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
|
@ -216,6 +216,9 @@
|
|||
}
|
||||
|
||||
.blob-upload-dropzone-previews {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: 2px;
|
||||
border-style: dashed;
|
||||
|
|
|
@ -19,7 +19,9 @@
|
|||
= render 'shared/new_commit_form', placeholder: placeholder
|
||||
|
||||
.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"
|
||||
|
||||
- unless can?(current_user, :push_code, @project)
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: improve file upload/replace experience
|
||||
merge_request:
|
||||
author:
|
42
spec/javascripts/blob/blob_file_dropzone_spec.js
Normal file
42
spec/javascripts/blob/blob_file_dropzone_spec.js
Normal file
|
@ -0,0 +1,42 @@
|
|||
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);
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue