<commit_before><template>
  <label
    :class="dropzoneClasses"
    :disabled="disabled"
    @drop.prevent="uploadMedia"
    @dragover.prevent="dragover = true"
    @dragleave="dragover = false"
  >
    <div class="apos-media-uploader__inner">
      <AposCloudUploadIcon
        class="apos-media-uploader__icon"
      />
      <div class="apos-media-uploader__instructions">
        <p class="apos-media-uploader__primary">
          {{ dragover ? 'Drop’em when you’re ready' : 'Drop new media here' }}
        </p>
        <p
          v-if="!dragover"
          class="apos-media-uploader__secondary"
        >
          Or click to open the file explorer
        </p>
      </div>
    </div>
    <input
      type="file" class="apos-sr-only"
      ref="upload"
      @input="uploadMedia"
      :accept="accept"
      multiple="true"
      :disabled="disabled"
    >
  </label>
</template>

<script>
export default {
  name: 'AposMediaUploader',
  props: {
    action: {
      type: String,
      required: true
    },
    disabled: {
      type: Boolean,
      required: false
    },
    accept: {
      type: String,
      required: false,
      default: null
    }
  },
  emits: [
    'upload-started',
    'upload-complete',
    'create-placeholder'
  ],
  data() {
    return {
      dragover: false
    };
  },
  computed: {
    dropzoneClasses () {
      return [
        'apos-media-manager-display__cell',
        'apos-media-uploader',
        {
          'is-dragging': this.dragover
        }
      ].concat(this.disabled ? [] : [ 'apos-media-uploader--enabled' ]);
    }
  },
  methods: {
    dragHandler (event) {
      if (this.disabled) {
        return;
      }
      event.preventDefault();
      this.dragging = true;
    },
    async uploadMedia (event) {
      try {
        apos.bus.$emit('busy', {
          name: 'busy',
          active: true
        });

        if (this.disabled) {
          return;
        }
        // Set `dragover` in case the media was dropped.
        this.dragover = false;

        this.$emit('upload-started');<commit_msg>fixed per various stackoverflow hints<commit_after><template>
  <label
    :class="dropzoneClasses"
    :disabled="disabled"
    @drop.prevent="uploadMedia"
    @dragover.prevent=""
    @dragenter="incrementDragover"
    @dragleave="decrementDragover"
  >
    <div class="apos-media-uploader__inner">
      <AposCloudUploadIcon
        class="apos-media-uploader__icon"
      />
      <div class="apos-media-uploader__instructions">
        <p class="apos-media-uploader__primary">
          {{ dragover ? 'Drop’em when you’re ready' : 'Drop new media here' }}
        </p>
        <p
          v-if="!dragover"
          class="apos-media-uploader__secondary"
        >
          Or click to open the file explorer
        </p>
      </div>
    </div>
    <input
      type="file" class="apos-sr-only"
      ref="upload"
      @input="uploadMedia"
      :accept="accept"
      multiple="true"
      :disabled="disabled"
    >
  </label>
</template>

<script>
export default {
  name: 'AposMediaUploader',
  props: {
    action: {
      type: String,
      required: true
    },
    disabled: {
      type: Boolean,
      required: false
    },
    accept: {
      type: String,
      required: false,
      default: null
    }
  },
  emits: [
    'upload-started',
    'upload-complete',
    'create-placeholder'
  ],
  data() {
    return {
      dragover: false,
      dragoverCount: 0
    };
  },
  computed: {
    dropzoneClasses () {
      return [
        'apos-media-manager-display__cell',
        'apos-media-uploader',
        {
          'is-dragging': this.dragover
        }
      ].concat(this.disabled ? [] : [ 'apos-media-uploader--enabled' ]);
    }
  },
  methods: {
    incrementDragover() {
      this.dragoverCount++;
      this.dragover = this.dragoverCount > 0;
    },
    decrementDragover() {
      this.dragoverCount--;
      this.dragover = this.dragoverCount > 0;
    },
    dragHandler (event) {
      if (this.disabled) {
        return;
      }
      event.preventDefault();
      this.dragging = true;
    },
    async uploadMedia (event) {
      try {
        apos.bus.$emit('busy', {
          name: 'busy',
          active: true
        });

        if (this.disabled) {
          return;
        }
        // Set `dragover` in case the media was dropped.
        this.dragover = false;

        this.$emit('upload-started');
{'fraction_non_alphanumeric': 0.13960819635217295, 'fraction_numerical': 0.0006755235307363207, 'mean_word_length': 1.8994778067885119, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1695015', 'n_tokens_mistral': 1407, 'n_tokens_neox': 1415, 'n_words': 258}