webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-02 02:26:57 +03:00
Code Activity

Added the ability to replace existing image files

Browse Source 
- Updated UI with image form dropdown containing delete and replace
  image actions.
- Adds new endpoint and service/repo handling for replacing existing
  image.
- Includes tests to cover.
This commit is contained in:
Dan Brown
2023-05-28 17:32:22 +01:00
parent 9ff7c97911
commit e3c4a9d167
10 changed files with 146 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/components/dropzone.js
View File

@ -15,6 +15,7 @@ export class Dropzone extends Component {
this.isActive = true;
this.url = this.$opts.url;
this.method = (this.$opts.method || 'post').toUpperCase();
this.successMessage = this.$opts.successMessage;
this.errorMessage = this.$opts.errorMessage;
this.uploadLimitMb = Number(this.$opts.uploadLimit);
@ -167,6 +168,9 @@ export class Dropzone extends Component {
startXhrForUpload(upload) {
const formData = new FormData();
formData.append('file', upload.file, upload.file.name);
if (this.method !== 'POST') {
formData.append('_method', this.method);
}
const component = this;
const req = window.$http.createXMLHttpRequest('POST', this.url, {

4
resources/sass/_lists.scss
View File

@ -674,6 +674,10 @@ ul.pagination {
text-align: start !important;
max-height: 500px;
overflow-y: auto;
&.anchor-left {
inset-inline-end: auto;
inset-inline-start: 0;
}
&.wide {
min-width: 220px;
}

42
resources/views/pages/parts/image-manager-form.blade.php
View File

@ -1,4 +1,14 @@
<div class="image-manager-details">
<div component="dropzone"
option:dropzone:url="{{ url("/images/{$image->id}/file") }}"
option:dropzone:method="PUT"
option:dropzone:success-message="{{ trans('components.image_update_success') }}"
option:dropzone:upload-limit="{{ config('app.upload_limit') }}"
option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
option:dropzone:zone-text="{{ trans('entities.attachments_dropzone') }}"
option:dropzone:file-accept="image/*"
class="image-manager-details">
<div refs="dropzone@status-area dropzone@drop-target"></div>
<form component="ajax-form"
option:ajax-form:success-message="{{ trans('components.image_update_success') }}"
@ -19,22 +29,32 @@
<input id="name" class="input-base" type="text" name="name" value="{{ $image->name }}">
</div>
<div class="flex-container-row justify-space-between gap-m">
<div>
@if(userCan('image-delete', $image))
<button type="button"
id="image-manager-delete"
title="{{ trans('common.delete') }}"
class="button icon outline">@icon('delete')</button>
@endif
</div>
<div>
@if(userCan('image-delete', $image) || userCan('image-update', $image))
<div component="dropdown"
class="dropdown-container">
<button refs="dropdown@toggle" type="button" class="button icon outline">@icon('more')</button>
<div refs="dropdown@menu" class="dropdown-menu anchor-left">
@if(userCan('image-delete', $image))
<button type="button"
id="image-manager-delete"
class="text-item">{{ trans('common.delete') }}</button>
@endif
@if(userCan('image-update', $image))
<button type="button"
id="image-manager-replace"
refs="dropzone@select-button"
class="text-item">{{ trans('components.image_replace') }}</button>
@endif
</div>
</div>
@endif
<button type="submit"
class="button icon outline">{{ trans('common.save') }}</button>
</div>
</div>
</form>
@if(!is_null($dependantPages))
<hr>
@if(count($dependantPages) > 0)
<p class="text-neg mb-xs mt-m">{{ trans('components.image_delete_used') }}</p>
<ul class="text-neg">