bugfix for elements

README.md

@@ -11,7 +11,7 @@ npm install @tiny-components/upload --save
 ## You can use it like this
 
 ```javascript
-<form class="form" onsubmit={ (event) => ( state.validator.submit(event) ) }>>
+<form class="form" onsubmit={ (event) => ( state.validator.submit(event) ) }>
     <div class="field">
         <label>
             email
@@ -22,3 +22,7 @@ npm install @tiny-components/upload --save
     <button type="submit">Send</button>
 </form>
 ```
+
+## Icons
+
+[https://www.svgrepo.com/collection/pixelarticons-interface-icons/](https://www.svgrepo.com/collection/pixelarticons-interface-icons/)

example/index.html

@@ -31,12 +31,12 @@
     <div class="container">
         <div class="grid">
             <div class="col-12">
-                <form class="form-html m-top-7" novalidate method="post">
+                <form class="form-html m-top-7" novalidate method="post" enctype="multipart/form-data">
                     <div class="field-group">
                         <tiny-field-upload label="Add Files" name="file" max="2" multiple></tiny-field-upload>
                         <field-error name="file"></field-error>
                     </div>
-                    <button class="button" type="submit" disabled>
+                    <button class="button" type="submit">
                         Send
                     </button>
                 </form>
@@ -44,6 +44,6 @@
         </div>
     </div>
 
-    <script type="text/javascript" src="/js/index.js"></script>
+    <script type="text/javascript" defer src="/js/index.js"></script>
 </body>
 </html>

src/example.js

@@ -4,3 +4,10 @@ import FieldUpload from './fieldUpload.riot'
 
 riot.register('tiny-field-upload', FieldUpload)
 riot.mount('tiny-field-upload')
+
+const form = document.querySelector('form')
+
+form.addEventListener('submit', (event) => {
+    event.preventDefault()
+    console.log(event)
+})

src/fieldUpload.riot

@@ -2,7 +2,7 @@
     <div class="tiny-field-upload">
         <input type="file" class="tiny-field-upload__field" multiple={ props.multiple !== undefined } onchange={ (event) => { handleSelectFile(event) } } />
         <button class="button button--info" type="button" onclick={ (event) => { handleOpenFileManager(event) } } disabled={ state.disabled }>
-            <svg class="icon fill-text-contrast" aria-hidden="true">
+            <svg class="icon m-right-3" aria-hidden="true">
                 <use xlink:href="/symbol-defs.svg#icon-upload"></use>
             </svg>
             { props.label }
@@ -43,7 +43,10 @@
             {
                 files: [],
                 field: undefined,
-                disabled: false
+                disabled: false,
+
+                TINY_FIELD_UPLOAD_FIELD: '.tiny-field-upload__field',
+                TINY_FIELD_UPLOAD_FILES_ITEM: '.tiny-field-upload__files-item'
             },
 
             /**
@@ -53,30 +56,28 @@
             onMounted()
             {
                 // getting field for getting files 
-                this.field = this.$('.tiny-field-upload__field')
+                this.field = this.$(this.state.TINY_FIELD_UPLOAD_FIELD)
             },
 
             /**
              *  after update
              *
              */
-            onUpdated(props, state) {
+            onUpdated() {
 
                 // getting elements
-                const elements = this.$$('.tiny-field-upload__item input')
+                const elements = this.$$(this.state.TINY_FIELD_UPLOAD_FILES_ITEM + ' input')
             
                 let index = 0
 
                 // adding for each element a file-input
-                if (elements.length > 0) {
                 for (const element of elements) {
                     const dataTransfer = new DataTransfer()
 
                     // adding to each input field a file form files
-                        dataTransfer.items.add(state.files[index++]);
+                    dataTransfer.items.add(this.state.files[index++]);
                     element.files = dataTransfer.files
                 }
-                }
             },
 
             /**

src/upload.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 4h6v2h-6V4zM8 8V6h2v2H8zm-4 2V8h4v2H4zm-2 2v-2h2v2H2zm0 6H0v-6h2v6zm0 0h7v2H2v-2zM18 8h-2V6h2v2zm4 4h-4V8h2v2h2v2zm0 6v-6h2v6h-2zm0 0v2h-7v-2h7zM11 9h2v2h2v2h2v2h-4v5h-2v-5H7v-2h2v-2h2V9z" fill="#000000"/>
+</svg>

webpack.config.js

@@ -15,7 +15,8 @@ module.exports = tinyComponentsWebpack({
         rules: [ riotRules ],
         svg: {
             src: [
-                'node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg'
+                'node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg',
+                'src/*.svg'
             ]
         },
         purge: {