Add rejected files list

src/lib/Dropzone.svelte

@@ -1,6 +1,6 @@
 <script>
   export let files;
-  export let acceptedFiles;
+  export let supportedFormats;
   export let onKeydown;
   export let onClick;
   export let onDrop;
@@ -23,7 +23,7 @@
     id="file-input"
     type="file"
     name="files[]"
-    accept={acceptedFiles.join(",")}
+    accept={supportedFormats.join(",")}
     multiple
     on:change={onChange}
     bind:files

src/lib/FileList.svelte

@@ -1,12 +1,14 @@
 <script>
+  export let title;
   export let files = [];
+  export let isError = false;
 </script>
 
 {#if files.length !== 0}
   <div id="selected-files-container">
-    <h2>Selected files:</h2>
+    <h2>{title}:</h2>
     {#each Array.from(files) as file}
-      <div id="selected-file-card">
+      <div id={isError ? "selected-file-card-error" : "selected-file-card"}>
         <p>{file.name} ({file.size / 1000} kb)</p>
       </div>
     {/each}
@@ -21,6 +23,14 @@
     margin-top: 10px;
   }
 
+  #selected-file-card-error {
+    border: 1px solid red;
+    width: 500px;
+    padding-left: 15px;
+    margin-top: 10px;
+    color: red;
+  }
+
   @media only screen and (max-device-width: 812px) {
     #selected-files-container {
       width: 100%;

src/lib/FileViewer.svelte

@@ -3,10 +3,15 @@
   import Dropzone from "./Dropzone.svelte";
   import FileList from "./FileList.svelte";
 
+  import { filterFileRequirements } from "../utils/filterFileRequirements";
+
   let files;
   let filesRendered = false;
-  const acceptedFiles = [".pes"];
-  const maxFileSize = 700000;
+  let filesRejected;
+  const fileRequirements = {
+    supportedFormats: [".pes"],
+    maxSize: 700000,
+  };
 
   const onSubmit = () => {
     filesRendered = true;
@@ -23,18 +28,10 @@
     const changedFiles = evt.dataTransfer
       ? evt.dataTransfer.files
       : evt.target.files;
-    let filesToUpload = [];
-    for (var i = 0, file; (file = changedFiles[i]); i++) {
-      if (file) {
-        if (file.size <= maxFileSize) {
-          filesToUpload.push(file);
-        } else {
-          console.log("File too large!");
-          console.log(file);
-        }
-      }
-    }
-    files = filesToUpload;
+
+    const results = filterFileRequirements(changedFiles, fileRequirements);
+    files = results.accepted;
+    filesRejected = results.rejected;
   };
 
   const onClick = () => {
@@ -55,11 +52,19 @@
 >
   <h2>Upload files</h2>
   <p>
-    Max file size is <strong>{maxFileSize / 1000}kb</strong>. Accepted formats:
-    <strong>{acceptedFiles.join(",")}</strong>.
+    Max file size is <strong>{fileRequirements.maxSize / 1000}kb</strong>.
+    Accepted formats:
+    <strong>{fileRequirements.supportedFormats.join(",")}</strong>.
   </p>
 
-  <Dropzone {files} {acceptedFiles} {onKeydown} {onClick} {onDrop} {onChange} />
+  <Dropzone
+    {files}
+    supportedFormats={fileRequirements.supportedFormats}
+    {onKeydown}
+    {onClick}
+    {onDrop}
+    {onChange}
+  />
 
   <input type="submit" value="Render files" />
 </form>
@@ -67,7 +72,8 @@
 {#if filesRendered}
   <CardList {files} />
 {:else}
-  <FileList {files} />
+  <FileList title="Rejected Files" files={filesRejected} isError />
+  <FileList title="Selected Files" {files} />
 {/if}
 
 <style>

src/utils/filterFileRequirements.js

@@ -0,0 +1,20 @@
+export function filterFileRequirements(files, requirements) {
+  let accepted = [];
+  let rejected = [];
+  for (var i = 0, file; (file = files[i]); i++) {
+    if (file) {
+      if (
+        requirements.maxSize >= file.size &&
+        requirements.supportedFormats.includes(
+          `.${file.name.split(".").pop().toLowerCase()}`
+        )
+      ) {
+        accepted.push(file);
+      } else {
+        rejected.push(file);
+      }
+    }
+  }
+
+  return { accepted, rejected };
+}