From 5613c72d0c9e721274a46a7cac720160316d415f Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Thu, 11 Jan 2018 01:13:58 -0500 Subject: [PATCH] Implement support for uploading multiple images, move the dashboard columns for a given table to its model, and clean a bunch of things up --- app/Http/Controllers/DashboardController.php | 31 +++++----- app/Models/Contact.php | 12 ++++ app/Models/Subscriptions.php | 11 ++++ readme.md | 4 +- resources/assets/js/dashboard.js | 62 +++++++++++-------- resources/assets/sass/dashboard.scss | 1 + resources/views/dashboard/edit-item.blade.php | 30 +++------ 7 files changed, 86 insertions(+), 65 deletions(-) diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php index 1ffa40e..90e54ef 100644 --- a/app/Http/Controllers/DashboardController.php +++ b/app/Http/Controllers/DashboardController.php @@ -2,6 +2,7 @@ use App\Http\Requests; use Illuminate\Http\Request; +use File; use Image; use Excel; @@ -41,12 +42,7 @@ class DashboardController extends Controller { 'heading' => 'Contact Form Submissions', 'model' => 'contact', 'rows' => Contact::getContactSubmissions(), - 'cols' => [ - [ 'Date', 'created_at' ], - [ 'Name', 'name' ], - [ 'Email', 'email' ], - [ 'Message', 'message' ] - ] + 'cols' => Contact::$dashboard_columns ]); } @@ -56,11 +52,7 @@ class DashboardController extends Controller { 'heading' => 'Subscriptions', 'model' => 'subscriptions', 'rows' => Subscriptions::getSubscriptions(), - 'cols' => [ - [ 'Date', 'created_at' ], - [ 'Email', 'email' ], - [ 'Name', 'name' ] - ] + 'cols' => Subscriptions::$dashboard_columns ]); } @@ -104,9 +96,10 @@ class DashboardController extends Controller { public function postImageUpload(Request $request) { if ($request->hasFile('file')) { - $file = base_path() . '/public/uploads/' . $request['model'] . '/img/' . $request['id'] . '.jpg'; + $directory = base_path() . '/public/uploads/' . $request['model'] . '/img/'; + file::makeDirectory($directory, 0755, true, true); $image = Image::make($request->file('file')); - $image->save($file); + $image->save($directory . $request['id'] . "-" . $request['name'] . '.jpg'); } else { return 'file-upload-fail'; } @@ -199,11 +192,15 @@ class DashboardController extends Controller { return 'row-delete-fail'; } - // delete the associated image if one exists - $image_file = base_path() . '/public/uploads/' . $request['model'] . '/img/' . $request['id'] . '.jpg'; + // delete associated files if they exist + foreach ($items::$dashboard_columns as $column) { + if ($column['type'] == 'image') { + $image_file = base_path() . '/public/uploads/' . $request['model'] . '/img/' . $request['id'] . "-" . $column['name'] . '.jpg'; - if (file_exists($image_file) && !unlink($image_file)) { - return 'image-delete-fail'; + if (file_exists($image_file) && !unlink($image_file)) { + return 'image-delete-fail'; + } + } } // Return a success diff --git a/app/Models/Contact.php b/app/Models/Contact.php index f008cdb..898a793 100644 --- a/app/Models/Contact.php +++ b/app/Models/Contact.php @@ -13,6 +13,18 @@ class Contact extends Model */ protected $table = 'contact'; + /** + * Dashboard columns + * + * @var array + */ + public static $dashboard_columns = [ + [ 'Date', 'created_at' ], + [ 'Name', 'name' ], + [ 'Email', 'email' ], + [ 'Message', 'message' ] + ]; + /** * Returns the list of all contact submissions * diff --git a/app/Models/Subscriptions.php b/app/Models/Subscriptions.php index 8076005..d20fbc3 100644 --- a/app/Models/Subscriptions.php +++ b/app/Models/Subscriptions.php @@ -13,6 +13,17 @@ class Subscriptions extends Model */ protected $table = 'subscriptions'; + /** + * Dashboard columns + * + * @var array + */ + public static $dashboard_columns = [ + [ 'Date', 'created_at' ], + [ 'Email', 'email' ], + [ 'Name', 'name' ] + ]; + /** * Returns the list of all subscriptions * diff --git a/readme.md b/readme.md index 0cd416d..eefbf72 100644 --- a/readme.md +++ b/readme.md @@ -171,12 +171,12 @@ This function should be named the same as the one above except with `Edit` at th 'model' => 'news', 'id' => $id, 'item' => $item, - 'imgup' => true, 'columns' => [ [ 'name' => 'title', 'type' => 'text', 'label' => 'The Title' ], [ 'name' => 'iframe', 'type' => 'text' ], [ 'name' => 'halign', 'type' => 'select', 'options' => [ 'left', 'center', 'right' ] ], [ 'name' => 'story', 'type' => 'mkd' ], + [ 'label' => 'Header Image', 'name' => 'headerimage', 'type' => 'image' ], [ 'name' => 'order', 'type' => 'hidden' ] ] ]); @@ -187,7 +187,6 @@ This function should be named the same as the one above except with `Edit` at th * `model`: The model that will be accessed on this page * `id`: Always set this to `$id` * `item`: Always set this to `$item` -* `imgup`: Set this to `true` to enable image upload, otherwise set to `false` * `help_text`: An optional value that will add a box containing help text above the form if set * `columns`: An array containing a set of arrays where: * `name` is the name of the column to be edited @@ -203,6 +202,7 @@ The following is a list of possible `types` in the `columns` array for Editable * `date`: Date and time selection tool for date/time data * `select`: Text input via option select with possible options in an `options` array * `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 is not part of the database and is instead used in the filename) * `display`: Displayed information that can't be edited #### Edit Item Functionality diff --git a/resources/assets/js/dashboard.js b/resources/assets/js/dashboard.js index bb2151a..772ee14 100644 --- a/resources/assets/js/dashboard.js +++ b/resources/assets/js/dashboard.js @@ -254,7 +254,7 @@ function editItemInit() { $textInputs = $(".text-input"), $dateTimePickers = $(".date-time-picker"), $mkdEditors = $(".mkd-editor"), - $imgUpload = $("#image-upload"), + $imgUploads = $(".image-upload"), $token = $("#_token"), $spinner = $("#loading-modal"), fadeTime = 250, @@ -333,8 +333,8 @@ function editItemInit() { }); }; - const uploadImage = function(row_id) { - let file; + const uploadImage = function(row_id, currentImage) { + let file, imgUpload; // functionality to run on success const returnSuccess = function() { @@ -343,30 +343,39 @@ function editItemInit() { }; // add the image from the image upload box for image-upload class elements - if ($imgUpload.length && $imgUpload.val() !== "") { - file = new FormData(); + if ($imgUploads.length >= currentImage + 1) { + imgUpload = $imgUploads[currentImage]; - // add the file, id and model to the formData variable - file.append("file", $imgUpload[0].files[0]); - file.append("id", row_id); - file.append("model", model); + if ($(imgUpload).val() !== "") { + file = new FormData(); - $.ajax({ - type: "POST", - url: "/dashboard/image-upload", - data: file, - processData: false, - contentType: false, - beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-TOKEN", $token.val()); } - }).always(function(response) { - if (response === "success") { - returnSuccess(); - } else { - hideLoadingModal(); - showAlert("ERROR: Failed to upload image"); - submitting = false; - } - }); + // add the file, id and model to the formData variable + file.append("file", imgUpload.files[0]); + file.append("name", $(imgUpload).attr("name")); + file.append("id", row_id); + file.append("model", model); + + $.ajax({ + type: "POST", + url: "/dashboard/image-upload", + data: file, + processData: false, + contentType: false, + beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-TOKEN", $token.val()); } + }).always(function(response) { + console.log(`response: ${response.responseText}`); + + if (response === "success") { + uploadImage(row_id, currentImage + 1); + } else { + hideLoadingModal(); + showAlert("ERROR: Failed to upload image"); + submitting = false; + } + }); + } else { + uploadImage(row_id, currentImage + 1); + } } else { returnSuccess(); } @@ -438,6 +447,7 @@ function editItemInit() { // populate the formData object getFormData(); + console.log(JSON.stringify(formData)); // submit the update $.ajax({ @@ -446,7 +456,7 @@ function editItemInit() { data: formData }).always(function(response) { if (/^id:[0-9][0-9]*$/.test(response)) { - uploadImage(response.replace(/^id:/, "")); + uploadImage(response.replace(/^id:/, ""), 0); } else { hideLoadingModal(); showAlert("ERROR: Failed to " + operation + " record"); diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss index 56a4f0c..0eae7f1 100644 --- a/resources/assets/sass/dashboard.scss +++ b/resources/assets/sass/dashboard.scss @@ -348,6 +348,7 @@ body { } .current-image { + margin-bottom: 15px; width: 125px; height: 125px; background-position: left center; diff --git a/resources/views/dashboard/edit-item.blade.php b/resources/views/dashboard/edit-item.blade.php index 2bc6d56..656e56a 100644 --- a/resources/views/dashboard/edit-item.blade.php +++ b/resources/views/dashboard/edit-item.blade.php @@ -45,6 +45,16 @@ @endif @endforeach + @elseif($column['type'] == 'image') + + + @set('current_image', "/uploads/$model/img/$id-" . $column['name'] . ".jpg") + + @if(file_exists(base_path() . '/public' . $current_image)) +
+ @else +
(No Image Set)
+ @endif @elseif($column['type'] == 'display')
{{ $value }}
@endif @@ -53,26 +63,6 @@ @endforeach - @if(!empty($imgup) && $imgup) -
-
- -
- -
- - - @set('current_image', "/uploads/$model/$id.jpg") - - @if(file_exists(base_path() . '/public' . $current_image)) -
- @else -
(No Image Set)
- @endif -
-
- @endif -