event after selecting file using html input file multiple - javascript

I would like to start uploading the files that I have just selected using the input type="file" multiple="multiple" html element.
Which event can I hook into to run code right after the file dialog has closed and I have completed my files selection.
My html code looks like this:
<form enctype="multipart/form-data" action="/photo" method="post">
<input type="hidden" name="section_id" value="234" />
<input type="file" multiple="multiple" id="section_photos" name="section_photos[]" accept=".jpg, .png, .gif" />
</form>

$('input[type=file]').change(function (e) {
console.log(e);
console.log(e.target.files); //a list of the files
});
for file array, you can select it by type with specific class as well.
<input type="file" class="fileclassputhere" multiple="multiple" id="section_photos" name="section_photos[]" accept=".jpg, .png, .gif" />
<script>
$('input[type=file].fileclassputhere').change(function (e) {
console.log(e);
console.log(e.target.files); //a list of the files
});
</script>

Add a change eventListener to the input:
var input = document.getElementById('input')
input.addEventListener('change', function(e){
console.log(e);
console.log(e.target.files); // a list of the files
});

Related

Html use file from user and set as background?

I have this code for choosing a file in HTML, and I want to allow the user to choose a file, and then be able to set it as the background. Heres the code for choosing the file
<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1" name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>
Or is there a way I could access the camera of the user in HTML? Basically, I want the user to be able to choose an image or take an image, and then set the image as the background.
Yes we can take advantage the browser's FileReader API to read files and use the file on client side
Below is a typical example of using the FileReader API for your use case:
function sendFile() {
// IN YOUR ACTUAL CODE REPLACE DEMODIV WITH
// document.body or the body of your html
const demoDiv = document.querySelector('#demo');
const file = document.querySelector('#file1').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// setting image file convert to base64 string as demoDiv's background
demoDiv.style.backgroundImage = `url(${reader.result})`;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
#demo {
width: 100%;
height: 400px;
}
<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1" name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>
<div id="demo"></div>
Reference: reader.readFileAsDataUrl

HTML and Javascript detect if input contains a file?

Hello I have the following code that allows the user to select a file and upload it to the server:
<form action="postphp.php" method="post" enctype="multipart/form-data">
<input id="videoage" type="file" name="video" style="margin-left:-242px;margin-top:10px;opacity:0;">
<label for="videoage" id="labelvideo">Choose Video...</label>
</form>
It works great but when the user selects a file I want the 'choose video...' text on the input to change to 'example.mp4'. Is this possible using javascript if so how can I do that? Thanks.
You can write in your script:
jQuery(function($) {
$('input[type="file"]').change(function() {
if ($(this).val()) {
var filename = $(this).val().split('\\').pop();
$(this).closest('.file-choose').find('.file-name').html(filename);
}
});
});
where file-choose and file_name are the classes added in your <form> and <label> respectively.
Please check the snippet here.

Bind file input to a button using Vue.js

I'm trying to bind a input file to a button using Vue.js
Having the following:
<input type="file hidden>
<button>Choose</button>
In JQuery would be somthing like:
$('button').click(function() {
$('input[type=file]').click();
});
So, what this is doing is binding the click event on the button to the input file, this way I have complete control on the look of the button, it can even be a anchor or a image or any element to trigger the event to the input.
My question is: How can I accomplish this using Vue.js?
Thank you!
You can do this:
HTML:
<input id="fileUpload" type="file" hidden>
<button #click="chooseFiles()">Choose</button>
Vue.js:
methods: {
chooseFiles: function() {
document.getElementById("fileUpload").click()
},
...
EDIT - Update syntax:
methods: {
chooseFiles() {
document.getElementById("fileUpload").click()
},
...
Add a ref="file" to your <input> element and later use $refs.file to access it.
<input ref="file" type="file">
<div #click="selectFile()">click to select a file</div>
methods:{
selectFile(){
let fileInputElement = this.$refs.file;
fileInputElement.click();
// Do something with chosen file
}
}
👌 Demo: https://codepen.io/Jossef/pen/QWEbNGv
Simplest way to do this is to stylize a label element like a button, HTML only.
you can use the label html tag for doing this like below
<label for="upload-file" class="css-class">
<input type="file" id="upload-file" hidden #change="choosFile"/>
</label>
in this way you didn't need the button any more and you can customize the label with css as the way you like it
In Vue:
How code below works:
Open file explorer on button (label) click;
Select a file, continue;
#onChange will detect new file:
<label>
<button/> //this can be an icon, link,...
<input #change="doSomething" type="file" ref="file" accept="image/gif,
image/jpeg, image/png" hidden/>
</label>
Handle the file
doSomething(e: any) {
const file = e.target.files[0]
}
There is a much simpler way of way doing this using Vue 3
<input type="file" id="upload-file" name="upload-file" hidden>
<label for="upload-file" refs="upload-file" class="file-btn">Choose a file</label>
Using this you can add classes and styling to the label field.
This might help someone who is using coreui <CInputFile> tag.
for <CInputFile>, this.$refs.file.click() and this.$refs.file.$el.click() both doesn't work.
Because <CInputFile> wraps <div> around <input type="file">. so $el is actually a div element here, you need to go find the <input type="file"> tag and trigger the click() event on the <input type="file"> tag like this
this.$refs.file.$el.getElementsByTagName('input')[0].click().
<input ref="refName" type="file">
<div #click="selectFile()">Select file</div>
export default: {
methods:{
selectFile(){
// refs return list of objects with name 'refName' or if only one object
const r = this.$refs.refName[0] || this.$refs.refName;
r.click();
}
}
}

how to hide a button when there is only one input

i have created a input type file for uploading site. also i created two button , one of them is for appending the input type file and another is for removing them, but i wanna to hide the delete button when i have only one input type file, these are my codes :
JavaScript:
$(document).ready(function (e) {
$('.add').click(function (e) {
$('.addon').append('<div class="choose"><input type="file" name="userFile" /></div>');
});
$('.delete').click(function (e) {
$('.addon > .choose').last().remove();
if ($('<div class="choose"><input type="file" name="userFile" /></div>').length == 1) {
$('.delete').css('display', 'none');
} else {
$('.delete').css('display', 'block');
}
});
});
and the html
<div class="addon">
<div class="choose">
<input type="file" name="userFile" />
</div>
</div>
but it doesn't work, can you please help me?
You should give the input a class
<input type="file" name="userFile" class="file" />
and then change your if statement to
if($('.file').length == 1){....
It's hard to tell exactly what you are asking, but it seems to me like you want the check for length to be triggered by the onChange event for your input element.
Have your if condition as
$('.delete').length > 1
Thats what you seem to be asking. And the HTML seems incomplete for this question

How to remove a link?

I have a one file upload button.And i write a jquery validation in upload button.If i don't choose any image error message is displayed but if i click a error message it do file upload functionality?
This is my input type file format:
<input type="file" name="userfile1" id="userfile1" class="span5" ></input>
This is my jquery validation:
$(this).rules("add", {
required: true,
messages: {
required: "Must Select Image To Upload"
}
});
add is button name. if i click "Must Select Image To Upload" this message it do file upload functionality.
How to i remove this link.
Kindly give a solution...
I think you asking about, when user click on the file upload element, hide the error message.
HTML
<input type="file" name="userfile1" id="userfile1" class="span5" ></input>
<div id="errorDiv">Must Select Image To Upload</div>
JS
$("#userfile1").focus(function () {
$('#errorDiv').fadeOut(2000); //replace '#errorDiv' to your error message id.
});
SEE THIS FIDDLE DEMO
UPDATE : Check if the element value is empty or not in #add button click() function. If the value is empty then show the #errorDiv. Write your hiding error div function in on focus of input element.
HTML
<input type="file" name="userfile1" id="userfile1" class="span5"></input>
<div id="errorDiv">Must Select Image To Upload</div>
<input type="button" id="add" value="ADD" />
JS
$('#errorDiv').hide();
$('#add').click(function () {
if ($("#userfile1").val() === '') $('#errorDiv').fadeIn(1000);
});
$("#userfile1").focus(function () {
$('#errorDiv').fadeOut(1000);
});
SEE THIS FIDDLE DEMO
<div id="errorDiv"></div>
<input type="file" name="userfile1" id="userfile1" class="span5" ></input>
$('.span5').each(function() {
if($.trim($(this).val()).length == 0)
{
$("#errorDiv").html("Must Select Image To Upload ");
}
});

Categories

Resources