message: Make file question droppable (vue)
diff: <template>
  - <div :class="question.cssClasses.root">
  + <div :class="fileRootClass" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
  <input :class="question.cssClasses.fileInput" v-if="!question.isReadOnly" type="file" :id="question.inputId" @change="doChange" v-bind:aria-required="question.isRequired" :aria-label="question.locTitle.renderedHtml" :multiple="question.allowMultiple ? 'multiple' : undefined" v-bind:title="question.inputTitle" v-bind:accept="question.acceptedTypes" />
  <input v-if="question.isReadOnly" type="file" disabled :class="getPlaceholderClass()" :placeholder="question.title" style="color: transparent;"/>
  <div :class="question.cssClasses.fileDecorator">
  <script lang="ts">
  import Vue from "vue";
  -import { Component, Prop } from "vue-property-decorator";
  +import { Component, Prop, Watch } from "vue-property-decorator";
  import { default as QuestionVue } from "./question";
  import { QuestionFileModel } from "../question_file";
  @Component
  export class File extends QuestionVue<QuestionFileModel> {
  - doChange(e:any) {
  - var src = e.target || e.srcElement;
  - if (!(<any>window)["FileReader"]) return;
  - if (!src || !src.files || src.files.length < 1) return;
  - let files = [];
  - for (let i = 0; i < src.files.length; i++) {
  - files.push(src.files[i]);
  + private isHighlighted: boolean = false;
  + @Watch("isHightLighted")
  + get fileRootClass(): string {
  + return (
  + this.question.cssClasses.root +
  + (this.isHighlighted ? " " + this.question.cssClasses.highlighted : "")
  + );
  }
  - src.value = "";
  - this.question.loadFiles(files);
  + onDragOver = (event: any) => {
  + event.preventDefault();
  + this.highlight();
  + };
  + onDragEnter = (event: any) => {
  + event.preventDefault();
  + this.highlight();
  + };
  + onDragLeave = (event: any) => {
  + event.preventDefault();
  + this.unhighlight();
  + };
  + onDrop = (event: any) => {
  + event.preventDefault();
  + this.unhighlight();
  + let src = event.dataTransfer;
  + this.onChange(src);
  + };
  + doChange(event: any) {
  + var src = event.target || event.srcElement;
  }
  doClean(event: any) {
  var src = event.target || event.srcElement;
  @@ -51,6 +69,22 @@ export class File extends QuestionVue<QuestionFileModel> {
  getPlaceholderClass() {
  return "form-control " + this.question.cssClasses.placeholderInput;
  }
  + private onChange(src: any) {
  + if (!(<any>window)["FileReader"]) return;
  + if (!src || !src.files || src.files.length < 1) return;
  + let files = [];
  + for (let i = 0; i < src.files.length; i++) {
  + files.push(src.files[i]);
  + }
  + src.value = "";
  + this.question.loadFiles(files);
  + }
  + private highlight() {
  + this.isHighlighted = true;
  + }
  + private unhighlight() {
  + this.isHighlighted = false;
  + }
  }
  Vue.component("survey-file", File);
  export default File;
  