mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 11:16:39 -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)
|
||||
{
|
||||
$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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
56
resources/assets/js/dashboard.js
vendored
56
resources/assets/js/dashboard.js
vendored
|
@ -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({
|
||||
|
|
27
resources/assets/sass/dashboard.scss
vendored
27
resources/assets/sass/dashboard.scss
vendored
|
@ -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;
|
||||
|
|
|
@ -48,12 +48,22 @@
|
|||
@elseif($column['type'] == 'image')
|
||||
<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))
|
||||
<div class="current-image" style="background-image: url({{ $current_image }});"></div>
|
||||
<img class="current-image" src="{{ $current_image }}" />
|
||||
@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
|
||||
@elseif($column['type'] == 'display')
|
||||
<div class="text-display">{{ $value }}</div>
|
||||
|
|
|
@ -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');
|
||||
|
|
Loading…
Reference in a new issue