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

@@ -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';
+                }
             }
         }
 

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) {
+    const uploadFile = function(row_id, currentFile) {
-        let file, imgUpload;
+        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({

resources/assets/sass/dashboard.scss

@@ -392,18 +392,33 @@ body {
 
     .current-image {
         margin-bottom: 15px;
+        display: block;
         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;
     }
 
-    .back-button { float: left; }
+    .back-button {
+        float: left;
+    }
 
     .submit-button {
         float: right;

resources/views/dashboard/edit-item.blade.php

@@ -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>

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');