debian-mirror-gitlab/app/assets/javascripts/blob/blob_file_dropzone.js

98 lines
3.2 KiB
JavaScript
Raw Normal View History

2019-12-21 20:55:43 +05:30
/* eslint-disable func-names */
2018-05-09 12:01:36 +05:30
2018-03-17 18:26:18 +05:30
import Dropzone from 'dropzone';
2021-03-11 19:13:27 +05:30
import $ from 'jquery';
import { sprintf, __ } from '~/locale';
2017-09-10 17:25:29 +05:30
import { HIDDEN_CLASS } from '../lib/utils/constants';
2018-03-17 18:26:18 +05:30
import csrf from '../lib/utils/csrf';
2021-03-11 19:13:27 +05:30
import { visitUrl } from '../lib/utils/url_utility';
2018-03-17 18:26:18 +05:30
Dropzone.autoDiscover = false;
2017-09-10 17:25:29 +05:30
function toggleLoading($el, $icon, loading) {
if (loading) {
$el.disable();
$icon.removeClass(HIDDEN_CLASS);
} else {
$el.enable();
$icon.addClass(HIDDEN_CLASS);
}
}
2017-08-17 22:00:37 +05:30
export default class BlobFileDropzone {
constructor(form, method) {
const formDropzone = form.find('.dropzone');
2017-09-10 17:25:29 +05:30
const submitButton = form.find('#submit-all');
const submitButtonLoadingIcon = submitButton.find('.js-loading-icon');
const dropzoneMessage = form.find('.dz-message');
2017-08-17 22:00:37 +05:30
Dropzone.autoDiscover = false;
2016-09-13 17:45:13 +05:30
2017-08-17 22:00:37 +05:30
const dropzone = formDropzone.dropzone({
autoDiscover: false,
autoProcessQueue: false,
url: form.attr('action'),
// Rails uses a hidden input field for PUT
// http://stackoverflow.com/questions/21056482/how-to-set-method-put-in-form-tag-in-rails
2019-12-04 20:38:33 +05:30
method,
2017-08-17 22:00:37 +05:30
clickable: true,
uploadMultiple: false,
paramName: 'file',
maxFilesize: gon.max_file_size || 10,
parallelUploads: 1,
maxFiles: 1,
addRemoveLinks: true,
previewsContainer: '.dropzone-previews',
2018-03-17 18:26:18 +05:30
headers: csrf.headers,
2019-12-04 20:38:33 +05:30
init() {
2021-03-08 18:12:59 +05:30
this.on('processing', function () {
2020-04-22 19:07:51 +05:30
this.options.url = form.attr('action');
});
2019-12-21 20:55:43 +05:30
this.on('addedfile', () => {
2017-09-10 17:25:29 +05:30
toggleLoading(submitButton, submitButtonLoadingIcon, false);
dropzoneMessage.addClass(HIDDEN_CLASS);
2021-03-08 18:12:59 +05:30
$('.dropzone-alerts').html('').hide();
2017-08-17 22:00:37 +05:30
});
2019-12-21 20:55:43 +05:30
this.on('removedfile', () => {
2017-09-10 17:25:29 +05:30
toggleLoading(submitButton, submitButtonLoadingIcon, false);
dropzoneMessage.removeClass(HIDDEN_CLASS);
});
2019-12-21 20:55:43 +05:30
this.on('success', (header, response) => {
2017-09-10 17:25:29 +05:30
$('#modal-upload-blob').modal('hide');
2018-03-17 18:26:18 +05:30
visitUrl(response.filePath);
2017-08-17 22:00:37 +05:30
});
2021-03-08 18:12:59 +05:30
this.on('maxfilesexceeded', function (file) {
2017-09-10 17:25:29 +05:30
dropzoneMessage.addClass(HIDDEN_CLASS);
2017-08-17 22:00:37 +05:30
this.removeFile(file);
});
2019-12-21 20:55:43 +05:30
this.on('sending', (file, xhr, formData) => {
2017-09-10 17:25:29 +05:30
formData.append('branch_name', form.find('.js-branch-name').val());
2017-08-17 22:00:37 +05:30
formData.append('create_merge_request', form.find('.js-create-merge-request').val());
formData.append('commit_message', form.find('.js-commit-message').val());
});
},
// Override behavior of adding error underneath preview
2019-12-04 20:38:33 +05:30
error(file, errorMessage) {
2021-03-08 18:12:59 +05:30
const stripped = $('<div/>').html(errorMessage).text();
2018-12-13 13:39:08 +05:30
$('.dropzone-alerts')
2019-07-31 22:56:46 +05:30
.html(sprintf(__('Error uploading file: %{stripped}'), { stripped }))
2018-12-13 13:39:08 +05:30
.show();
2017-08-17 22:00:37 +05:30
this.removeFile(file);
},
});
2016-09-13 17:45:13 +05:30
2021-03-08 18:12:59 +05:30
submitButton.on('click', (e) => {
2017-08-17 22:00:37 +05:30
e.preventDefault();
e.stopPropagation();
2021-04-17 20:07:23 +05:30
2017-08-17 22:00:37 +05:30
if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
// eslint-disable-next-line no-alert
2019-07-31 22:56:46 +05:30
alert(__('Please select a file'));
2017-09-10 17:25:29 +05:30
return false;
2017-08-17 22:00:37 +05:30
}
2017-09-10 17:25:29 +05:30
toggleLoading(submitButton, submitButtonLoadingIcon, true);
2017-08-17 22:00:37 +05:30
dropzone[0].dropzone.processQueue();
return false;
});
}
}