Merge pull request #4 from TappNetwork/add_support_to_multiple_uppy_instances

Add support to multiple Uppy instances

Author: andreia

README.md

@@ -362,6 +362,43 @@ Default drag & drop options if none is informed:
 }
 ```
 
+**Upload Element Class**
+
+Use the `uploadElementClass` attribute to provide the class of the HTML element used for upload:
+
+```php
+$imageClass = 'images';
+```
+
+```html
+<x-input.uppy :uploadElementClass="$imageClass" />
+```
+
+The `upload` class will be used if none is provided.
+
+**Multiple Uppy Instances**
+
+If you want to use multiple Uppy instances, add a different `uploadElementClass` attribute to each instance. E.g.:
+
+```html
+<!-- First Uppy instance for image uploads -->
+<div>
+    <input type="hidden" name="images" id="images" />
+    <x-input.uppy :options="$imageOptions" :hiddenField="$imageField" :uploadElementClass="$imageClass" />
+</div>
+
+
+<!-- Second Uppy instance for video uploads -->
+<div>
+    <input type="hidden" name="videos" id="videos" />
+    <x-input.uppy :options="$videoOptions" :hiddenField="$videoField" :uploadElementClass="$videoClass" />
+</div>
+```
+
+**Note from Uppy docs**: _"If multiple Uppy instances are being used, for instance, on two different pages,
+an id should be specified. This allows Uppy to store information in localStorage without colliding with other Uppy instances."_
+[Learn more here](https://uppy.io/docs/uppy/#id-39-uppy-39).
+
 **Extra JavaScript to onUploadSuccess**
 
 If you need to add extra JavaScript code on `onUploadSuccess` function, use the `extraJSForOnUploadSuccess` attribute:

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';
-        }
     }
 
     /**