<template>
  <f7-page name="about">
    <f7-navbar title="About" back-link="Back"></f7-navbar>
    <f7-block-title>About My App</f7-block-title>
    <f7-block strong>
      <p>
        Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis
        sint nemo consequuntur, fugiat. Eius perferendis animi autem incidunt
        vel quod tenetur nostrum, voluptate omnis quasi quidem illum
        consequuntur, a, quisquam.
      </p>

      <div>
        <input
          type="file"
          accept="image/*"
          @change="uploadImage($event)"
          id="file-input"
        />
      </div>
    </f7-block>
  </f7-page>
</template>
<script>
//import axios from "axios";
import axios from "axios";
import VueAxios from "vue-axios";
export default {
  name: "imageUpload",
  data() {
    return {
      previewImage: null,
      updateResponse: null,
    };
  },
  methods: {
    uploadImage(event) {
      const URL = "https://penpalamerica.com/penpalamerica/upload/php/upload.php";

      let data = new FormData();
      data.append("name", "photo");
      data.append("photo", event.target.files[0]);

      let config = {
        header: {
          "Content-Type": "image/png",
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
        },
      };
      // this.$f7ready((f7) => {
      // const self = this;
      //const app = self.$f7;
      //app.request({
      // method: "POST",
      //url: URL,
      // ContentType: "image/png",
      // success: function (data) {
      //  console.log(data);
      //  var obj = JSON.parse(data);
      //  self.updateResponse = obj;
      //   console.log(obj[0].message);
      //  },
      //  error: function (err) {
      //    console.log(err);
      //   },
      // });
      //});
      axios.post(URL, data, config).then((response) => {
        //console.log("image upload response > ", response.data[1]);

        var stringified = JSON.stringify(response);
        var obj = JSON.parse(stringified);
        console.log(obj);
        this.updateResponse = obj;
        console.log(obj.data[0].errorNo);
        console.log(response.data[0].message);
      });
    },
  },
};
// missing closure added
</script>



<style>
.uploading-image {
  display: flex;
}
</style>