Added missing attributes for Attach field

resources/js/controllers/attach_controller.js

@@ -59,7 +59,6 @@ export default class extends ApplicationController {
             animation: 150,
             onEnd: () => {
                 this.reorderElements();
-                this.toast('save?');
             },
         });
     }
@@ -84,7 +83,7 @@ export default class extends ApplicationController {
 
             if (sizeMB > this.sizeValue) {
                 this.toast(this.errorSizeValue.replace(':name', file.name));
-                alert(this.errorSizeValue.replace(':name', file.name));
+                //alert(this.errorSizeValue.replace(':name', file.name));
                 return;
             }
 
@@ -137,7 +136,7 @@ export default class extends ApplicationController {
                 console.error('Error:', error);
 
                 this.toast(this.errorTypeValue);
-                alert(this.errorTypeValue);
+                //alert(this.errorTypeValue);
             });
     }
 
@@ -156,6 +155,8 @@ export default class extends ApplicationController {
      */
     togglePlaceholderShow() {
         this.containerTarget.classList.toggle('d-none', this.attachmentValue.length >= this.countValue);
+        this.filesTarget.disabled = this.attachmentValue.length > 0;
+
 
         // Disable the nullable field if there is at least one valid value and the count equals 1.
         // If there are no values or if there are multiple values, the field will remain enabled and be sent to the server as `null`.

resources/sass/plugins/attach.scss

@@ -0,0 +1,67 @@
+.attach {
+    .spinner-border {
+        display: none;
+    }
+
+    .attach-image {
+        object-fit: cover;
+        aspect-ratio: 1/1;
+        width: 100%;
+        border: 1px solid #000;
+        position: relative;
+
+        &:before {
+            content: " ";
+            display: block;
+            position: absolute;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            @extend .bg-light;
+        }
+
+        &:after {
+            content: attr(title);
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            text-align: center;
+            text-wrap: pretty;
+            @extend .p-3;
+            @extend .small;
+        }
+    }
+
+    .attach-image-placeholder {
+        aspect-ratio: 1/1;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        cursor: pointer;
+        align-content: center;
+        align-items: center;
+    }
+
+    &[aria-busy='true'],
+    &:not([data-attach-loading-value='0']) {
+        .spinner-border {
+            display: inline-block;
+        }
+
+        .choose {
+            display: none !important;
+        }
+    }
+}
+
+.was-validated {
+    .attach-image-placeholder:has(input:invalid) {
+        border: 1px solid $danger !important;
+    }
+}

resources/sass/plugins/plugin.scss

@@ -346,66 +346,4 @@
     }
 }
 
-
-.attach {
-    .spinner-border {
-        display: none;
-    }
-
-    .attach-image {
-        object-fit: cover;
-        aspect-ratio: 1/1;
-        width: 100%;
-        border: 1px solid #000;
-        position: relative;
-
-        &:before {
-            content:  " ";
-            display:  block;
-            position: absolute;
-            left:     0;
-            height:   100%;
-            width:    100%;
-            @extend .bg-light;
-        }
-
-        &:after {
-            content:         attr(title);
-            white-space:     pre;
-            position:        absolute;
-            top:             0;
-            left:            0;
-            right:           0;
-            bottom:          0;
-            display:         flex;
-            align-items:     center;
-            justify-content: center;
-            width:           100%;
-            text-align:      center;
-            text-wrap:       pretty;
-            @extend .p-3;
-            @extend .small;
-        }
-    }
-
-    .attach-image-placeholder {
-        aspect-ratio: 1/1;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        cursor: pointer;
-        align-content: center;
-        align-items: center;
-    }
-
-    &[aria-busy='true'],
-    &:not([data-attach-loading-value='0']) {
-        .spinner-border {
-            display: inline-block;
-        }
-
-        .choose {
-            display: none !important;
-        }
-    }
-}
+@import "attach";

resources/views/fields/attach.blade.php

@@ -7,8 +7,8 @@ class="attach"
          data-attach-loading-value="0"
          data-attach-attachment-value='@json($value ?? [])'
 
-         data-attach-upload-url-value="{{ route('platform.systems.files.upload') }}"
-         data-attach-sort-url-value="{{ route('platform.systems.files.sort') }}"
+         data-attach-upload-url-value="{{ $uploadUrl ?? route('platform.systems.files.upload') }}"
+         data-attach-sort-url-value="{{ $sortUrl ?? route('platform.systems.files.sort') }}"
 
          data-uploader-error-size-value="{{ __('File ":name" is too large to upload') }}"
          data-uploader-error-type-value="{{ __('The attached file must be an image') }}"
@@ -27,6 +27,7 @@ class="attach"
                            type="file"
                            data-attach-target="files"
                            data-action="change->attach#selectFiles"
+                           disabled
                         {{ $attributes }}
                     >
 
@@ -51,7 +52,7 @@ class="attach"
                 <input type="hidden" name="{name}" value="{id}">
 
 
-                <img class="attach-image rounded border user-select-none" src="{url}" title="{original_name}"/>
+                <img class="attach-image rounded border user-select-none overflow-hidden" src="{url}" title="{original_name}"/>
 
                 {{--
                     <object class="attach-image rounded border user-select-none" border="0" data="{url}" type="{mime}" title="test"  load="lazy" controls allowfullscreen autoplay="false">

src/Screen/Fields/Attach.php

@@ -22,8 +22,10 @@
  * @method Attach   placeholder(string $value)
  * @method Attach   errorMaxSizeMessage(string $value)
  * @method Attach   errorTypeMessage(string $value)
- * @method CheckBox help(string $value = null)
- * @method CheckBox title(string $value = null)
+ * @method Attach   help(string $value = null)
+ * @method Attach   title(string $value = null)
+ * @method Attach   uploadUrl(string $value = null)
+ * @method Attach   sortUrl(string $value = null)
  */
 class Attach extends Field
 {
@@ -46,6 +48,8 @@ class Attach extends Field
         'placeholder'         => 'Upload file',
         'errorMaxSizeMessage' => 'File ":name" is too large to upload',
         'errorTypeMessage'    => 'The attached file must be an image',
+        'uploadUrl'           => null,
+        'sortUrl'             => null,
     ];
 
     /**
@@ -86,7 +90,7 @@ public function __construct()
         $this->addBeforeRender(function () {
             $value = Arr::wrap($this->get('value'));
 
-            if (! Assert::isIntArray($value)) {
+            if (!Assert::isIntArray($value)) {
                 return;
             }
 
@@ -115,20 +119,20 @@ public function __construct()
 
         // if is not multiple, then set maxCount to 1
         $this->addBeforeRender(function () {
-            if (! $this->get('multiple')) {
+            if (!$this->get('multiple')) {
                 $this->set('maxCount', 1);
             }
         });
     }
 
     /**
+     * @return $this
      * @throws \Throwable
      *
-     * @return $this
      */
     public function storage(string $storage): self
     {
-        $disk = config('filesystems.disks.'.$storage);
+        $disk = config('filesystems.disks.' . $storage);
 
         throw_if($disk === null, 'The selected storage was not found');