Commit f3634798 authored by Simon Knox's avatar Simon Knox

disable file upload button while uploading

hide placeholder text when files have been added
vertically center dropzone area content
close modal after file upload succeeds
parent 001dd56e
/* 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;
});
......
/* 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;
}
......
......@@ -215,6 +215,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)
......
---
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