We Keep Coding

putting image on background from input file url

<script>
var loadFile = function(event) {
var img=URL.createObjectURL(event.target.files[0]);
document.getElementById('Display1').style.backgroundImage= url(img);
};
</script>
<div class="HM1EI" id="Display1">
<button type="button" class="_1q_T1">
<label>
<input type="file" accept="image/*" name="image" id="file1" onchange="loadFile(event)" style="display: none;">
Add Media
</label>
</button>
</div>
I can't Upload the file on the background which I get from input type file.

You are not setting the background url correctly you should do it like this
document.getElementById('Display1').style.backgroundImage = `url('img_tree.png')`;
Put (url) in string

How to get Directory size, HTML5 file api, using webkitdirectory

I am trying to use HTML5 file api + webkitdirectory in input element.
<input type="file" name="files[]" id="myfile" multiple="" directory="" webkitdirectory="" mozdirectory="">
How can I get the SIZE ()in kb/mb etc) of selected folder/directory, using javascript/jquery.
Please help as I am unable to figure it out by myself.

You can loop through the files property of the input after directory or files are selected
$('#myfile').change(function(e) {
var totalSize = [].reduce.call(this.files, function(tot, currFile) {
console.log(currFile.name , ' size=', currFile.size);
return tot + currFile.size;
}, 0);
console.log('Total size = ', totalSize)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="files[]" id="myfile" multiple="" directory="" webkitdirectory="" mozdirectory="">

Upload image immediately after selected

My goal is to automatically upload an image to a folder when the file is selected. Following the answer on how do I auto-submit an upload form when a file is selected, I attempted to use Javascript's onchange event to automatically submit the form:
<?php
if(isset($_POST['upload']))
{
$ImageName = $_FILES['photo']['name'];
$fileElementName = 'photo';
$path = '../images/';
$location = $path . $_FILES['photo']['name'];
move_uploaded_file($_FILES['photo']['tmp_name'], $location);
}
?>
<form method="post" enctype="multipart/form-data">
<input type="file" name="photo" onchange="document.getElementById('upload').submit();" id="file" class="inputfile" />
<label for="file">Add Image</label>
<input type="submit" style="display: none;" name="upload" id="upload">
<input type="text">
<input type="submit">
</form>
When the file is selected, it's not automatically uploaded to a folder.
Note: I cannot use onchange="form.submit()" as I have multiple submit buttons in my form!

I think you could simply change it to:
document.getElementById('upload').click();
Or do something like this:
var button = document.getElementById('upload');
button.form.submit();

How do I make a file field required using javascript?

I'm trying to make a form with an attachment field(file). I want to validate this field. I know how to do this with PHP, but i'd much rather use javascript to do it. Does anyone know a way to do this? I searched around the internet but couldn't find a solution..
This is my file field:
<input type="file" name="image" id="image" accept="image/*" />

You can try with:
<input type="file" name="image" id="image" accept="image/*" required />
And also check with JS:
if ( $('#image').is(':empty') ) {
// empty
}

<input type="file" name="image" id="image" accept="image/*" />
you can check if is valid, like this:
var file = $('#image').val();
if (file === '') {
// not valid
alert('File is not valid');
}

input file: write the name of the file in a text input with Javascript

I'm learning html and javascript and I wonder if it is possible to do the following: when uploading a file using a file input want the uploaded filename (without path) is written to a file input field .. Is this possible?. Below is my code but can not get any link which explain how to do it for newbies. Sorry if it is a very silly question, but I wonder if you can do only using javascript (not jQuery) and HTML without involving the server.
<html>
<head>
<script type="text/javascript">
(function alertFilename()
{
var thefile = document.getElementById('thefile');
//here some action to write the filename in the input text
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
</body>
</html>

Here is a fully working example
JavaScript:
var filename;
document.getElementById('fileInput').onchange = function () {
filename = this.value.split(String.fromCharCode(92));
document.getElementById("some_text").value = filename[filename.length-1];
};
HTML:
<form>
<input type="file" id="fileInput" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
jsFiddle live example
Hope you find it helpful, Asaf

For the newcomers:
document.getElementById("thefile").onchange = function() {
document.getElementById("some_text").value = this.files[0].name;
};
/* BELOW FULLPATH VERSION (depending on browser)
document.getElementById("thefile").onchange = function () {
document.getElementById("some_text").value = this.value;
};*/
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br>
<br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>

Just take the file input' value, split it and take the last index:
Filename = document.getElementById('fileinput').value.split('/') [2];// or the last index returned here since the last index will always be the file name
(Sorry that cant format my answer. I answered by a smartphone)