mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-12-12 13:33:46 +08:00
d859be3a12
- Added a remove link to remove files that have an error. - Error will appear below the progress bar. - Hovering on dz-image or dz-details will display the error message. Otherwise error message was covering the remove link as well. - Removed styling around the file size. - Removed gradient effect in accordance with BookStack styling. - Dropzone filenae will not overflow the container element. Also done for page attachments - Added a 'uploaded' error message. this error was being thrown when the file size exceeded the server configured file size. (https://stackoverflow.com/a/42934387/903324) Towards #741 Signed-off-by: Abijeet <abijeetpatro@gmail.com>
63 lines
1.8 KiB
JavaScript
63 lines
1.8 KiB
JavaScript
const DropZone = require("dropzone");
|
|
|
|
const template = `
|
|
<div class="dropzone-container">
|
|
<div class="dz-message">{{placeholder}}</div>
|
|
</div>
|
|
`;
|
|
|
|
const props = ['placeholder', 'uploadUrl', 'uploadedTo'];
|
|
|
|
// TODO - Remove jQuery usage
|
|
function mounted() {
|
|
let container = this.$el;
|
|
let _this = this;
|
|
new DropZone(container, {
|
|
addRemoveLinks: true,
|
|
dictRemoveFile: trans('components.image_upload_remove'),
|
|
url: function() {
|
|
return _this.uploadUrl;
|
|
},
|
|
init: function () {
|
|
let dz = this;
|
|
|
|
dz.on('sending', function (file, xhr, data) {
|
|
let token = window.document.querySelector('meta[name=token]').getAttribute('content');
|
|
data.append('_token', token);
|
|
let uploadedTo = typeof _this.uploadedTo === 'undefined' ? 0 : _this.uploadedTo;
|
|
data.append('uploaded_to', uploadedTo);
|
|
});
|
|
|
|
dz.on('success', function (file, data) {
|
|
_this.$emit('success', {file, data});
|
|
$(file.previewElement).fadeOut(400, function () {
|
|
dz.removeFile(file);
|
|
});
|
|
});
|
|
|
|
dz.on('error', function (file, errorMessage, xhr) {
|
|
_this.$emit('error', {file, errorMessage, xhr});
|
|
console.log(errorMessage);
|
|
console.log(xhr);
|
|
function setMessage(message) {
|
|
$(file.previewElement).find('[data-dz-errormessage]').text(message);
|
|
}
|
|
|
|
if (xhr && xhr.status === 413) setMessage(trans('errors.server_upload_limit'));
|
|
if (errorMessage.file) setMessage(errorMessage.file[0]);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function data() {
|
|
return {}
|
|
}
|
|
|
|
module.exports = {
|
|
template,
|
|
props,
|
|
mounted,
|
|
data,
|
|
};
|