forget-cancellare-vecchi-toot/components/ArchiveForm.html

<form action={action} method='post' enctype='multipart/form-data'>
    {#if file_too_big}
        <div class="banner warning">
            <p>The file you have selected is very large.</p>

            <p>Twitter has two types of archives, <b>Forget does not support
                "Your Twitter data" archives, only "Tweet archives"</b>
            available from
            <a href="https://twitter.com/settings/account#export_request">your account settings</a>.
            Please make sure you have the right type of archive.</p>
        </div>
    {/if}
    <input type="file" name="file" accept="application/zip,.zip"
        on:change="take_file(this.files)">
    <input type="submit" value="Upload">
    <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;
    for(let i = 0; i < file_list.length; i++){
        size += file_list[i].size;
    }
    return size;
}


export default {
    data(){
        return { file_size: 0 }
    },

    oncreate(){
    },

    methods: {
        take_file(file_list){
            this.set({file_size: get_file_size(file_list)});
        },
    },

    computed: {
        file_too_big: ({file_size}) => file_size > 10000000, // 10 MB
    },
}
</script>