Vue3 Support

[maicolbruski]

Hello!

Do you have any idea to do with support for vue3? Tks!

[heyaco]

Why are you having issues with it with vue3?

[RichPC]

I've just tried using the simple demo from the example files in a vue3 project and it's got a problem with this.multiple in the maximum prop default

      maximum: {
        type: Number,
        default: function _default() {
          return this.multiple ? 0 : 1;
        }
      },

vue-upload-component.js?8019:740 Uncaught (in promise) TypeError: Cannot read property 'multiple' of undefined
    at _default (vue-upload-component.js?8019:740)

Looking at the vue3 migration guide:

Props default factory function no longer has access to this context

[sergeynilov]

I also waite for support for vue3. Thanks!

[vahidid]

I got this message too, and i want use upload zone component in vue 3. Anyone can help me?

[andrefelipe]

+1

[mits87]

+1

[mits87]

Any progress?

[lian-yue]

Supported Vue3

npm install vue-upload-component@next --save

The first version 3.0, please try to be compatible

[sergeynilov]

Is there is some docs /example for Vue3 ? This https://lian-yue.github.io/vue-upload-component/#/documents seems for Vue2...

[lian-yue]

Interface parameters are basically compatible with vue2 @sergeynilov

[lian-yue]

@sergeynilov

<template>
    <div id="fs-upload-files">
        <FileUpload ref="upload" post-action="/url_post_upload" :multiple="true" v-model="files" class="btn btn-md btn-primary">Select files</FileUpload>
        <button @click.prevent="upload.active =  true">Upload</button>
        <ul>
            <li v-for="file of files" :key="file.id">
                {{file.id}} - {{file.name}} error:{{file.error}}
            </li>
        </ul>
</div>
</template>
<script lang="ts">
import {SetupContext, ref, Ref, defineComponent, watch} from "vue"
import FileUpload, {VueUploadItem} from 'vue-upload-component'

export default defineComponent({
  components: {
    FileUpload,
  },
  setup(props: any, context: SetupContext) {
    const upload = ref<any>(null)


    let files: Ref<VueUploadItem[]> = ref([])
    
    
    watch(upload, function(newUpload: any) {
      console.log("file", newUpload.files)
    })

    
    return {
      upload,
      files,
    }
  },
})
</script>

[heyaco]

@lian-yue hey you think it might be a good idea to add a prop to configure how often progress/speed updates? Right now it's hard coded for 500ms. It feels choppy when you upload using a fast connection (1Gbps+) and makes the loading bar animations jumpy.

[lian-yue]

@starkana

transition: width 1s ease;

[damienroche]

@lian-yue i've got an error when using it with the new script setup rfc : vue-upload-component.js:832 Uncaught (in promise) TypeError: _this7.$parent.$forceUpdate is not a function at Proxy.<anonymous> (vue-upload-component.js:832)

<script lang="ts" setup>
import FileUpload, { VueUploadItem } from 'vue-upload-component'
import { ref, watch } from 'vue'
import type { Ref } from 'vue'

const upload = ref<any>(null)
let files: Ref<VueUploadItem> = ref([])

watch(upload, (newUpload) => {
  console.log(newUpload)
})

</script>

[theSilverFisch]

@sergeynilov

<template>
    <div id="fs-upload-files">
        <FileUpload ref="upload" post-action="/url_post_upload" :multiple="true" v-model="files" class="btn btn-md btn-primary">Select files</FileUpload>
        <button @click.prevent="upload.active =  true">Upload</button>
        <ul>
            <li v-for="file of files" :key="file.id">
                {{file.id}} - {{file.name}} error:{{file.error}}
            </li>
        </ul>
</div>
</template>
<script lang="ts">
import {SetupContext, ref, Ref, defineComponent, watch} from "vue"
import FileUpload, {VueUploadItem} from 'vue-upload-component'

export default defineComponent({
  components: {
    FileUpload,
  },
  setup(props: any, context: SetupContext) {
    const upload = ref<any>(null)


    let files: Ref<VueUploadItem[]> = ref([])
    
    
    watch(upload, function(newUpload: any) {
      console.log("file", newUpload.files)
    })

    
    return {
      upload,
      files,
    }
  },
})
</script>

after hitting the same issue with FileUpload.vue:54 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'multiple') at _default (FileUpload.vue:54:1) and adding you provided example for vue3 I still can't resolve that error on my website. Is there any proper documentation including examples for the vue-upload-component running in vue3?

[lian-yue]

@theSilverFisch

Vue3

npm install  vue-upload-component@next --save

example, vue3

git clone [email protected]:lian-yue/vue-upload-component.git
cd vue-upload-component
npm install
npm run dev

vue3 file https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Typescript.vue https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Simple.vue

[ashishrai8880]

<file-upload ref="upload" :size="1024 * 1024 * 10" extensions="gif,jpg,jpeg,png,webp" accept="image/png,image/gif,image/jpeg,image/webp" post-action="https://digivive.com/api" :multiple="false" v-model="files" @input-filter="inputFilter" @input-file="inputFile">

In main.ts file i have register component as app.component('file-upload', VueUploadComponent) . but still getting error . Error is FileUpload.vue:54 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'multiple') at _default (FileUpload.vue:54:1) . @lian-yue