mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-21 23:52:31 -05:00
Add buttons to image and file uploads on edit-item pages that clear the currently selected upload content
This commit is contained in:
parent
5e8bc06c51
commit
6b2126e5a0
3 changed files with 40 additions and 2 deletions
|
@ -324,6 +324,7 @@ function editItemInit() {
|
||||||
$datePickers = $(".date-picker"),
|
$datePickers = $(".date-picker"),
|
||||||
$mkdEditors = $(".mkd-editor"),
|
$mkdEditors = $(".mkd-editor"),
|
||||||
$lists = $(".list"),
|
$lists = $(".list"),
|
||||||
|
$clearUploadButtons = $(".clear-upload"),
|
||||||
$token = $("#token"),
|
$token = $("#token"),
|
||||||
model = $editItem.data("model"),
|
model = $editItem.data("model"),
|
||||||
operation = $editItem.data("id") === "new" ? "create" : "update";
|
operation = $editItem.data("id") === "new" ? "create" : "update";
|
||||||
|
@ -524,6 +525,14 @@ function editItemInit() {
|
||||||
$submit.removeClass("no-input");
|
$submit.removeClass("no-input");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// initialize upload clearing buttons
|
||||||
|
$clearUploadButtons.on("click", function(e) {
|
||||||
|
const $this = $(this),
|
||||||
|
$upload = $this.parent().find("input").first();
|
||||||
|
|
||||||
|
$upload.val("");
|
||||||
|
});
|
||||||
|
|
||||||
// initialize image deletion
|
// initialize image deletion
|
||||||
$(".edit-button.delete.image").on("click", function(e) {
|
$(".edit-button.delete.image").on("click", function(e) {
|
||||||
const $this = $(this),
|
const $this = $(this),
|
||||||
|
|
|
@ -1175,6 +1175,35 @@ form {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
font-size: pxrem(14);
|
font-size: pxrem(14);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clear-upload {
|
||||||
|
position: relative;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
width: pxrem(20);
|
||||||
|
height: pxrem(20);
|
||||||
|
padding: 0px;
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
&:before, &:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
background-color: $c-dashboard-error;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
width: 2px;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
width: 50%;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
|
|
@ -163,7 +163,7 @@
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<div class="upload-wrapper">
|
<div class="upload-wrapper">
|
||||||
<input class="image-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" />
|
<input class="image-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" /> <button type="button" class="clear-upload" title="Clear Upload"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if(file_exists(base_path() . '/public' . $current_image))
|
@if(file_exists(base_path() . '/public' . $current_image))
|
||||||
|
@ -183,7 +183,7 @@
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<div class="upload-wrapper">
|
<div class="upload-wrapper">
|
||||||
<input class="file-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" />
|
<input class="file-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" /> <button type="button" class="clear-upload" title="Clear Upload"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if(file_exists(base_path() . '/public' . $current_file))
|
@if(file_exists(base_path() . '/public' . $current_file))
|
||||||
|
|
Loading…
Reference in a new issue