v-model doesn't support input type="file" about discussion HOT 22 CLOSED

@adam12 I've got a better solution

<input v-el="avatar" type="file" name="avatar" id="avatar" v-on="change:upload">
    methods: {
        upload: function(e) {
            e.preventDefault();
            var files = this.$$.avatar.files;
            var data = new FormData();
            // for single file
            data.append('avatar', files[0]);
           // Or for multiple files you can also do
            //  _.each(files, function(v, k){
            //    data.append('avatars['+k+']', v);
           // });

            this.$http.post('/avatars/upload', data, function (data, status, request) {
                  //handling
            }).error(function (data, status, request) {
                 //handling
            });
        }

from discussion.

Thanks for @TeroBlaZe solution! A quick note for Laravel users though: Sending the FormData object in a PUT/PATCH request did not work for me in Laravel 5.3. A simple workaround is to use a POST request instead but instruct Laravel to consider it as a PUT request by adding the following line to the upload method: data.append('_method', 'PATCH')

from discussion.

For vue 2.x it should like this:

<input ref="image" type="file" @change="onFileChange">

onFileChange() {
    const files = this.$refs.image.files;
    const data = new FormData();
    data.append('logo', files[0]);
}

from discussion.

@eliyas5044 var would be more appropriate as the variable doesn't change.

from discussion.

@airtoxin 👍 for adding file to the type list. It would be very handy.
Right now as a workaround, you can do something like this.

from discussion.

@airtoxin @yyx990803 So I just made a fork and modified the model bind creation in order to support the file type. The thing is, the way things are set up today, the model value will be file's path instead of file name (which I think is what @airtoxin expected). Take a look at this snippet.
What do you guys think? Is this the expected behavior?

from discussion.

@rafaelrinaldi hi, thanks to your examples.
but I seem It is still not collect behavior...
because, add vue.file = 'foo'; next line of vuedefinition, this code throws those error in vue.js:4370.
Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

from discussion.

@airtoxin Yeah, it's just a draft. I didn't made all the changes needed. Just wanted a feedback about the file path vs. file name.

from discussion.

@rafaelrinaldi ok, I expect file path showing. I think it is better than file name, because node-webkit' input returns full file path.

from discussion.

so is it still not supported ??
how to deal with input file then ??

from discussion.

We need it

from discussion.

We need it

I'm currently using this as a directive. Appears to work OK.

module.exports = {
  handleChange: function(e) {
    this.vm.$set(this.expression, e.target.files[0]);
  },

  bind: function() {
    this.el.addEventListener('change', this.handleChange.bind(this), false);
  },

  unbind: function() {
    this.el.removeEventListener('change', this.handleChange, false);
  }
}

from discussion.

@TeroBlaZe, thanks

from discussion.

@TeroBlaZe
You did a great help for me, thanks.

from discussion.

For multiple file upload you can use this.

//for multple file upload

var files = this.$$.moreImage.files;
for(var key in files){
          formData.append('more_image['+key+']', files[key]);
  }

//in your controller you can do like this
foreach(Input::get(more_image) as $image){
     //wirte your code here
}

from discussion.

Is there a solution for this for Vue 1.0? v-el no longer exists.

from discussion.

http://vuejs.org/api/#v-el

from discussion.

Right. Searched for it and couldn't find it. Thanks.
On Nov 20, 2015 20:48, "Azamat" [email protected] wrote:

http://vuejs.org/api/#v-el

—
Reply to this email directly or view it on GitHub
#24 (comment).

from discussion.

@rafaelrinaldi I think the value should be file.name, as a bunch of browsers including: IE, Chrome & Safari; prepend the file.path with c:\fakepath (regardless of the user's platform).

from discussion.

How to find workaround when <input> is under v-if so it can't use v-el .. ?

from discussion.

@murbanowicz refs is a good alternative to v-el https://vuejs.org/v2/api/#vm-refs

from discussion.

@andreaselia But refs is not reactive enough to being used in computed or methods, it still some tweak to achieve goals, I'm using Vue & related open issue 2.x vuejs/vue#3842

from discussion.