<commit_before><template>
  <div class="photo-upload">
    <div class="photo-upload-img" v-for="image in photograph">
      <img :src="image.src" @click="rm($index)">
    </div>
    <div v-for="msg in warnings" class="ui warning message visible" v-text="msg"></div>
    <div class="photo-upload-cover">
      <div>
        <i class="ui upload big large icon"></i>
        <br>Klik hier om foto's toe te voegen of&nbsp;sleep&nbsp;foto's in dit veld
      </div>
      <input class="photo-upload-inp" type="file" accept="image/*" multiple @change="onFileChange">
    </div>
  </div>
</template>

<script>
import {MAX_FILE_SIZE, toBytes} from '../const.js'

export default {
  props: ['photograph'],
  data () {
    return {
      warnings: []
    }
  },
  attached () {
    var container = $(this.$el)
    $('.photo-upload-inp', container).on('dragenter dragover', function () {
      container.addClass('dragging')
    })
    $('.photo-upload-inp', container).on('drop dragend dragleave', function () {
      container.removeClass('dragging')
    })
  },
  methods: {
    warn (...msg) {
      this.warnings.push(msg.join(' '))
    },
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files
      if (!files.length) {
        return this.warn('No files selected')
      }

      // Clear warnings
      this.warnings = []

      // Validate all selected files
      for (var i = 0; i < files.length; i++) {
        this.createImage(files[i])
      }
    },
    createImage(file) {
      var image = new Image
      var reader = new FileReader
      if (file.type.substr(0, 5) !== 'image') {
        return this.warn('Dit bestand wordt niet ondersteund:', file.type.substr(0, 5), '\nBestand:', file.name)
      }
      if (file.size > MAX_FILE_SIZE) {
        return this.warn('Dit bestand is te groot:', toBytes(file.size), '(max. ' + toBytes(MAX_FILE_SIZE) + ')', '\nBestand:', file.name)
      }

      // Read file and load it as an image
      reader.onload = (e) => {
        image.onload = () => {
          if (image.width < 400 || image.height < 400) {
            return this.warn('Resolutie is te klein:', image.width, 'x', image.height, '(min. 400 x 400)', '\nBestand:', file.name)
          }

          // It's valid
          this.photograph.push({
            name: file.name,<commit_msg>Fix language of warning<commit_after><template>
  <div class="photo-upload">
    <div class="photo-upload-img" v-for="image in photograph">
      <img :src="image.src" @click="rm($index)">
    </div>
    <div v-for="msg in warnings" class="ui warning message visible" v-text="msg"></div>
    <div class="photo-upload-cover">
      <div>
        <i class="ui upload big large icon"></i>
        <br>Klik hier om foto's toe te voegen of&nbsp;sleep&nbsp;foto's in dit veld
      </div>
      <input class="photo-upload-inp" type="file" accept="image/*" multiple @change="onFileChange">
    </div>
  </div>
</template>

<script>
import {MAX_FILE_SIZE, toBytes} from '../const.js'

export default {
  props: ['photograph'],
  data () {
    return {
      warnings: []
    }
  },
  attached () {
    var container = $(this.$el)
    $('.photo-upload-inp', container).on('dragenter dragover', function () {
      container.addClass('dragging')
    })
    $('.photo-upload-inp', container).on('drop dragend dragleave', function () {
      container.removeClass('dragging')
    })
  },
  methods: {
    warn (...msg) {
      this.warnings.push(msg.join(' '))
    },
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files
      if (!files.length) {
        return this.warn('Kies een afbeelding.')
      }

      // Clear warnings
      this.warnings = []

      // Validate all selected files
      for (var i = 0; i < files.length; i++) {
        this.createImage(files[i])
      }
    },
    createImage(file) {
      var image = new Image
      var reader = new FileReader
      if (file.type.substr(0, 5) !== 'image') {
        return this.warn('Dit bestand wordt niet ondersteund:', file.type.substr(0, 5), '\nBestand:', file.name)
      }
      if (file.size > MAX_FILE_SIZE) {
        return this.warn('Dit bestand is te groot:', toBytes(file.size), '(max. ' + toBytes(MAX_FILE_SIZE) + ')', '\nBestand:', file.name)
      }

      // Read file and load it as an image
      reader.onload = (e) => {
        image.onload = () => {
          if (image.width < 400 || image.height < 400) {
            return this.warn('Resolutie is te klein:', image.width, 'x', image.height, '(min. 400 x 400)', '\nBestand:', file.name)
          }

          // It's valid
          this.photograph.push({
            name: file.name,
{'fraction_non_alphanumeric': 0.17134891700621918, 'fraction_numerical': 0.00729144327686039, 'mean_word_length': 2.421863536316948, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 45, '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': '6605447', 'n_tokens_mistral': 1563, 'n_tokens_neox': 1528, 'n_words': 364}