Add support to multiple Uppy instances

Author: andreia

resources/views/components/input/uppy.blade.php

@@ -24,9 +24,9 @@
             {{ $extraJSForOnUploadSuccess }}
           };
 
-        uppyUpload = new Uppy({{ $options }});
+        uppyUpload{{ $hiddenField }} = new Uppy({{ $options }});
 
-        uppyUpload
+        uppyUpload{{ $hiddenField }}
           .use(DragDrop, {{ $dragDropOptions }})
           .use(AwsS3Multipart, {
               companionUrl: '/',
@@ -36,10 +36,10 @@
               },
           })
           .use(StatusBar, {{ $statusBarOptions }})
-          .on('upload-success', onUploadSuccess('.upload .uploaded-files ol'));
+          .on('upload-success', onUploadSuccess('.{{ $uploadElementClass }} .uploaded-files ol'));
     "
 >
-    <section class="upload">
+    <section class="{{ $uploadElementClass }}">
       <div class="for-DragDrop" x-ref="input"></div>
 
       <div class="for-ProgressBar"></div>

src/View/Components/Input/Uppy.php

@@ -16,18 +16,21 @@ class Uppy extends Component
 
     public string $extraJSForOnUploadSuccess;
 
+    public string $uploadElementClass;
+
     /**
      * Create a new component instance.
      *
      * @return void
      */
-    public function __construct(string $options = '', string $statusBarOptions = '', string $dragDropOptions = '', string $hiddenField = '', $extraJSForOnUploadSuccess = '')
+    public function __construct(string $options = '', string $statusBarOptions = '', string $dragDropOptions = '', string $hiddenField = 'file', string $extraJSForOnUploadSuccess = '', string $uploadElementClass = 'upload')
     {
         $this->options = $options;
         $this->statusBarOptions = $statusBarOptions;
         $this->dragDropOptions = $dragDropOptions;
         $this->hiddenField = $hiddenField;
         $this->extraJSForOnUploadSuccess = $extraJSForOnUploadSuccess;
+        $this->uploadElementClass = $uploadElementClass;
 
         if (!$options) {
             $this->options = '{
@@ -39,20 +42,16 @@ public function __construct(string $options = '', string $statusBarOptions = '',
 
         if (!$statusBarOptions) {
             $this->statusBarOptions = "{
-                target: '.upload .for-ProgressBar',
+                target: '.{$uploadElementClass} .for-ProgressBar',
                 hideAfterFinish: false,
             }";
         }
 
         if (!$dragDropOptions) {
             $this->dragDropOptions = "{
-                target: '.upload .for-DragDrop',
+                target: '.{$uploadElementClass} .for-DragDrop',
             }";
         }
-
-        if (!$hiddenField) {
-            $this->hiddenField = 'file';
-        }
     }
 
     /**