Line data    Source code

       1             : // @ts-check
       2             : 
       3             : import Vue from "vue";
       4             : import { find, first, get, isNil, split } from "lodash";
       5             : import axios from "axios";
       6             : 
       7             : /**
       8             :  * @typedef {{ input: HTMLInputElement }} Refs
       9             :  */
      10             : 
      11             : export default /** @type {V.Constructor<any, Refs>} */ (Vue).extend({
      12             :   name: "FileDropZone",
      13             :   /**
      14             :    * @return {{
      15             :    *   dragover: boolean
      16             :    * }}
      17             :    */
      18             :   data() {
      19           1 :     return { dragover: false };
      20             :   },
      21             :   methods: {
      22             :     /**
      23             :      * @param {DragEvent} event
      24             :      */
      25             :     onDrop(event) {
      26           0 :       event.preventDefault();
      27           0 :       event.stopPropagation();
      28           0 :       this.dragover = false;
      29             : 
      30             :       /** @type {DataTransferItem|File|undefined} */
      31           0 :       var file = find(get(event, [ "dataTransfer", "items" ]), { kind: "file" });
      32           0 :       if (!isNil(file)) {
      33           0 :         this.$emit("file-drop", file.getAsFile());
      34           0 :         return;
      35             :       }
      36             : 
      37           0 :       file = get(event, [ "dataTransfer", "files", 0 ]);
      38           0 :       if (file) {
      39           0 :         this.$emit("file-drop", file);
      40           0 :         return;
      41             :       }
      42             : 
      43           0 :       file = find(get(event, [ "dataTransfer", "items" ]),
      44             :         { kind: "string", type: "text/uri-list" });
      45           0 :       if (!isNil(file)) {
      46           0 :         file.getAsString((uris) => {
      47           0 :           const url = first(split(uris, "\n"));
      48           0 :           if (url) {
      49           0 :             axios.get(url)
      50             :             .then(
      51           0 :               (ret) => this.$emit("text-drop", ret.data),
      52           0 :               (err) => console.log("failed to retrieve document:", err));
      53             :           }
      54             :         });
      55             :       }
      56             :     },
      57             :     /**
      58             :      * @param {Event} event
      59             :      * @param {boolean} dragover
      60             :      */
      61             :     onDrag(event, dragover) {
      62           0 :       event.preventDefault();
      63           0 :       event.stopPropagation();
      64           0 :       this.dragover = dragover;
      65             :     },
      66             :     /**
      67             :      * @param {Event} event
      68             :      */
      69             :     onDragOver(event) {
      70           0 :       event.preventDefault();
      71             :     },
      72             :     async onClick() {
      73           0 :       this.$refs?.input?.focus();
      74           0 :       this.$refs?.input?.click();
      75             :     },
      76             :     onFileChange() {
      77           0 :       const file = first(this.$refs?.input?.files);
      78           0 :       if (file) {
      79           0 :         this.$emit("file-drop", file);
      80             :       }
      81             :     }
      82             :   }
      83             : });