client/src/components/UploadGame.vue

   1 <template lang="pug">
   2 div
   3   input#upload(type="file" @change="upload")
   4   button#uploadBtn(
   5     @click="uploadTrigger()"
   6     aria-label="store.state.tr['Upload a game']"
   7   )
   8     img.inline(src="/images/icons/upload.svg")
   9 </template>
  10
  11 <script>
  12 export default {
  13   name: "my-upload-game",
  14   methods: {
  15     uploadTrigger: function() {
  16           document.getElementById("upload").click();
  17         },
  18         upload: function(e) {
  19             const file = (e.target.files || e.dataTransfer.files)[0];
  20             var reader = new FileReader();
  21             reader.onloadend = ev => {
  22                 this.parseAndEmit(ev.currentTarget.result);
  23             };
  24             reader.readAsText(file);
  25         },
  26     parseAndEmit: function(pgn) {
  27       // TODO: header gives game Info, third secton the moves
  28       let game = {};
  29       // mark sur ID pour dire import : I_
  30       this.$emit("game-uploaded", game);
  31     }
  32   }
  33 };
  34 </script>
  35
  36 <style lang="sass" scoped>
  37 input#upload
  38   display: none
  39
  40 button#uploadBtn
  41   display: block
  42   margin: 0 auto
  43
  44 img.inline
  45   height: 22px
  46   @media screen and (max-width: 767px)
  47     height: 18px
  48 </style>