fix: Refactor file upload components and simplify CSS styles

frankpagan · frankpagan · commit 52f2671526ca · 2023-06-22T09:31:20.000-06:00
- Replaced uppy with a simple form with a file input and a preview template.
- Updated CSS styles to simplify styling and remove unnecessary code.
diff --git a/src/builder/components/left-panel.html b/src/builder/components/left-panel.html
@@ -42,10 +42,7 @@
             class="builder-tab-round"
             selected-value="active"
             selected-target="#uploader"
-            selected-group="left-panels"
-            toggle="uppy"
-            toggle-target="#uppy"
-            toggle-attribute="uploader">
+            selected-group="left-panels">
             <i
                 class="height:16px fill:#505050"
                 src="/assets/svg/cloud-upload-alt.svg"></i>
@@ -265,15 +262,23 @@
 
         <!-- uploader -->
         <div id="uploader" class="left-panel display:none">
-            <style>
-                .uppy-Dashboard-inner {
-                    background-color: whitesmoke !important;
-                }
-                .uppy-DashboardTab-btn {
-                    justify-content: flex-start;
-                }
-            </style>
-            <div id="uppy" uploader="uppy" collection="files"></div>
+            <form>
+                <input
+                    type="file"
+                    directory
+                    template_id="file-preview"
+                    collection="files" />
+
+                <button actions="upload">upload</button>
+            </form>
+
+            <div template="file-preview">
+                <input file="name" value="{{name}}" />
+                <input file="directory" value="{{directory}}" />
+                <input file="content-type" value="{{content-type}}" />
+
+                <textarea file="src" value-type="string">{{src}}</textarea>
+            </div>
         </div>
 
         <!-- Files -->
diff --git a/src/builder/index.css b/src/builder/index.css
@@ -30,14 +30,6 @@ a {
     display: block
 }
 
-.uppy-Dashboard-inner {
-    background-color: whitesmoke!important;
-}
-
-.uppy-DashboardTab-btn {
-    justify-content: flex-start;
-}
-
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
     opacity: 1;
diff --git a/src/files/form.html b/src/files/form.html
@@ -338,11 +338,25 @@ <h4>{{document.name}}</h4>
                     </floating-label>
                 </div>
                 <div id="uploader" class="uploader" hidden>
-                    <div
-                        uploader="uppy"
-                        collection="files"
-                        document_id=""
-                        pass_id="form-fields"></div>
+                    <form>
+                        <input
+                            type="file"
+                            directory
+                            template_id="file-preview"
+                            collection="files" />
+
+                        <button actions="upload">upload</button>
+                    </form>
+
+                    <div template="file-preview">
+                        <input file="name" value="{{name}}" />
+                        <input file="directory" value="{{directory}}" />
+                        <input file="content-type" value="{{content-type}}" />
+
+                        <textarea file="src" value-type="string">
+                            {{src}}
+                        </textarea>
+                    </div>
                 </div>
                 <button
                     show=".uploader, .form-fields"
