<template>
  <div class="hello">
<h1>{{ msg }}</h1>
<input type="file" @change="on_change" />
  </div>
</template>

<script>
const ipfsAPI = require("ipfs-api");
export default {
  name: "HelloWorld",
  data() {
return {
  msg: "Welcome to Your Vue.js App",
};
  },
  methods: {
async on_change(e) {
  console.log(e.target.value);
  let file = e.target.files[0];
  const ipfs = ipfsAPI({
host: "3.35.231.32",
port: "5001",
protocol: "http",
  });
  let reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onloadend = (e) => {
console.log(reader);
new Promise(function (resolve, reject) {
  const buffer = Buffer.from(reader.result);
  ipfs
.add(buffer)
.then((response) => {
  console.log(response);
  resolve(response[0].hash);
})
.catch((err) => {
  console.error(err);
  reject(err);
});
});
  };
},
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>