Implement deletion functionality for uploaded images and files

This commit is contained in:
Kevin MacMartin 2018-01-21 20:55:07 -05:00
parent 5c2ad8cccb
commit 27ef5d09e5
7 changed files with 179 additions and 26 deletions

View file

@ -105,7 +105,7 @@ class DashboardController extends Controller {
$directory = base_path() . '/public/uploads/' . $request['model'] . '/img/';
file::makeDirectory($directory, 0755, true, true);
$image = Image::make($request->file('file'));
$image->save($directory . $request['id'] . "-" . $request['name'] . '.jpg');
$image->save($directory . $request['id'] . '-' . $request['name'] . '.jpg');
} else {
return 'file-upload-fail';
}
@ -128,7 +128,7 @@ class DashboardController extends Controller {
if ($request->hasFile('file')) {
$directory = base_path() . '/public/uploads/' . $request['model'] . '/files/';
file::makeDirectory($directory, 0755, true, true);
$request->file('file')->move($directory, $request['id'] . "-" . $request['name'] . '.' . $request['ext']);
$request->file('file')->move($directory, $request['id'] . '-' . $request['name'] . '.' . $request['ext']);
} else {
return 'file-upload-fail';
}
@ -242,4 +242,49 @@ class DashboardController extends Controller {
return 'success';
}
/**
* Dashboard Image Delete: Delete images
*/
public function deleteImageDelete(Request $request)
{
$this->validate($request, [
'id' => 'required',
'model' => 'required',
'name' => 'required'
]);
$image = base_path() . '/public/uploads/' . $request['model'] . '/img/' . $request['id'] . '-' . $request['name'] . '.jpg';
if (!file_exists($image)) {
return 'image-not-exists-fail';
} else if (!unlink($image)) {
return 'image-delete-fail';
}
return 'success';
}
/**
* Dashboard File Delete: Delete files
*/
public function deleteFileDelete(Request $request)
{
$this->validate($request, [
'id' => 'required',
'model' => 'required',
'name' => 'required',
'ext' => 'required'
]);
$file = base_path() . '/public/uploads/' . $request['model'] . '/files/' . $request['id'] . '-' . $request['name'] . '.' . $request['ext'];
if (!file_exists($file)) {
return 'file-not-exists-fail';
} else if (!unlink($file)) {
return 'file-delete-fail';
}
return 'success';
}
}

View file

@ -207,9 +207,11 @@ The following is a list of possible `types` in the `columns` array for Editable
* `hidden`: Fields that will contain values to pass to the update function but won't appear on the page (this must be used for the sort column)
* `image`: Fields that contain image uploads
* `name`: not part of the database and is instead used in the filename
* `delete`: (optional) if true then uploaded images can be deleted
* `file`: Fields that contains file uploads
* `name`: not part of the database and is instead used in the filename
* `ext` required key containing the file extension
* `delete`: (optional) if true then uploaded files can be deleted
* `display`: Displayed information that can't be edited
#### Edit Item Functionality

View file

@ -2,7 +2,7 @@
jQuery.fn.reverse = [].reverse;
// show the confirmation modal and run the supplied command if confirm is pressed
function askConfirmation(message, command) {
function askConfirmation(message, command, cancelCommand) {
const $confirmationModal = $("#confirmation-modal"),
$heading = $confirmationModal.find(".panel-heading"),
$cancelButton = $confirmationModal.find(".btn.cancel-button"),
@ -35,8 +35,17 @@ function askConfirmation(message, command) {
closeConfirmationModal();
};
// functionality to run when clicking the cancel button
const cancelModal = function() {
if (cancelCommand !== undefined) {
cancelCommand();
}
closeConfirmationModal();
};
// hide the modal when the cancel button is pressed
$cancelButton.on("click", closeConfirmationModal);
$cancelButton.on("click", cancelModal);
// hide the modal when the escape key is pressed
$(document).on("keyup", escapeModal);
@ -103,6 +112,7 @@ function showAlert(message, command) {
function editListInit() {
const editList = document.getElementById("edit-list"),
$editList = $(editList),
$token = $("#token"),
model = $editList.data("model"),
path = $editList.data("path");
@ -145,7 +155,7 @@ function editListInit() {
data: {
model: model,
id: itemId,
_token: $("#token").val()
_token: $token.val()
}
}).always(function(response) {
if (response === "success") {
@ -177,7 +187,7 @@ function editListInit() {
url: postUrl,
data: {
id: itemId,
_token: $("#token").val()
_token: $token.val()
}
}).always(function(response) {
if (response === "success") {
@ -212,7 +222,7 @@ function editListInit() {
model: model,
order: sortOrder,
column: sortCol,
_token: $("#token").val()
_token: $token.val()
}
}).always(function(response) {
if (response !== "success") {
@ -267,7 +277,7 @@ function editItemInit() {
$mkdEditors = $(".mkd-editor"),
$fileUploads = $(".file-upload"),
$imgUploads = $(".image-upload"),
$token = $("#_token"),
$token = $("#token"),
$spinner = $("#loading-modal"),
fadeTime = 250,
model = $editItem.data("model"),
@ -440,6 +450,74 @@ function editItemInit() {
}
};
$(".edit-button.delete.image").on("click", function(e) {
const $this = $(this),
name = $this.data("name");
if (!submitting) {
submitting = true;
askConfirmation("Are you sure you want to delete this image?", function() {
// delete the image
$.ajax({
type: "DELETE",
url: "/dashboard/image-delete",
data: {
id: id,
model: model,
name: name,
_token: $token.val()
}
}).always(function(response) {
if (response === "success") {
$(`#current-image-${name}`).slideUp(200);
} else {
showAlert("ERROR: Failed to delete the image: " + response);
}
submitting = false;
});
}, function() {
submitting = false;
});
}
});
$(".edit-button.delete.file").on("click", function(e) {
const $this = $(this),
name = $this.data("name"),
ext = $this.data("ext");
if (!submitting) {
submitting = true;
askConfirmation("Are you sure you want to delete this file?", function() {
// delete the file
$.ajax({
type: "DELETE",
url: "/dashboard/file-delete",
data: {
id: id,
model: model,
name: name,
ext: ext,
_token: $token.val()
}
}).always(function(response) {
if (response === "success") {
$(`#current-file-${name}`).slideUp(200);
} else {
showAlert("ERROR: Failed to delete the file: " + response);
}
submitting = false;
});
}, function() {
submitting = false;
});
}
});
// allow start time selection to start on the hour and every 15 minutes after
for (hours = 0; hours <= 23; hours++) {
for (minutes = 0; minutes <= 3; minutes++) {
@ -518,7 +596,6 @@ function editItemInit() {
// populate the formData object
getFormData();
// console.log(JSON.stringify(formData));
// submit the update
$.ajax({

View file

@ -397,23 +397,38 @@ body {
max-width: 100%;
}
.current-file {
.edit-button {
margin-bottom: ($grid-gutter-width / 2);
display: inline-block;
padding: 5px 10px;
border: 1px solid darken($c-dashboard-dark, 5%);
border-radius: 5px;
background-color: $c-dashboard-dark;
color: $c-text-light;
text-transform: uppercase;
transition: background-color 150ms;
cursor: pointer;
&:hover, &:focus {
text-decoration: none;
}
&.view {
border: 1px solid darken($c-dashboard-dark, 5%);
background-color: $c-dashboard-dark;
color: $c-text-light;
&:hover {
background-color: lighten($c-dashboard-dark, 5%);
text-decoration: none;
}
}
.no-file {
margin-bottom: 15px;
&.delete {
border: 1px solid darken($c-dashboard-delete, 5%);
background-color: $c-dashboard-delete;
color: $c-text-light;
&:hover {
background-color: lighten($c-dashboard-delete, 5%);
}
}
}
.back-button {

View file

@ -14,7 +14,7 @@
@endif
<form id="edit-item" class="edit-item" data-id="{{ $id }}" data-model="{{ $model }}" data-path="{{ isset($path) ? $path : $model }}">
<input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}" />
<input type="hidden" id="token" value="{{ csrf_token() }}" />
<div class="container-fluid">
@foreach($columns as $column)
@ -51,9 +51,15 @@
@set('current_image', "/uploads/$model/img/$id-" . $column['name'] . '.jpg')
@if(file_exists(base_path() . '/public' . $current_image))
<div id="current-image-{{ $column['name'] }}">
<img class="current-image" src="{{ $current_image }}" />
@else
<div class="no-file">(No Image Set)</div>
@if(array_key_exists('delete', $column) && $column['delete'])
<span class="edit-button delete image" data-name="{{ $column['name'] }}">
Delete Image
</span>
@endif
</div>
@endif
@elseif($column['type'] == 'file')
<input class="file-upload" type="file" name="{{ $column['name'] }}" id="{{ $column['name'] }}" data-ext="{{ $column['ext'] }}" />
@ -61,9 +67,15 @@
@set('current_file', "/uploads/$model/files/$id-" . $column['name'] . '.' . $column['ext'])
@if(file_exists(base_path() . '/public' . $current_file))
<a class="current-file" href="{{ $current_file }}" target="_blank">View Current {{ strtoupper($column['ext']) }}</a>
@else
<div class="no-file">(No {{ strtoupper($column['ext']) }} Set)</div>
<div id="current-file-{{ $column['name'] }}">
<a class="edit-button view" href="{{ $current_file }}" target="_blank">View {{ strtoupper($column['ext']) }}</a>
@if(array_key_exists('delete', $column) && $column['delete'])
<span class="edit-button delete file" data-name="{{ $column['name'] }}" data-ext="{{ $column['ext'] }}">
Delete {{ strtoupper($column['ext']) }}
</span>
@endif
</div>
@endif
@elseif($column['type'] == 'display')
<div class="text-display">{{ $value }}</div>

View file

@ -12,7 +12,7 @@
@section('dashboard-body')
<div id="edit-list-wrapper">
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
<input type="hidden" id="token" value="{{ csrf_token() }}" />
@if($filter)
<input id="filter-input" class="search" placeholder="Filter" />

View file

@ -38,6 +38,8 @@ Route::group([ 'prefix' => 'dashboard' ], function() {
Route::post('/edit', 'DashboardController@postEdit');
Route::post('/reorder', 'DashboardController@postReorder');
Route::delete('/delete', 'DashboardController@deleteDelete');
Route::delete('/image-delete', 'DashboardController@deleteImageDelete');
Route::delete('/file-delete', 'DashboardController@deleteFileDelete');
});
/*