Expose inputRef and and add required prop to allow html5 validations fixes #93

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "build": "rollup -c",
     "prepublishOnly": "npm run build",
+    "prepare": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"

src/components/Dropzone.svelte

@@ -32,6 +32,8 @@
   export let containerStyles = "";
   export let disableDefaultStyles = false;
   export let name = "";
+  export let inputRef;
+  export let required = false;
   const dispatch = createEventDispatcher();
 
   //state
@@ -44,11 +46,10 @@
     isDragReject: false,
     draggedFiles: [],
     acceptedFiles: [],
-    fileRejections: []
+    fileRejections: [],
   };
 
   let rootRef;
-  let inputRef;
 
   function resetState() {
     state.isFileDialogActive = false;
@@ -211,6 +212,11 @@
           acceptedFiles.splice(0);
         }
 
+        // Files dropped keep input in sync
+        if (event.dataTransfer) {
+          inputRef.files = event.dataTransfer?.files;
+        }
+
         state.acceptedFiles = acceptedFiles;
         state.fileRejections = fileRejections;
 
@@ -339,18 +345,21 @@
   on:dragenter={composeDragHandler(onDragEnterCb)}
   on:dragover={composeDragHandler(onDragOverCb)}
   on:dragleave={composeDragHandler(onDragLeaveCb)}
-  on:drop={composeDragHandler(onDropCb)}>
+  on:drop={composeDragHandler(onDropCb)}
+>
   <input
     {accept}
     {multiple}
+    {required}
     type="file"
-    name={name}
+    {name}
     autocomplete="off"
     tabindex="-1"
     on:change={onDropCb}
     on:click={onInputElementClick}
     bind:this={inputRef}
-    style="display: none;" />
+    style="display: none;"
+  />
   <slot>
     <p>Drag 'n' drop some files here, or click to select files</p>
   </slot>