add warning when trying to upload a large twitter archive

assets/settings.js

@@ -1,4 +1,5 @@
 import Banner from '../components/Banner.html';
+import ArchiveForm from '../components/ArchiveForm.html';
 
 (function settings_init(){
     if(!('fetch' in window)){
@@ -188,4 +189,19 @@ import Banner from '../components/Banner.html';
             reason_banner.parentElement.removeChild(reason_banner);
         })
     }
+
+    let archive_form_el = document.querySelector('#archive-form');
+    console.log('uh');
+    if(archive_form_el){
+        console.log('hey');
+        let csrf_token = archive_form_el.querySelector('input[name=csrf-token]').value;
+        let archive_form = new ArchiveForm({
+            target: archive_form_el,
+            hydrate: true,
+            data: {
+                action: archive_form_el.action,
+                csrf_token: csrf_token,
+            },
+        })
+    }
 })();

components/ArchiveForm.html

@@ -0,0 +1,47 @@
+<form action={action} method='post' enctype='multipart/form-data'>
+    {#if file_too_big}
+        <div class="banner warning">
+            The file you've selected is too large to upload.
+            blah
+        </div>
+    {/if}
+    <input type="file" name="file" accept="application/zip,.zip"
+        on:change="take_file(this.files)">
+    <input type="submit" value="Upload" disabled={file_too_big}>
+    <input type='hidden' name='csrf-token' value={csrf_token}>
+</form>
+
+<script>
+function get_file_size(file_list){
+    /* returns size of selected file given an <input type="file">
+        or 0 if no file is selected */
+    let size = 0;
+    console.log('ahh');
+    for(let i = 0; i < file_list.length; i++){
+        size += file_list[i].size;
+        console.log(size);
+    }
+    return size;
+}
+
+
+export default {
+    data(){
+        return { file_size: 0 }
+    },
+
+    oncreate(){
+        console.log('hello');
+    },
+
+    methods: {
+        take_file(file_list){
+            this.set({file_size: get_file_size(file_list)});
+        },
+    },
+
+    computed: {
+        file_too_big: ({file_size}) => file_size > 20000000, // 20 MB
+    },
+}
+</script>

rollup.config.js

@@ -7,6 +7,7 @@ export default {
     plugins: [
         svelte({
             include: 'components/**/*.html',
+            hydratable: true,
         }),
     ]
 }

templates/logged_in.html

@@ -148,7 +148,7 @@
     <div class="banner error">The file you uploaded is not a valid tweet archive. No posts have been imported.</div>
     {% endif %}
 
-    <form action='{{url_for('upload_tweet_archive')}}' method='post' enctype='multipart/form-data'>
+    <form action='{{url_for('upload_tweet_archive')}}' method='post' enctype='multipart/form-data' id='archive-form'>
         <input type="file" name='file' accept='application/zip,.zip'><input type="submit" value="Upload">
         <input type='hidden' name='csrf-token' value='{{g.viewer.csrf_token}}'>
     </form>