Add buttons to image and file uploads on edit-item pages that clear the currently selected upload content

app/Models/Meta.php

@@ -44,8 +44,6 @@ public static function getData($path)
                     'description' => 'The requested page cannot be found',
                     'keywords' => ''
                 ];
-            } else {
-                $page['title'] = $page['title'] . ' | ' . env('APP_NAME');
             }
         }
 

readme.md

@@ -195,7 +195,10 @@ ### Adding a new model to the dashboard
 
 #### DashboardModel variables
 
-* `$dashboard_type`: The dashboard type (this can be `view` for a viewable table or `edit` for an editable list)
+* `$dashboard_type`: The dashboard type:
+    * `view`: Display a viewable table showing the data
+    * `edit`: Provides a list of rows and the option to edit their contents
+    * `list`: Allows another model to use this one to create an editable list of one or more items
 * `$dashboard_heading`: This sets the heading that appears on the dashboard page; not setting this will use the model name
 * `$export`: This enables a button that allows the table to be exported as a spreadsheet
 

resources/js/dashboard.js

@@ -324,6 +324,7 @@ function editItemInit() {
         $datePickers = $(".date-picker"),
         $mkdEditors = $(".mkd-editor"),
         $lists = $(".list"),
+        $clearUploadButtons = $(".clear-upload"),
         $token = $("#token"),
         model = $editItem.data("model"),
         operation = $editItem.data("id") === "new" ? "create" : "update";
@@ -524,6 +525,14 @@ function editItemInit() {
         $submit.removeClass("no-input");
     };
 
+    // initialize upload clearing buttons
+    $clearUploadButtons.on("click", function(e) {
+        const $this = $(this),
+            $upload = $this.parent().find("input").first();
+
+        $upload.val("");
+    });
+
     // initialize image deletion
     $(".edit-button.delete.image").on("click", function(e) {
         const $this = $(this),

resources/sass/app.scss

@@ -29,7 +29,7 @@ $enable-smooth-scroll: false;
 
 [data-whatinput="initial"], [data-whatinput="keyboard"] {
     :focus {
-        outline: 1px dotted $c-base;
+        outline: 1px dotted $c-accent;
     }
 }
 

resources/sass/dashboard.scss

@@ -1141,7 +1141,7 @@ form {
             }
         }
 
-        .text-display, .mkd-editor-container, input, textarea, select {
+        .text-display, .mkd-editor-container, input:not([type="file"]), textarea, select, .upload-wrapper {
             margin-bottom: pxrem(15);
         }
 
@@ -1160,15 +1160,49 @@ form {
                 }
             }
 
-            &[type="file"] {
+            &.date-picker {
+                cursor: pointer;
+            }
+        }
+
+        .upload-wrapper {
+            display: flex;
+            height: $label-height;
+            align-items: center;
+
+            input {
                 overflow: hidden;
                 max-width: 100%;
-                height: $label-height;
                 font-size: pxrem(14);
             }
 
-            &.date-picker {
-                cursor: pointer;
+            .clear-upload {
+                position: relative;
+                transform: rotate(45deg);
+                width: pxrem(20);
+                height: pxrem(20);
+                padding: 0px;
+                border: 0;
+                background-color: transparent;
+
+                &:before, &:after {
+                    content: "";
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translateX(-50%) translateY(-50%);
+                    background-color: $c-dashboard-error;
+                }
+
+                &:before {
+                    width: 2px;
+                    height: 50%;
+                }
+
+                &:after {
+                    width: 50%;
+                    height: 2px;
+                }
             }
         }
 

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

@@ -162,7 +162,9 @@
                                     $current_image = "/uploads/$model/img/$id-" . $column['name'] . '.' . $ext;
                                 @endphp
 
-                                <input class="image-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" />
+                                <div class="upload-wrapper">
+                                    <input class="image-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" /> <button type="button" class="clear-upload" title="Clear Upload"></button>
+                                </div>
 
                                 @if(file_exists(base_path() . '/public' . $current_image))
                                     <div id="current-image-{{ $column['name'] }}">
@@ -180,7 +182,9 @@
                                     $current_file = "/uploads/$model/files/$id-" . $column['name'] . '.' . $column['ext'];
                                 @endphp
 
-                                <input class="file-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" />
+                                <div class="upload-wrapper">
+                                    <input class="file-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" /> <button type="button" class="clear-upload" title="Clear Upload"></button>
+                                </div>
 
                                 @if(file_exists(base_path() . '/public' . $current_file))
                                     <div id="current-file-{{ $column['name'] }}">

resources/views/errors/404.blade.php

@@ -1 +1,3 @@
-@extends('templates.error')
+@extends('templates.error', [
+    'title' => 'Page Not Found'
+])