Fill input file form with JavaScript [duplicate] - javascript

This question already has answers here:
How to set file input value when dropping file on page? [duplicate]
(1 answer)
Dynamically set value of a file input [duplicate]
(4 answers)
How to set a value to a file input in HTML?
(10 answers)
Closed 9 years ago.
Note:
The answer(s) below reflect the state of legacy browsers in 2009. Now you can actually set the value of the file input element dynamically/programatically using JavaScript in 2017.
See the answer in this question for details as well as a demo:How to set file input value programatically (i.e.: when drag-dropping files)?
I need to fill an HTML form with JavaScript to set the path of a file for upload it. The web that this form belongs to, already has a visual upload implemented, but
<form id="mobile_fileform">
<input type="file" style="height: 20px; width: 0px; opacity: 0; " id="mobile_fileselect1" multiple="" size="-17">
<input type="file" style="height: 20px; width: 0px; opacity: 0; " id="mobile_fileselect2" multiple="" size="-17">
<input type="file" style="height: 20px; width: 0px; opacity: 0; " id="mobile_fileselect3" multiple="" size="-17">
</form>
How can I set the path of the file in this form and how can I upload it using JavaScript?
Thanks for your help

The value property of input:file is read-only for security reasons. If you want to set it, you'll need to do it server-side.
As a result, what you're asking to do is not possible. Consider the implications: any webpage would be able to upload any file from someone's computer, so long as they knew the path.

Related

GWT: extract textarea value using plain javascript

Context: I'm working on a tampermonkey script to enrich some GWT pages witnin a 3rd party app, no access to sourcecode nor to servers
Problem: I need to extract the value of a textarea element using plain JavaScript (see above as to why)
HTML as I see now: inside a series of table>tr>td>div>div>div
<textarea class="gwt-TextArea" style="height: 400px; width: 600px;" id="MyTarget"></textarea>
issue:
the html of the textarea does NOT contain any text, what I see must be something else
as expected document.getElementById("MyTarget").value==""
Value is the property you want and should work without any problems.
Here is a quick example showing how to use it.
document.getElementById('MyTarget').addEventListener("keyup", function() {
let value = document.getElementById('MyTarget').value;
document.getElementById('MyOutput').innerHTML = value;
})
<textarea class="gwt-TextArea" style="height: 100px; width: 200px;" id="MyTarget" onkeyup="window.keyup"></textarea>
<div id="MyOutput">
</div>

HTML text-field value with 'special characters' [duplicate]

This question already has answers here:
How to prevent XSS with HTML/PHP?
(9 answers)
Closed 3 years ago.
Probably this is a known problem and there is a specific best practice.
I have to fill a text field value with received text from backend.
I this text contains some 'special characters' (for example " <) I have some issued during the rendering of the page.
How can I solve this?
Can I solve this issue front-end side?
I can use only javascript front-end side. I not use PHP;
I use this html code:
<input class="myclass" value="<%= text_from-backend %>" placeholder="My Placeholder"/>
You can replace special characters in PHP:
<input class="myclass" value="preg_replace('/[^ a-z\d]/ui','','<%= text_from-backend %>');" placeholder="My Placeholder"/>

How to style a input type=file in html? [duplicate]

This question already has answers here:
Styling an input type="file" button
(46 answers)
Style input type file? [duplicate]
(6 answers)
Closed 9 years ago.
I did some research and found it could be hard to style a input type=file. However, I realized youtube has a beautiful button displayed when you want to upload your video to the site. (may need login: http://www.youtube.com/upload).
so basically it allows user to click the button, pick a file, and do the upload. I am not sure how this is implemented instead of using the ugly <input> tag? Or anyone knows any alter good way to make a beautiful file upload interface?
LIVE DEMO
<button id="imageDrop" onclick="document.getElementById('uploadImage').click()" title="Click or Drag Image">Upload image</button>
<input id="uploadImage" type="file" />
#imageDrop{
background:#fff;
width:300px;
height:180px;
font-size:20px;
font-style:italic;
border-radius:18px;
border:2px dashed #444;
}
#uploadImage{
visibility: hidden;
height:0px;
width: 0px;
}

input type file set value [duplicate]

This question already has an answer here:
How to set file input value when dropping file on page? [duplicate]
(1 answer)
Closed 5 years ago.
Note:
The answers & comments below reflect the state of legacy browsers in 2009. Now you can actually set the value of the file input element dynamically/programatically using JavaScript in 2017.
See the answer in this question for details as well as a demo:How to set file input value programatically (i.e.: when drag-dropping files)?
Hello everyone is there any way to set input type file's value from my url ? When I add my image file destination to value it can't be displayed
Here is my view:
<div class="editor-label">
<input type="file" name="file" id="file" value="../../banner_image/test.jpg" required="required" />
</div>
Generally - NO WAY! This filed is protected and in some cases you can get the filename (not the whole path) but ... in some browsers. Not possile to set it via html value attribute or using JS.

Styling <input type="file"> [duplicate]

This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
Possible Duplicate:
Styling an input type=“file” button
I was trying to style
<input type="file">
but i have not had much luck. I want to make the textbox disappear and only keep the button. How can I do it?
The CSS way (base code found here):
<html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html>
There is no easy cross-browser way to style the input type of files. Therefore there exist solution that even use javascript.
Here is a jQuery plugin you can use to style file types in the cross-browser fashion:
File Style Plugin for jQuery
Browsers do not let you style file
inputs. File Style plugin fixes this
problem. It enables you to use image
as browse button. You can also style
filename field as normal textfield
using css. It is written using
JavaScript and jQuery.
You can check out the demo here
As also posted on popular ajaxian.com, you can take a look at this too:
A Cheaky Way to Style an input type=”file”
Shaun Inman has got a lovely little
hack that allows you to style file
inputs with CSS and the DOM.
These elements are notoriously painful
to deal with, and now we have select
boxed playing nice on IE, we need
something else to fix up :)
I wrote this jQuery plugin to make it much simpler to style the file input. Use CSS and "fake elements" to get the results you want.
http://github.com/jstnjns/jquery-file
Hope that helps!
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
some browsers need File input visible and click the browse button manually, or it will submit nothing to server. so i suggest Saefraz's first solution: File Style Plugin for jQuery

Categories

Resources