gistfile1.txt

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

slide.vue

<template>
  <div class="hello">
    <h2>Testing UI</h2>
        <form @submit.prevent="onSubmit" action="http://localhost:8000" method="post" enctype="multipart/form-data">
            <select name="region" id="reg" v-model="region">
                <option v-for="region in regions" :value="region">{{region}}</option>
            </select>
            <div v-for="slide in slides">
                <input type="checkbox" v-on:click="slide.active = !slide.active">
                {{ slide.name }}
                <span v-if="slide.active">
                <input type="text" :name="slide.name + '_region'" :value="slide.regions[region]">
                <input type="file" @change="changeFile($event, slide.name)">
                </span>
            </div>
            <input type="submit" value="Submit">
        </form>
  </div>
</template>

<script>

export default {
    name: 'slides',
    data () {
        return {
            slides: [
                {
                    name: 'C',
                    active: false,
                    file: null,
                    regions: {
                        Ti: 'Ti',
                        Be: 'Be'
                    }
                },
                {
                    name: 'D',
                    active: false,
                    file: null,
                    regions: {
                        Ti: 'TI',
                        Be: 'BE'
                    }
                }
            ],
            regions: [ 'Ticino', 'Bern' ],
            region: 'Ticino'
        }
    },
    methods: {
        onSubmit: function () {
            var req = new XMLHttpRequest()
            req.overrideMimeType('application/json')
            req.open('POST', 'http://localhost:8000/', false)
            req.send(JSON.stringify(this.slides))
            console.log(req.responseText)
        },
        changeFile: function (e, slideName) {
            let slides = this.slides
            var reader = new FileReader()
            reader.readAsDataURL(e.target.files[0])
            reader.onload = function () {
                for (let i = 0; i < slides.length; i++) {
                    if (slides[i].name === slideName) {
                        slides[i].file = reader.result.split('base64,')[1]
                        return
                    }
                }
            }
            reader.onerror = function (error) {
                alert('Error: ' + error)
            }
        }
    }
}
</script>