mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 19:26:38 -05:00
Implement dashboard file upload support, and show the image preview as an img so it can regulate its own aspect ratio
This commit is contained in:
parent
9f434d1cc3
commit
b900f56b71
5 changed files with 123 additions and 16 deletions
|
@ -95,6 +95,12 @@ class DashboardController extends Controller {
|
||||||
*/
|
*/
|
||||||
public function postImageUpload(Request $request)
|
public function postImageUpload(Request $request)
|
||||||
{
|
{
|
||||||
|
$this->validate($request, [
|
||||||
|
'id' => 'required',
|
||||||
|
'model' => 'required',
|
||||||
|
'name' => 'required'
|
||||||
|
]);
|
||||||
|
|
||||||
if ($request->hasFile('file')) {
|
if ($request->hasFile('file')) {
|
||||||
$directory = base_path() . '/public/uploads/' . $request['model'] . '/img/';
|
$directory = base_path() . '/public/uploads/' . $request['model'] . '/img/';
|
||||||
file::makeDirectory($directory, 0755, true, true);
|
file::makeDirectory($directory, 0755, true, true);
|
||||||
|
@ -107,6 +113,29 @@ class DashboardController extends Controller {
|
||||||
return 'success';
|
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
|
* Dashboard Edit: Create and edit rows
|
||||||
*/
|
*/
|
||||||
|
@ -195,11 +224,17 @@ class DashboardController extends Controller {
|
||||||
// delete associated files if they exist
|
// delete associated files if they exist
|
||||||
foreach ($items::$dashboard_columns as $column) {
|
foreach ($items::$dashboard_columns as $column) {
|
||||||
if ($column['type'] == 'image') {
|
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';
|
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';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
56
resources/assets/js/dashboard.js
vendored
56
resources/assets/js/dashboard.js
vendored
|
@ -265,6 +265,7 @@ function editItemInit() {
|
||||||
$textInputs = $(".text-input"),
|
$textInputs = $(".text-input"),
|
||||||
$datePickers = $(".date-picker"),
|
$datePickers = $(".date-picker"),
|
||||||
$mkdEditors = $(".mkd-editor"),
|
$mkdEditors = $(".mkd-editor"),
|
||||||
|
$fileUploads = $(".file-upload"),
|
||||||
$imgUploads = $(".image-upload"),
|
$imgUploads = $(".image-upload"),
|
||||||
$token = $("#_token"),
|
$token = $("#_token"),
|
||||||
$spinner = $("#loading-modal"),
|
$spinner = $("#loading-modal"),
|
||||||
|
@ -346,8 +347,8 @@ function editItemInit() {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const uploadImage = function(row_id, currentImage) {
|
const uploadFile = function(row_id, currentFile) {
|
||||||
let file, imgUpload;
|
let file, fileUpload;
|
||||||
|
|
||||||
// functionality to run on success
|
// functionality to run on success
|
||||||
const returnSuccess = function() {
|
const returnSuccess = function() {
|
||||||
|
@ -355,6 +356,53 @@ function editItemInit() {
|
||||||
window.location.href = "/dashboard/" + path;
|
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
|
// add the image from the image upload box for image-upload class elements
|
||||||
if ($imgUploads.length >= currentImage + 1) {
|
if ($imgUploads.length >= currentImage + 1) {
|
||||||
imgUpload = $imgUploads[currentImage];
|
imgUpload = $imgUploads[currentImage];
|
||||||
|
@ -376,8 +424,6 @@ function editItemInit() {
|
||||||
contentType: false,
|
contentType: false,
|
||||||
beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-TOKEN", $token.val()); }
|
beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-TOKEN", $token.val()); }
|
||||||
}).always(function(response) {
|
}).always(function(response) {
|
||||||
console.log(`response: ${response.responseText}`);
|
|
||||||
|
|
||||||
if (response === "success") {
|
if (response === "success") {
|
||||||
uploadImage(row_id, currentImage + 1);
|
uploadImage(row_id, currentImage + 1);
|
||||||
} else {
|
} else {
|
||||||
|
@ -472,7 +518,7 @@ function editItemInit() {
|
||||||
|
|
||||||
// populate the formData object
|
// populate the formData object
|
||||||
getFormData();
|
getFormData();
|
||||||
console.log(JSON.stringify(formData));
|
// console.log(JSON.stringify(formData));
|
||||||
|
|
||||||
// submit the update
|
// submit the update
|
||||||
$.ajax({
|
$.ajax({
|
||||||
|
|
27
resources/assets/sass/dashboard.scss
vendored
27
resources/assets/sass/dashboard.scss
vendored
|
@ -392,18 +392,33 @@ body {
|
||||||
|
|
||||||
.current-image {
|
.current-image {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
display: block;
|
||||||
width: 125px;
|
width: 125px;
|
||||||
height: 125px;
|
max-width: 100%;
|
||||||
background-position: left center;
|
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button { float: left; }
|
.back-button {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
.submit-button {
|
.submit-button {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
|
@ -48,12 +48,22 @@
|
||||||
@elseif($column['type'] == 'image')
|
@elseif($column['type'] == 'image')
|
||||||
<input class="image-upload" type="file" name="{{ $column['name'] }}" id="{{ $column['name'] }}" />
|
<input class="image-upload" type="file" name="{{ $column['name'] }}" id="{{ $column['name'] }}" />
|
||||||
|
|
||||||
@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))
|
@if(file_exists(base_path() . '/public' . $current_image))
|
||||||
<div class="current-image" style="background-image: url({{ $current_image }});"></div>
|
<img class="current-image" src="{{ $current_image }}" />
|
||||||
@else
|
@else
|
||||||
<div class="no-image">(No Image Set)</div>
|
<div class="no-file">(No Image Set)</div>
|
||||||
|
@endif
|
||||||
|
@elseif($column['type'] == 'file')
|
||||||
|
<input class="file-upload" type="file" name="{{ $column['name'] }}" id="{{ $column['name'] }}" data-ext="{{ $column['ext'] }}" />
|
||||||
|
|
||||||
|
@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>
|
||||||
@endif
|
@endif
|
||||||
@elseif($column['type'] == 'display')
|
@elseif($column['type'] == 'display')
|
||||||
<div class="text-display">{{ $value }}</div>
|
<div class="text-display">{{ $value }}</div>
|
||||||
|
|
|
@ -34,6 +34,7 @@ Route::group([ 'prefix' => 'dashboard' ], function() {
|
||||||
Route::get('/subscriptions', 'DashboardController@getSubscriptions');
|
Route::get('/subscriptions', 'DashboardController@getSubscriptions');
|
||||||
Route::get('/export/{model}', 'DashboardController@getExport');
|
Route::get('/export/{model}', 'DashboardController@getExport');
|
||||||
Route::post('/image-upload', 'DashboardController@postImageUpload');
|
Route::post('/image-upload', 'DashboardController@postImageUpload');
|
||||||
|
Route::post('/file-upload', 'DashboardController@postFileUpload');
|
||||||
Route::post('/edit', 'DashboardController@postEdit');
|
Route::post('/edit', 'DashboardController@postEdit');
|
||||||
Route::post('/reorder', 'DashboardController@postReorder');
|
Route::post('/reorder', 'DashboardController@postReorder');
|
||||||
Route::delete('/delete', 'DashboardController@deleteDelete');
|
Route::delete('/delete', 'DashboardController@deleteDelete');
|
||||||
|
|
Loading…
Reference in a new issue