Comments (22)
@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 vue
definition, 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.
from discussion.
Right. Searched for it and couldn't find it. Thanks.
On Nov 20, 2015 20:48, "Azamat" [email protected] wrote:
—
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.
Related Issues (20)
- Use ||(or) in v-if (with nuxt js)
- Instantiate a copy of a component directly in that component HOT 1
- Call pre-defined javascript method on vue js event
- What about js-data.io?
- How to make vue bind to, or work with, html in properties
- Convert VueJS 1 to VueJS 2 HOT 2
- Third Party Libraries - Make non reactive?
- why v-switch not included in vuejs and what the alternative way HOT 1
- Use raw html inside v-bind
- iOS event bound using addEventListener is not triggering
- How to validate when blur a component.
- Google is not defined HOT 2
- vuejs can not find method or variable inside a callback function HOT 2
- Thousands of rows performance HOT 1
- how to pass Header + Body in POST api using Vue JS-axios HOT 4
- Conditional rendering and child component
- Fetch the value of element dynamically
- Vue breaks DataTables and Pace JS
- Bootstrap4 tag b-form-input has problem with @blur
- Invalid prop: Expected `Basic type`, got Nulll.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from discussion.