Drag-and-drop runs @input / @input-file method on ALL file-upload components

[Lordmau5]

I have 3 separate file-upload components, they have different files arrays and they all have a unique ref set.

Yet when I drag-and-drop onto one of them, it automatically runs the @input / @input-file method on all of them.

https://i.imgur.com/DcD99RN.gifv

[lian-yue]

https://lian-yue.github.io/vue-upload-component/#/en/documents#options-props-drop

If set to true, read the parent component as a container

[Lordmau5]

I do have it wrapped in a v-flex container (later on it'll be a div)

So it seems it doesn't properly take the bounding box of the parent component / parent element into account?

[christian-kolb]

I have the same issue. @Lordmau5 Did you find a solution?

[Lordmau5]

It's a really hacky solution, but it ended up working:

So basically, I still have the 3 separate file-uploads, but they run a custom @input-file method.

<template v-if="hasAccess(3)">
    <v-flex xs4>
        <file-upload
            input-id="upload_18"
            ref="upload_18"
            :value="files"
            accept="image/png"
            extensions="png"
            :drop="false"
            :add-index="0"
            @input-filter="inputFilter"
            @input-file="file => inputFile(file, 0)"
        >
            ...
        </file-upload>
    </v-flex>
    <v-flex xs4>
        <file-upload
            input-id="upload_36"
            ref="upload_36"
            :value="files"
            accept="image/png"
            extensions="png"
            :drop="false"
            :add-index="1"
            @input-filter="inputFilter"
            @input-file="file => inputFile(file, 1)"
        >
            ...
        </file-upload>
    </v-flex>
    <v-flex xs4>
        <file-upload
            input-id="upload_72"
            ref="upload_72"
            :value="files"
            accept="image/png"
            extensions="png"
            :drop="false"
            :add-index="2"
            @input-filter="inputFilter"
            @input-file="file => inputFile(file, 2)"
        >
            ...
        </file-upload>
    </v-flex>
</template>

inputFile (newFile, slot) {
    if (!newFile) return;

    this.badge_files[slot] = newFile;
    this.badge_images[slot] = newFile.blob;
    this.new_badge_upload = true;
    this.colorPickerUpdate();
},

It's very annoying, but hey, it works...

[christian-kolb]

@Lordmau5 Thanks for your example. I already have two different @input-file functions. But when I drop the file in, both get triggered (multiple times). But I do not have an @input-filter set. Can you please show your version of the inputFilter function? Maybe that's the missing part.

[christian-kolb]

@Lordmau5 And do you have some kind of special drop area? Because your file upload components are set to :drop=false.

[christian-kolb]

@Lordmau5 For a little input at the moment this is my setup:

<div class="upload">
  <file-upload
    name="pitchDeckUpload"
    input-id="pitchDeckUpload"
    ref="pitchDeckUpload"
    :add-index="1"
    :drop="true"
    :custom-action="uploadPitchDeck"
    @input-file="file => inputPitchDeck(file)"
  ></file-upload>
  ...
<div class="upload">
  <file-upload
    name="companyDeckUpload"
    input-id="companyDeckUpload"
    ref="companyDeckUpload"
    :drop="true"
    :add-index="2"
    :custom-action="uploadCompanyDeck"
    @input-file="file => inputCompanyDeck(file)"
  ></file-upload>
...

with the following @input-file function (identical for both, but with a different $refs):

inputPitchDeck(newFile: any, oldFile: any) {
  console.log('input pitch deck');
  if (newFile && oldFile) {
    // Check for file size
    if (newFile.size > 20 * 1024 * 1024) {
      // @ts-ignore
      this.$refs.pitchDeckUpload.remove(newFile);
      this.notificationService.showError(
        'Datei zu groß',
        `Die Datei "${newFile.name}" ist größer als 20MB`
      );
    }
  }

  // Automatic upload
  if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
    // @ts-ignore
    if (!this.$refs.pitchDeckUpload.active) {
      // @ts-ignore
      this.$refs.pitchDeckUpload.active = true
    }
  }
},

At the moment when I drop a file in ether of the two drop areas, both @input-file functions are triggered multiple times. Is there a way to only trigger the one ones. @Lordmau5 Is this what you're doing in your filter?

@lian-yue Any idea what is going on here? 🙂

[Lordmau5]

All my upload filter does is the following:

inputFilter (newFile, oldFile, prevent) {
    if (!newFile) return;

    if (!/\.(png)$/i.test(newFile.name)) {
        prevent();
        return;
    }

    newFile.blob = URL.createObjectURL(newFile.file);
},

As for :drop=false, that's on purpose. I had some other issues with it enabled, so I ended up having my users just click the separate images / file upload areas

[christian-kolb]

Ok, tried with that, no change.

@lian-yue Do you have an idea what's the issue here or how I'm able to solve this? Currently it doesn't seem to be possible to use multiple components on one screen.

[lian-yue]

@christian-kolb https://lian-yue.github.io/vue-upload-component/#/en/examples/multiple

https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Multiple.vue

[christian-kolb]

@lian-yue Thanks for the links, but both do not contain upload components with drag'n drop enabled. The components work without it, but when using drag'n drop, all components are being triggered. Is there a way to make it work or is this simply a bug that will be fixed?

[tkamstra]

This issue still exists with v 3.1.2

If you have multiple components on the page, the drag/drop event activates for all of them, and they aren't contained to their parent element