Allowed button-based multi-file uploads
Likely something that worked via dropzone before. This adds support for our custom dropzone file handling. Related to #4241
This commit is contained in:
parent
c17906c758
commit
6a7bc68b61
|
@ -21,6 +21,7 @@ export class Dropzone extends Component {
|
||||||
this.uploadLimitMessage = this.$opts.uploadLimitMessage;
|
this.uploadLimitMessage = this.$opts.uploadLimitMessage;
|
||||||
this.zoneText = this.$opts.zoneText;
|
this.zoneText = this.$opts.zoneText;
|
||||||
this.fileAcceptTypes = this.$opts.fileAccept;
|
this.fileAcceptTypes = this.$opts.fileAccept;
|
||||||
|
this.allowMultiple = this.$opts.allowMultiple === 'true';
|
||||||
|
|
||||||
this.setupListeners();
|
this.setupListeners();
|
||||||
}
|
}
|
||||||
|
@ -83,7 +84,12 @@ export class Dropzone extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
manualSelectHandler() {
|
manualSelectHandler() {
|
||||||
const input = elem('input', {type: 'file', style: 'left: -400px; visibility: hidden; position: fixed;', accept: this.fileAcceptTypes});
|
const input = elem('input', {
|
||||||
|
type: 'file',
|
||||||
|
style: 'left: -400px; visibility: hidden; position: fixed;',
|
||||||
|
accept: this.fileAcceptTypes,
|
||||||
|
multiple: this.allowMultiple ? '' : null,
|
||||||
|
});
|
||||||
this.container.append(input);
|
this.container.append(input);
|
||||||
input.click();
|
input.click();
|
||||||
input.addEventListener('change', () => {
|
input.addEventListener('change', () => {
|
||||||
|
|
|
@ -10,7 +10,11 @@ export function elem(tagName, attrs = {}, children = []) {
|
||||||
const el = document.createElement(tagName);
|
const el = document.createElement(tagName);
|
||||||
|
|
||||||
for (const [key, val] of Object.entries(attrs)) {
|
for (const [key, val] of Object.entries(attrs)) {
|
||||||
el.setAttribute(key, val);
|
if (val === null) {
|
||||||
|
el.removeAttribute(key);
|
||||||
|
} else {
|
||||||
|
el.setAttribute(key, val);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const child of children) {
|
for (const child of children) {
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
|
option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
|
||||||
option:dropzone:zone-text="{{ trans('entities.attachments_dropzone') }}"
|
option:dropzone:zone-text="{{ trans('entities.attachments_dropzone') }}"
|
||||||
option:dropzone:file-accept="*"
|
option:dropzone:file-accept="*"
|
||||||
|
option:dropzone:allow-multiple="true"
|
||||||
class="px-l files">
|
class="px-l files">
|
||||||
|
|
||||||
<div refs="attachments@list-container dropzone@drop-target" class="relative">
|
<div refs="attachments@list-container dropzone@drop-target" class="relative">
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
|
option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
|
||||||
option:dropzone:zone-text="{{ trans('components.image_dropzone_drop') }}"
|
option:dropzone:zone-text="{{ trans('components.image_dropzone_drop') }}"
|
||||||
option:dropzone:file-accept="image/*"
|
option:dropzone:file-accept="image/*"
|
||||||
|
option:dropzone:allow-multiple="true"
|
||||||
option:image-manager:uploaded-to="{{ $uploaded_to ?? 0 }}"
|
option:image-manager:uploaded-to="{{ $uploaded_to ?? 0 }}"
|
||||||
class="image-manager">
|
class="image-manager">
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue