From b900f56b716901e797a13b89c1340180c4add9f9 Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Thu, 18 Jan 2018 22:29:49 -0500 Subject: [PATCH] Implement dashboard file upload support, and show the image preview as an img so it can regulate its own aspect ratio --- app/Http/Controllers/DashboardController.php | 39 ++++++++++++- resources/assets/js/dashboard.js | 56 +++++++++++++++++-- resources/assets/sass/dashboard.scss | 27 +++++++-- resources/views/dashboard/edit-item.blade.php | 16 +++++- routes/web.php | 1 + 5 files changed, 123 insertions(+), 16 deletions(-) diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php index 90e54ef..792401e 100644 --- a/app/Http/Controllers/DashboardController.php +++ b/app/Http/Controllers/DashboardController.php @@ -95,6 +95,12 @@ class DashboardController extends Controller { */ public function postImageUpload(Request $request) { + $this->validate($request, [ + 'id' => 'required', + 'model' => 'required', + 'name' => 'required' + ]); + if ($request->hasFile('file')) { $directory = base_path() . '/public/uploads/' . $request['model'] . '/img/'; file::makeDirectory($directory, 0755, true, true); @@ -107,6 +113,29 @@ class DashboardController extends Controller { return 'success'; } + /** + * Dashboard File Upload: Upload files + */ + public function postFileUpload(Request $request) + { + $this->validate($request, [ + 'id' => 'required', + 'model' => 'required', + 'name' => 'required', + 'ext' => 'required' + ]); + + 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']); + } else { + return 'file-upload-fail'; + } + + return 'success'; + } + /** * Dashboard Edit: Create and edit rows */ @@ -195,11 +224,17 @@ class DashboardController extends Controller { // 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'; + $image = base_path() . '/public/uploads/' . $request['model'] . '/img/' . $request['id'] . '-' . $column['name'] . '.jpg'; - if (file_exists($image_file) && !unlink($image_file)) { + if (file_exists($image) && !unlink($image)) { return 'image-delete-fail'; } + } else if ($column['type'] == 'file') { + $file = base_path() . '/public/uploads/' . $request['model'] . '/files/' . $request['id'] . '-' . $column['name'] . '.' . $column['ext']; + + if (file_exists($file) && !unlink($file)) { + return 'file-delete-fail'; + } } } diff --git a/resources/assets/js/dashboard.js b/resources/assets/js/dashboard.js index 7b0d7d3..2b15e41 100644 --- a/resources/assets/js/dashboard.js +++ b/resources/assets/js/dashboard.js @@ -265,6 +265,7 @@ function editItemInit() { $textInputs = $(".text-input"), $datePickers = $(".date-picker"), $mkdEditors = $(".mkd-editor"), + $fileUploads = $(".file-upload"), $imgUploads = $(".image-upload"), $token = $("#_token"), $spinner = $("#loading-modal"), @@ -346,8 +347,8 @@ function editItemInit() { }); }; - const uploadImage = function(row_id, currentImage) { - let file, imgUpload; + const uploadFile = function(row_id, currentFile) { + let file, fileUpload; // functionality to run on success const returnSuccess = function() { @@ -355,6 +356,53 @@ function editItemInit() { window.location.href = "/dashboard/" + path; }; + // add the file from the file upload box for file-upload class elements + if ($fileUploads.length >= currentFile + 1) { + fileUpload = $fileUploads[currentFile]; + + if ($(fileUpload).val() !== "") { + file = new FormData(); + + // add the file, id and model to the formData variable + file.append("file", fileUpload.files[0]); + file.append("name", $(fileUpload).attr("name")); + file.append("id", row_id); + file.append("model", model); + file.append("ext", $(fileUpload).data("ext")); + + $.ajax({ + type: "POST", + url: "/dashboard/file-upload", + data: file, + processData: false, + contentType: false, + beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-TOKEN", $token.val()); } + }).always(function(response) { + if (response === "success") { + uploadFile(row_id, currentFile + 1); + } else { + hideLoadingModal(); + showAlert("ERROR: Failed to upload file"); + console.log(response.responseText); + submitting = false; + } + }); + } else { + uploadFile(row_id, currentFile + 1); + } + } else { + returnSuccess(); + } + }; + + const uploadImage = function(row_id, currentImage) { + let file, imgUpload; + + // functionality to run on success + const returnSuccess = function() { + uploadFile(row_id, 0); + }; + // add the image from the image upload box for image-upload class elements if ($imgUploads.length >= currentImage + 1) { imgUpload = $imgUploads[currentImage]; @@ -376,8 +424,6 @@ function editItemInit() { 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 { @@ -472,7 +518,7 @@ function editItemInit() { // populate the formData object getFormData(); - console.log(JSON.stringify(formData)); + // console.log(JSON.stringify(formData)); // submit the update $.ajax({ diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss index 767dd63..c7fca9c 100644 --- a/resources/assets/sass/dashboard.scss +++ b/resources/assets/sass/dashboard.scss @@ -392,18 +392,33 @@ body { .current-image { margin-bottom: 15px; + display: block; width: 125px; - height: 125px; - background-position: left center; - background-size: contain; - background-repeat: no-repeat; + max-width: 100%; } - .no-image { + .current-file { + 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; + + &:hover { + background-color: lighten($c-dashboard-dark, 5%); + text-decoration: none; + } + } + + .no-file { margin-bottom: 15px; } - .back-button { float: left; } + .back-button { + float: left; + } .submit-button { float: right; diff --git a/resources/views/dashboard/edit-item.blade.php b/resources/views/dashboard/edit-item.blade.php index c7cd19a..70a96e6 100644 --- a/resources/views/dashboard/edit-item.blade.php +++ b/resources/views/dashboard/edit-item.blade.php @@ -48,12 +48,22 @@ @elseif($column['type'] == 'image') - @set('current_image', "/uploads/$model/img/$id-" . $column['name'] . ".jpg") + @set('current_image', "/uploads/$model/img/$id-" . $column['name'] . '.jpg') @if(file_exists(base_path() . '/public' . $current_image)) -
+ @else -
(No Image Set)
+
(No Image Set)
+ @endif + @elseif($column['type'] == 'file') + + + @set('current_file', "/uploads/$model/files/$id-" . $column['name'] . '.' . $column['ext']) + + @if(file_exists(base_path() . '/public' . $current_file)) + View Current {{ strtoupper($column['ext']) }} + @else +
(No {{ strtoupper($column['ext']) }} Set)
@endif @elseif($column['type'] == 'display')
{{ $value }}
diff --git a/routes/web.php b/routes/web.php index 803d325..68418c5 100644 --- a/routes/web.php +++ b/routes/web.php @@ -34,6 +34,7 @@ Route::group([ 'prefix' => 'dashboard' ], function() { Route::get('/subscriptions', 'DashboardController@getSubscriptions'); Route::get('/export/{model}', 'DashboardController@getExport'); Route::post('/image-upload', 'DashboardController@postImageUpload'); + Route::post('/file-upload', 'DashboardController@postFileUpload'); Route::post('/edit', 'DashboardController@postEdit'); Route::post('/reorder', 'DashboardController@postReorder'); Route::delete('/delete', 'DashboardController@deleteDelete');