Paste Zone for pasting screenshots inside Baserow

It’ll be great if we could have a feature to paste screenshots. I got it to work for me by editing UploadFileDropzone.vue .

<template>
  <div>
    <input
      v-show="false"
      ref="file"
      type="file"
      multiple
      @change="$emit('input', $event)"
    />
    <div
      class="upload-files__dropzone"
      :class="{ 'upload-files__dropzone--dragging': dragging }"
      @click.prevent="$refs.file.click($event)"
      @drop.prevent="onDrop($event)"
      @dragover.prevent
      @dragenter.prevent="dragging = true"
      @dragleave.prevent="dragging = false"
    >
      <div class="upload-files__dropzone-content">
        <i class="upload-files__dropzone-icon fas fa-cloud-upload-alt"></i>
        <div class="upload-files__dropzone-text">
          <template v-if="dragging"
            >{{ $t('uploadFileUserFileUpload.drop') }}
          </template>
          <template v-else>{{
            $t('uploadFileUserFileUpload.clickOrDrop')
          }}</template>
        </div>
      </div>
    </div>
    <div class="upload-files__paste-zone">
      <div class="upload-files__paste-zone-content">
        <span>{{ $t('uploadFileUserFileUpload.pasteZone') }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UploadFileDropzone',
  data() {
    return {
      dragging: false,
    };
  },
  mounted() {
    window.addEventListener('paste', this.onPaste);
  },
  beforeUnmount() {
    window.removeEventListener('paste', this.onPaste);
  },
  methods: {
    onDrop(event) {
      this.dragging = false;
      this.$emit('input', event);
    },
    onPaste(event) {
      if (event.clipboardData && event.clipboardData.items) {
        const items = event.clipboardData.items;
        const files = [];

        for (let i = 0; i < items.length; i++) {
          if (items[i].kind === 'file') {
            files.push(items[i].getAsFile());
          }
        }

        if (files.length > 0) {
          event.preventDefault();
          this.$emit('input', { target: { files } });
        }
      }
    },
  },
};
</script>

<style scoped>
.upload-files__paste-zone {
  border: 1px dashed #ccc;
  border-radius: 4px;
  padding: 15px;
  text-align: center;
  margin-top: 15px;
}

.upload-files__paste-zone-content {
  display: inline-block;
  vertical-align: middle;
}

.upload-files__paste-zone-content span {
  font-size: 18px;
  font-weight: bold;
  color: #666;
}
</style>
2 Likes

Hello @computersrmyfriends, noted! Thanks for sharing your idea, I will discuss it with the team and get back to you afterwards :slightly_smiling_face:

Hello @computersrmyfriends, some updates on your idea — it’s possible to paste a screenshot directly into a cell, but you can’t paste a screenshot in the enlarged row. As you already wrote a code, would you mind making a merge request on GitLab with the changes and contributing this feature?

1 Like

@olgatrykush Thanks for the tip. I have now raised an issue plus sent a merge request. Hope that helps.

Thanks

1 Like