[Feature Request] Uploader component

[amesas]

A file uploader component like:

http://element.eleme.io/#/en-US/component/upload

Async, progress, multiple file upload, etc....

[dohomi]

Here a proof of concept:

<template>
    <div>
        <v-text-field prepend-icon="attach_file" single-line
                      v-model="filename" :label="label" :required="required"
                      @click.native="onFocus"
                      :disabled="disabled" ref="fileTextField"></v-text-field>
        <input type="file" :accept="accept" :multiple="false" :disabled="disabled"
               ref="fileInput" @change="onFileChange">
    </div>
</template>

<script>
    export default{
        props: {
            value: {
                type: [Array, String]
            },
            accept: {
                type: String,
                default: "*"
            },
            label: {
                type: String,
                default: "Please choose..."
            },
            required: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            multiple: {
                type: Boolean, // not yet possible because of data
                default: false
            }
        },
        data(){
            return {
                filename: ""
            };
        },
        watch: {
            value(v){
                this.filename = v;
            }
        },
        mounted() {
            this.filename = this.value;
        },

        methods: {
            getFormData(files){
                const data = new FormData();
                [...files].forEach(file => {
                    data.append('data', file, file.name); // currently only one file at a time
                });
                return data;
            },
            onFocus(){
                if (!this.disabled) {
                    debugger;
                    this.$refs.fileInput.click();
                }
            },
            onFileChange($event){
                const files = $event.target.files || $event.dataTransfer.files;
                const form = this.getFormData(files);
                if (files) {
                    if (files.length > 0) {
                        this.filename = [...files].map(file => file.name).join(', ');
                    } else {
                        this.filename = null;
                    }
                } else {
                    this.filename = $event.target.value.split('\\').pop();
                }
                this.$emit('input', this.filename);
                this.$emit('formData', form);
            }
        }
    };
</script>

<style scoped>
    input[type=file] {
        position: absolute;
        left: -99999px;
    }
</style>

[abotsi]

Input(type=file) sounds like a must have! Doesn't it exists already? What is the link with this repo https://github.com/johnleider/vue-materials/blob/master/src/components/file-input.vue?

[amesas]

I was thinking about more feature complete solution:

• Multiple file upload
• File preview
• Progress report
• Drag & Drop
  etc...

Like:
http://demo.geekslabs.com/materialize-v1.0/form-file-uploads.html
https://github.com/shuyu/angular-material-fileinput

[johnleider]

As of right now, this will not be done for the core of Vuetify.

[Darkside73]

@dohomi Thanks for sharing. I've ended up with the following:

getFormData (files) {
  const data = new FormData()
  for (let file of files) {
    data.append('files[]', file, file.name)
  }
  return data
}

And it plays with multiple nicely

[jannhama]

Here is small class for selecting file:
https://github.com/jannhama/vuetify-upload-btn

[jofftiquez]

+1M

[johnleider]

I should have elaborated on my comment above. This will not be in the core of Vuetify, as far as the extensive functionality. However, we will include something like this in the addon packs that will come after Vuetify's release.

-edit- Forget this

[jofftiquez]

Hi @johnleider may we know the reason why? Coz it seems to be a pretty solid feature to have.

[johnleider]

Disregard my comment, we'll do it, but after the core components are complete.

[jofftiquez]

@johnleider WHOAH! You da real MVP. Thanks 👍

[dohomi]

@jofftiquez meanwhile you can check this one out: https://gist.github.com/dohomi/2bba9e2905d00cd1cec9c09cfd87bd10

[jofftiquez]

I certainly will @dohomi thanks a lot. :)

[lobosan]

I think many of us need this essential component, thanks in advance for adding this feature ;)

[johnleider]

This will be something that will be included in the front end package development.

[mstaack]

i can highly recommend:
this for file/folder handling: https://github.com/silverwind/uppie
and this for generell vue upload needs: https://github.com/thetutlage/vue-clip

[Tabrizian]

When will you add this feature?
A must have.

[johnleider]

Planned for the front end component pack

…

On Aug 17, 2017 4:30 AM, "Iman Tabrizian" ***@***.***> wrote: When will you add this feature? A must have. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#238 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIpOgol30Eat_cuj9OIC8cRSnSI8dM89ks5sY_oKgaJpZM4Mig7T> .

[spaquet]

@mstaack Agre that http://vueclip.adonisjs.com/ is great to consider. It just need a nice UI out of the box.

[arpitprod]

we need to add/update code in 'webpack.base.config.js' file for use vue-clip

module.exports = {
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js', // add for image upload things for use vue component in vue 2
    }
  },

[Tabrizian]

vueclip has only one version released? And its last update is 9 months ago! A risk to start using it.

[KaelWD]

@37ch4 @Gab0o777 @Mehtrick @mklemenz @efriedli
Cut it out with the +1 comments please, there's a button for that.

[someone1]

Wondering if I could chime in with a small request for the resulting implementation (I'm following the progress by comparing branches here) - my apologies if there was a discussion/spec I could have commented in/on instead.

I always find it difficult/frustrating to properly support an upload target to a cloud provider. The flow would be:

1. User selects file(s) to upload
2. For each file -> Do below
3. Pass the file to a function to get the upload URL (containing the file name, content type, size) - in this case it will call an API to get a signed URL to upload to restricted by the content-type and file-size reported
4. Upload the file to the URL provided
5. [Optional] Support resumable uploads

Most uploads fumble on step 3 here for this use-cases: the type for the upload url is usually something like string|Function and not string|Function|Promise<string> (Replace Function with a specific signature if wanted). I'm using fetch for all my API calls, and so I would need support for the Promise addition here.

I'm migrating a project over from AngularJS + AngularMaterial and used ng-upload which supported my use-case in that it would just provide a component that would trigger a function with the file list and I would do steps 2 & 3 on my own, then use their Upload service which would carry out steps 4 & 5.

[MajesticPotatoe]

@someone1 our uploader will require an upload function to run. It will be up to the user to determine how they will upload the data (be it rest, sockets, etc) as this will give the most flexibility.

general process so far:
1.) select file(s) to upload
2.) for each file:
a.) the file will be uploaded by browser (inputs standard upload function)
b.) file is parsed by requested FileReader format (user sets via prop, Binary, Text, DataURI etc etc)
c.) user upload function runs

straight out of the gate there wont be support for resumable uploads, though all internal file status's are accessible to the upload function so could be easily handled by the user.

[someone1]

Thanks for the quick reply @MajesticPotatoe !

For some uploads I wouldn't want to get a FileReader to read it all into memory only to send it along the pipe for uploading. I may also be mistaken here, but the result from the FileReader omits details like file name, size, and content-type so my flow would be unsupported.

With how the branch currently is coded (I realize it's a WIP), it looks like the user supplied uploader function is not given details to the file at all, just the data received by the FileReader, and progress is tracked by the FileReader progress. For large files, the entire file would be loaded into memory before being handed off to the uploader function, this wouldn't be suitable for large files.

From the docs it appears onLoad is only called once the entire file is read.

[MajesticPotatoe]

Yes it's still WIP, FileReader is totally optional. It's just the current feature I'm working on ATM. At its basic level everything will be handled by users upload function. Initial release wont please everyone, its merely a staring point to cover as much ground as possible with little maintenance.

[annymosse]

currently im using this lib
https://github.com/pqina/vue-filepond
take a look at it ☝️

[yoldar]

currently im using this lib
https://github.com/pqina/vue-filepond
take a look at it ☝️

Great! But last time I used this lib there was memory leak when using in mobile browser(when using images from camera ~10-15mb) so I decided to switch to Uppy. I liked Uppy because it uses it's own modal panel to manage uploads and you decide yourself how uploaded files will be shown on your webpage.

[yannanna0920]

Disregard my comment, we'll do it, but after the core components are complete.
Let's just do it quickly we really need this component who wants somebody to say ok it turns out that the components aren't all that nice and they're not pretty so what can we do about it

[yannanna0920]

Here is an uploader component I create which inspired by v-text-field

can you share with us?

[softwareguy74]

So I guess this never made it? Seems like such a basic and universally needed feature for almost any type of app.

[johnleider]

Just an update to everyone. This is currently in progress and will ship with v2.0 https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload

Thank you for your patience.

[hainuo]

Just an update to everyone. This is currently in progress and will ship with v2.0 https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload

Thank you for your patience.

How do I use this unreleased feature?

[softwareguy74]

Just an update to everyone. This is currently in progress and will ship with v2.0 https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload
Thank you for your patience.

How do I use this unreleased feature?

Um, not sure you can. Still being worked on.

[hainuo]

Just an update to everyone. This is currently in progress and will ship with v2.0 https://github.com/vuetifyjs/vuetify/tree/feat/%23238-file-upload
Thank you for your patience.

How do I use this unreleased feature?

Um, not sure you can. Still being worked on.

alright, i'll wait for the version 2.0

[Mikilll94]

Is File Upload component available in v2.0.0-beta.3 ?

[chojnicki]

Is File Upload component available in v2.0.0-beta.3 ?

Nope.

[forresthopkinsa]

🎉

[softwareguy74]

Can we get drag drop support where we can drag files from local computer to upload component?

[softwareguy74]

Can the chips have a close icon to remove specific file from list?

[jacekkarczmarczyk]

v-file-input is the replacement for the native <input type=file> which doesn't support removing files, so the current status is that chip are not going to be deletable
Probably same for dragndrop support.
Anyway this issue is closed, if you have additional feature requests or found bugs please create a new issue