Vue File Uploader

vue-file-uploader.vue

//template

<div class="picWrapper">
    <h3>Update Image</h3>
    <div class="image-flex-wrapper">
        <input type="file" @change="previewImage" accept="image/*">
        <div class="image-preview" v-if="!!imageData.length">
            <img class="preview" :src="imageData" alt="">
        </div>
        <div class="image-preview" v-else>
            <img class="preview" :src="selectedImageURL" alt="">
        </div>
    </div>
</div>

<v-btn @click.prevent="handleSubmit" style="background-color: #F4812D; color: white;">Update</v-btn>

---------------------------

data() {
    return {
        beer: {},
        statuses: ["upcoming", "brewing", "active-full", "active-empty", "past"],
        selectedStatus: null,
        selectedBrewers: [],
        name: "",
        alcoholContent: null,      
        description: null,
        startingBrewers: {},
        file: null,
        imageData: "",
        selectedImageURL: null,
        featured: null,
        dialog: false,
    }
},

---------------------------------
// methods

previewImage(event) {
    let input = event.target
    if (input.files && input.files[0]) {
        let reader = new FileReader()
        reader.onload = (e) => {
            this.imageData = e.target.result
        }
        reader.readAsDataURL(input.files[0])
        this.file = input.files[0]
    }
},

async handleSubmit() {
    let data = new FormData()            
    if (this.file) {
        data.append("image", this.file, this.file.name)
    }

    data.append("name", this.name)
    data.append("description", this.description)
    data.append('alcohol_content', this.alcoholContent)
    data.append('featured', this.featured)
    data.append('brewer_ids', this.selectedBrewers)
    data.append('status', this.selectedStatus)
    
    let statusText = await this.updateBeer({id: this.currentBeer.id, data: data})
    if (statusText = "OK") {
        this.$router.push('/')
    } else {
        console.log("Error occurred: ", statusText)
    }  
},

-----------------------------------
// styles

.picWrapper {
    border-top: 1px solid rgba(0,0,0,0.3);

    h3 {
        text-align: left;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .image-flex-wrapper {
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-start;

        input {
            margin-bottom: 20px;
        }
    }

    .image-preview {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        height: 200px;
    }
    img.preview {
        max-height: 200px;            
        height: inherit;
        background-color: white;
        border: 1px solid #DDD;
        padding: 5px;
    }
}