Develop Reference

Hide / show depending on input type=file value

It works fine when I select / deselect a file via the Choose File button:
$("input[type='submit']").toggle(false);
$("input[type='file']").change(function() {
if ($(this).val() != "") {
$("#btn").toggle();
} else {
$("#btn").toggle();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fld" type="file" name="image" id="file">
<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" id="upload_picture" class="btn" />
<br>
<br>
<div id="remove_button">Remove</div>
Click on the Choose File button and select a file. The Upload / Edit picture button will appear. Now click on the Choose File button again but do not select a file and exit the small popup window. The Upload / Edit picture button will disappear.
In my case I want the input="file" value to be cleared and the Upload / Edit picture button to disappear if I clear the value by clicking on the <div id="remove_button">Remove</div>
Is there a way to do that?
JSFiddle

Add this code into your javascript
$("#btn").toggle(false);
$("#fld").change(function(){
if($(this).val() != "")
{
$("#btn").toggle();
}
else{
$("#btn").toggle();
}
});
$("#remove_button").click(function(){
$("#fld").val('');
document.getElementById("btn").style.visibility = "hidden";
})
and remove id tag from your html..it has two ids for the button
change it like
<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture"
class="btn" />

What you can do is to bind a click event listener to the #remove_button element (which I recommend that you should be using <button> instead of a <div>).
In the callback, you can simply set the value of the file input to an empty string, which effectively resets the field. Remember that you will need to use .trigger('change') to manually reinvoke the show/hide logic based on the file input value:
const $submit = $("input[type='submit']");
$submit.hide();
$("#fld").change(function() {
$submit.toggle(!!this.value);
});
$('#remove_button').click(function() {
$('#fld').val('').trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fld" type="file" name="image" id="file">
<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" id="upload_picture" class="btn" />
<br>
<br>
<button id="remove_button">Remove</button>

event after selecting file using html input file multiple

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
});

Alert on simple Drag and Drop Div area

As like shown in the image I need a very simple alert when the file is dragged in the dotted area I have tried plugins but those are not matching my requirements.
Here is my HTML:
<form id="uploadStudentsForm" class="js-upload-form">
<input type="hidden" name="action" value="uploadStudents"/>
<div class="upload-drop-zone" id="drop-zone">
<div class="upload-wrapper" id="csvFileDiv">
<p>Upload Files</p>
<input type="file" name="files[]" class="inputfile " id="js-upload-files" multiple aria-label="hidden">
<label for="csvFile">drag & drop or click here to add csv file </label>
</div>
</div>
</form>
I want simple js like when files drag and dropped in that div(upload-drop-zone) show alert("file dropped")
I dont know which one to use tried these:
sortable
draggale

you can use the ondrop event handler in the drop zone like below.ondragover is added to override browser's default drag behaviors.
<div class="upload-drop-zone" id="drop-zone" ondrop="drop(event)" ondragover="dragover(event)" >
<div class="upload-wrapper" id="csvFileDiv">
<p>Upload Files</p>
<input type="file" name="files[]" class="inputfile " id="js-upload-files" multiple aria-label="hidden">
<label for="csvFile">drag & drop or click here to add csv file </label>
</div>
</div>
the functions should be like below
function drop(event){
event.preventDefault();
alert("file dropped");
}
function dragover(event){
event.preventDefault();
}
Sample working fiddle here : https://jsfiddle.net/4ZYq3/186/
check this link here
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

You can use jquery change function for that.
$(document).on('change', "#js-upload-files", function(){
alert('file dropped');
});

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.

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