From 7ec8ae81c2751c6e79339759d5f13d5a67efc2cc Mon Sep 17 00:00:00 2001
From: Vipul A M <vipul@saeloun.com>
Date: Sat, 30 Mar 2024 08:41:40 -0400
Subject: [PATCH] Document know issue about turbolinks and hotwire caching 
 (#136)

* Document know issue about turbolinks and hotwired caching and showing multiple file elements. Fixes #134

* Add example code to not use jquery so its simpler
---
 README.md | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/README.md b/README.md
index cc9cf78..b954307 100644
--- a/README.md
+++ b/README.md
@@ -284,6 +284,50 @@ The value will be available in the controller by `params[:post][:picture]`.
 
 The helper is detecting the value of the `multiple` property based on the mount type in your model.
 
+### Caching issues with Turbolinks/Hotwire
+
+If you are facing issue, with multiple input elements being rendered due to turbolinks caching you can append this fix in the `app/javascript/application.js` to overcome this:
+
+```
+document.addEventListener('turbolinks:before-cache', function() {
+    const dialogClose = document.querySelector('.uploadcare--dialog__close');
+    if (dialogClose) {
+        dialogClose.dispatchEvent(new Event('click'));
+    }
+
+    const dialog = document.querySelector('.uploadcare--dialog');
+    if (dialog) {
+        dialog.remove();
+    }
+
+    const widgets = document.querySelectorAll('.uploadcare--widget');
+    widgets.forEach(widget => {
+        widget.remove();
+    });
+});
+```
+
+Similarly if you are using [Hotwire](https://hotwired.dev/) then use can you use below code:
+
+```
+document.addEventListener('turbo:before-cache', function() {
+    const dialogClose = document.querySelector('.uploadcare--dialog__close');
+    if (dialogClose) {
+        dialogClose.dispatchEvent(new Event('click'));
+    }
+
+    const dialog = document.querySelector('.uploadcare--dialog');
+    if (dialog) {
+        dialog.remove();
+    }
+
+    const widgets = document.querySelectorAll('.uploadcare--widget');
+    widgets.forEach(widget => {
+        widget.remove();
+    });
+});
+```
+
 ### File and Group wrappers
 
 When you mount either Uploadcare File or Group to an attribute, this attribute is getting wrapped with