We Keep Coding

Error when using v-model on file input

I have a file input and I need to clear it after file is uploaded. I tried setting null value to v-model, but it generated the following error
File inputs are read only. Use a v-on:change listener instead.
My code is
<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
How can I clear the file input in vue.js after upload so that I can upload the same file multiple times continuously

Solved it using the ref attribute,
this.$refs.fileInput.value = null;

You are using v-on:change="uploadFile" and guessing that your uploadFile has a success callback.
You can do the following:
Wrap your input in a form and add a ref attribute to your form:
<form ref="myFileInputForm">
<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
</form>
In your successful callback uploadFile do this:
this.$refs.myFileInputForm.reset();

File inputs are read only.
don't bind on element, remove v-model="file"

How to use Jquery plug in Multi File upload on Dynamically added File input box

Hi I am using Jquery plug in jquery.MultiFile.pack.js . usage of this plug in requires input form element to be of class "multi"
<input id="preview" class="multi" name="preview[]" type="file" />
I am adding form elements dynamically from a PHP script. Multi file upload is not working when the elements are added dynamically, but works when element is allready present directly in the .
My question is how do I make this multi file upload to work. I tried to add class "multi" to the elements usng "on" as below, but it is not working.
$('input:file').on('click',function(){
$('#preview').addClass("multi");
});

For an HTML file input to accept a multiple file selection, you have to add it the multiple property :
<input id="preview" class="multi" name="preview[]" type="file" multiple/>

Upload files from multi input fields

I used to use this method to upload a file without refresh the page:
AJAX file upload tutorial
and it works fine, but now I need to upload multi files through multi input fields, something like that:
Personal Photo: <input name="myfile1" type="file" />
Certificate1 Image: <input name="myfile2" type="file" />
Certificate2 Image: <input name="myfile3" type="file" />
so how can I do that without re-write startUpload, and stopUpload function with a new title "like startUpload2, and stopUpload2 for 'myfile2' input, and another for myfile3... etc"?

The enctype="multipart/form-data" on your form will allow for multiple file uploads. For those functions you refer to, you will either have to loop through the inputs and apply the functions to each input or apply a slightly different function to the form itself.

How can I upload a new file on click of image button

I have got a task to upload new file from the click of image button.
My code is
<label>File</lable>
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
On the click of this button I want to upload a new file.How can I do this?
You can check my code from
Demo

You could add a hidden file input field, like:
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />
And do:
$("input[type='image']").click(function() {
$("input[id='my_file']").click();
});
Demo:: Updated Fiddle

There is no need for javascript just put the <input> and the <img> inside <label> make sure you hide the <input> like so:
<label for="image">
<input type="file" name="image" id="image" style="display:none;"/>
<img src="IMAGE URL"/>
</label>

There is no need for javascript.
Just place both <input type="file"> and <img src=""> inside a label.
Eg:
<label>
<input type="file" style="display:none">
<img src="">
</label>
This will work Just Fine
Demo: https://codepen.io/sandeeprana1001/pen/dyPVvJZ

If you are looking for a cross-browser compatible solution you should check out plupload(http://www.plupload.com) it supports image buttons aswell from what i remember.

you are using the wrong input, use file instead, if you want the button to loke like the circle in your code demo you will need to use CSS to change the way "submit" looks like. This has to be in a form:
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"/>
<input type="submit" class="circle-btn"/>
<form>
I don't know what language are you using in the server-side (PHP, ASP.NET, etc) but you will need to create a page (for xample "upload_file.php" for php). You can easily find examples in google about how to create a page like that, just copy pasete the code:
An example in PHP: http://www.w3schools.com/php/php_file_upload.asp
Hope it helps :)

You can do this using css.
Please check the 4th answer in this blog.
How can I customize the browse button?
You can use your image as background image of the .button class.

You can also use this in order to access the file that you uploaded since in PHP you can't access the file inside a label.
<input type="file" name="input" id="input" style="display:none;">
<label for="input">
<img src="images/default.jpg" id="image">
</label>

Supplement for DemoUser's answer, add .focus() works for me.
$("input[type='image']").click(function() {
$("input[id='my_file']").focus().click();
});

Upload File - Customizing Html

How can I do to browse my files when i click in a button "Upload" ?
I need to create a hidden file input?
More Explain:
I can't edit css of input type file of my html forms. So in each browser I have a different layout. I don't want it. I want to customize my form.
I created a button. When I click on the button, I want to appear the file selection screen.
When I select the file and press ok , I want to put the path string of my file in the input that I created.

Could you provide more information? You need to use the file html form element.
The file element lets you browse your local documents naturally.
To process the file attachment you need to know a programming language like php

I solved my problem with this code:
<div class="input-append">
<label for="showpath">File Upload:</label>
<input id="showpath" type="text" onclick ="javascript:document.getElementById('CommentFile').click();"/>
<button type="button" onclick ="javascript:document.getElementById('CommentFile').click();"></button>
<input type="file" name="data[Comment][file]" id="CommentFile" style='visibility: hidden;' onchange="updateInput(this.value,'showpath')"/>
</div>

<input type='file' />
More info at w3schools.