From 2bc5dd0d7407decb97874812d0389cc1b1739f26 Mon Sep 17 00:00:00 2001
From: Andreia Bohner <andreiabohner@gmail.com>
Date: Sun, 12 Sep 2021 23:07:32 -0300
Subject: [PATCH 1/2] Add support to multiple Uppy instances

---
 resources/views/components/input/uppy.blade.php |  8 ++++----
 src/View/Components/Input/Uppy.php              | 13 ++++++-------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/resources/views/components/input/uppy.blade.php b/resources/views/components/input/uppy.blade.php
index a796727..041adeb 100644
--- a/resources/views/components/input/uppy.blade.php
+++ b/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>
diff --git a/src/View/Components/Input/Uppy.php b/src/View/Components/Input/Uppy.php
index 8fa07ef..276b537 100644
--- a/src/View/Components/Input/Uppy.php
+++ b/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';
-        }
     }
 
     /**

From 6a9d6b439dea3d2fe94c11358f2986dec1724723 Mon Sep 17 00:00:00 2001
From: Andreia Bohner <andreiabohner@gmail.com>
Date: Wed, 15 Sep 2021 17:57:35 -0300
Subject: [PATCH 2/2] Update README

---
 README.md | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/README.md b/README.md
index 07fd7ca..60c3afc 100644
--- a/README.md
+++ b/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: