Add image deletion

resources/js/components/DetailField.vue

@@ -13,7 +13,7 @@
 
         computed: {
             url() {
-                return this.field.value
+                return this.field.value.preview_url
             },
 
             width() {
@@ -22,7 +22,7 @@
 
             height() {
                 return this.field.height || '12rem'
-            }
-        }
+            },
+        },
     }
 </script>

resources/js/components/FormField.vue

@@ -156,10 +156,7 @@
 
                 const { resourceName, resourceId, relatedResourceName, relatedResourceId, viaRelationship } = this
                 const attribute = this.field.attribute
-
-                const uri = this.viaRelationship
-                    ? `/nova-api/${resourceName}/${resourceId}/${relatedResourceName}/${relatedResourceId}/field/${attribute}?viaRelationship=${viaRelationship}`
-                    : `/nova-api/${resourceName}/${resourceId}/field/${attribute}`
+                const uri = `/nova-vendor/jameslkingsley/nova-media-library/${this.field.value.id}`
 
                 try {
                     await Nova.request().delete(uri)
@@ -178,7 +175,7 @@
 
         computed: {
             imageUrl() {
-                return this.previewUrl ? this.previewUrl : this.field.value
+                return this.previewUrl ? this.previewUrl : this.field.value.preview_url
             },
 
             hasError() {

resources/js/components/IndexField.vue

@@ -4,21 +4,22 @@
 </template>
 
 <script>
-export default {
-    props: ['resourceName', 'field'],
+    export default {
+        props: ['resourceName', 'field'],
 
-    computed: {
-        url() {
-            return this.field.value
+        computed: {
+            url() {
+                return this.field.value.preview_url
+            },
+
+            style() {
+                return {
+                    backgroundImage: `url(${this.url})`,
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: '50%',
+                    backgroundSize: 'cover',
+                }
+            },
         },
-        style() {
-            return {
-              backgroundImage: `url(${this.url})`,
-              backgroundRepeat: 'no-repeat',
-              backgroundPosition: '50%',
-              backgroundSize: 'cover'
-            }
-        }
-    },
-}
+    }
 </script>

src/Fields/Image.php

@@ -2,6 +2,7 @@
 
 namespace Kingsley\NovaMediaLibrary\Fields;
 
+use Illuminate\Support\Str;
 use Illuminate\Http\Request;
 use Laravel\Nova\Fields\Field;
 use Laravel\Nova\Fields\Deletable;
@@ -19,6 +20,20 @@ class Image extends Field implements DeletableContract
      */
     public $component = 'nova-media-library-image-field';
 
+    /**
+     * Create a new field.
+     *
+     * @return void
+     */
+    public function __construct(...$arguments)
+    {
+        parent::__construct(...$arguments);
+
+        $this->delete(function () {
+            //
+        });
+    }
+
     /**
      * Hydrate the given attribute on the model based on the incoming request.
      *
@@ -66,17 +81,17 @@ protected function resolveAttribute($resource, $attribute)
         $conversion = $this->meta()['usingConversion'] ?? [];
         $media = $resource->getFirstMedia($collection);
 
-        if (empty($media)) {
-            return null;
-        }
+        if ($media) {
+            if ($media->hasGeneratedConversion($conversion)) {
+                $media->preview_url = url($media->getUrl($conversion));
+            } else {
+                $media->preview_url = url($media->getUrl());
+            }
 
-        if ($media->hasGeneratedConversion($conversion)) {
-            $media = $media->getUrl($conversion);
-        } else {
-            $media = $media->getUrl();
+            return $media;
         }
 
-        return url($media);
+        return null;
     }
 
     /**

src/Http/Controllers/MediaController.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace Kingsley\NovaMediaLibrary\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Spatie\MediaLibrary\Models\Media;
+
+class MediaController extends Controller
+{
+    /**
+     * Deletes the given media resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(Request $request, Media $media)
+    {
+        $media->delete();
+    }
+}

src/NovaMediaLibraryServiceProvider.php

@@ -9,6 +9,7 @@
 use Spatie\MediaLibrary\Models\Media;
 use Illuminate\Support\ServiceProvider;
 use Kingsley\NovaMediaLibrary\Policies\MediaPolicy;
+use Kingsley\NovaMediaLibrary\Http\Controllers\MediaController;
 
 class NovaMediaLibraryServiceProvider extends ServiceProvider
 {
@@ -23,6 +24,26 @@ public function boot()
             Nova::script('nova-media-library', __DIR__.'/../dist/js/app.js');
             Nova::style('nova-media-library', __DIR__.'/../dist/css/app.css');
         });
+
+        $this->app->booted(function () {
+            $this->routes();
+        });
+    }
+
+    /**
+     * Register the field's routes.
+     *
+     * @return void
+     */
+    protected function routes()
+    {
+        if ($this->app->routesAreCached()) {
+            return;
+        }
+
+        Route::middleware(['nova'])
+            ->prefix('nova-vendor/jameslkingsley/nova-media-library')
+            ->delete('{media}', MediaController::class . '@destroy');
     }
 
     /**