How to set a value to a file input in HTML?
You cannot set it to a client side disk file system path, due to security reasons.
Imagine:
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>
You don't want the websites you visit to be able to do this, do you? =)
You can only set it to a publicly accessible web resource as seen in this answer, but this is clearly not the same as a client side disk file system path and it's therefore useless in that context.
Can't set the value of a file input with javascript
You are trying the set the value
of the <input type="file">
to a string. This can't be done since type="file"
only accepts file's as valid input.
Please read more about type="file"
at MDN.
Removing the types fixes it (temporary)
document.getElementById("icon-removal-btn").onclick = function(e){ e.preventDefault() let label = document.getElementById("icon-label"); let input = document.getElementById("icon-input"); label.innerHTML = 'Choose File'; input.value = 'deleted'; }
<div class="form-row"> <div class="form-group col"> <div class="form-control-lg input-group mt-1"> <div class="input-group-prepend"> <span class="input-group-text">Upload Icon</span> </div> <div class="custom-file"> <button class="icon-removal-button" id="icon-removal-btn">Delete</button> <input name="icon" id="icon-input" value="{{$card->icon}}" class="custom-file-input" id="inputGroupFile01"> <label class="custom-file-label" id="icon-label" for="inputGroupFile01">{{$card->icon}}</label> </div> </div> </div> </div>
How to set file input value when dropping file on page?
Disclaimer: Correct as of December 2017 and for modern browsers only.
TL;DR: Yes, now you can!
*if you have a dataTransfer or FileList object
Previously, programmatically changing the files input[type=file]
field was disabled due to legacy security vulnerabilities, which are fixed on modern browsers.
The last of the major browsers (Firefox), has recently enabled us to set the files for the input file field. According to testing done by W3C, it seems that you can already do this on Google Chrome!
Relevant screenshot and text quoted from MDN:
You can set as well as get the value of
HTMLInputElement.files
in all modern browsers.
Source and browser compatibility, see MDN
The Firefox bugfix discussion thread has this demo you can test it out on, and here's the source if you want to edit it. For future reference in case this link dies, I will also include it as a runnable snippet below:
let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');
target.addEventListener('dragover', (e) => {
e.preventDefault();
body.classList.add('dragging');
});
target.addEventListener('dragleave', () => {
body.classList.remove('dragging');
});
target.addEventListener('drop', (e) => {
e.preventDefault();
body.classList.remove('dragging');
fileInput.files = e.dataTransfer.files;
});
body {
font-family: Roboto, sans-serif;
}
body.dragging::before {
content: "Drop the file(s) anywhere on this page";
position: fixed;
left: 0; width: 100%;
top: 0; height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
background-color: rgba(255, 255, 0, .3);
pointer-events: none;
}
button, input {
font-family: inherit;
}
a {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<h1>Drag and drop files into file input</h1>
<p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p>
<p>
<input type="file">
</p>
</body>
</html>
Can we set a Value for <input type=file /> ? If Yes, please tell us to how to set it
This is not allowed due to security reason:
You can reference the following links:
Set default value for a input file form
How to set a value to a file input in HTML?
Setting value of file input programmatically
<input type="file">
doesn't allow you to set the value
programmatically but it must be the user who locates the file to upload. Thus, you can't turn your input into a type="text"
, set a path and turn the so-called input into type="file"
again and hold the value
.
What would happen if I were to change the input type to text and then
add the file path and proceed to submit the form? will it work for
selecting a file to run?
It would send the file path instead of the file.
Related Topics
How to Get Around .Push Is Not a Function in JavaScript
How to Append Value to an Array Only If Not Exists and Remove It If Not
Check If Json Response Data Is Empty
How to Remove All Null and Empty String Values from an Object
How to Hide Div When You Scroll to Bottom and Show It Again When Scroll Up to Top
How to Open a Url Link from JavaScript Inside a Google Apps Script HTML Google Site Gadget
Select Li Element With Arrow Keys (Up and Down) Using JavaScript (Jquery)
Blocking Device Rotation on Mobile Web Pages
Redirect Changing Page Url But Not Rendering New Page
Method for Splitting String into Separate Cells in Sheets/App Script
Check If Second String Is Rotation of Another String
Print Pdf Directly from JavaScript
Keep Selected Dropdown Result After Refreshing Page, Jquery
Prevent React-Router History.Push from Reloading Current Route
Pass Input Tag Value to as Href Parameter
How to Specify a Single File to Be Seed Only