<template>
  <section class="py-5 text-center container">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
        <h1 class="fw-light">Skin Disease Detection</h1>
        <p class="lead text-muted">
          Know more about your skin, before it's too late!
        </p>
        <form enctype="multipart/form-data" style="display: none">
          <input
            ref="skinImgInput"
            accept="image/*"
            type="file"
            @change="onImgChanged"
          />
        </form>
        <button
          type="button"
          class="btn btn-primary my-2"
          @click="onPickClicked"
        >
          Pick a Image
        </button>
      </div>
    </div>
  </section>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      selectedImgFile: "",
    };
  },

  methods: {
    _uploadImgUrl() {
      return process.env.VUE_APP_API_ROOT + "/DiseaseDetect";
    },
    onPickClicked() {
      this.$refs.skinImgInput.click();
    },
    onImgChanged(e) {
      const f = e.target.files[0];
      this.selectedImgFile = f;

      const formData = new FormData();
      formData.append("image", f);

      const config = {
        headers: { "Content-Type": "multipart/form-data" },
      };

      axios.post(this._uploadImgUrl(), formData, config).then((res) => {
        console.log(res.status);
      });
    },
  },
};
</script>

<style></style>
