I have two image input fields
<input type="file" accept="image/*" id="one" />
<input type="file" accept="image/*" id="two" />
I am trying to sync value from two to one, whenever two receives input, assign the value to one. two is just a field visible in frontend, one is the original form used for data collection and upload.
two.onchange = () => {one.value = two.value}
since it is file field, I wonder if this may not work (have not write unit test yet, because even the value is logged in fronted, I doubt the file will be catched in backend). I will be more than grateful if someone suggest a tangible way to do it.
You are doing wrong you have to set .files property instead of .value because the Browser stored files in files property not in value property. You can do it like below Example:
const one = document.getElementById('one');
const two = document.getElementById('two');
two.onchange = () => {one.files = two.files}
<input type="file" accept="image/*" id="one" />
<input type="file" accept="image/*" id="two" />
sorry, #Abdul Basit's answer won't work. I tried to assign files but it turns out working in frontend, but there is actually no data transferred to backend. therefore, it is impossible to assign value(files) between file inputs.
one.files = two.files
<MultiValueDict: {}>
I did it by DOM replacement.
// replace image input
two.remove();
Array.from(one.attributes).forEach(attr => {
two.setAttribute(attr.nodeName, attr.nodeValue);
});
one.parentNode.replaceChild(two, one);
<MultiValueDict: {'image': [<InMemoryUploadedFile: main.jpg (image/jpeg)>]}>
here we got files in backend eventually.
Related
I want to insert an image using prompt() in JavaScript
Here is the thing I tried :
var name = prompt("Enter your name"); [Typeof string or number]
What I want is:
var profile_img = prompt("Choose Your Picture"); [Typeof img]
No, it is not possible. A window.prompt() call only accepts text input.
Depending on your use case, the user could enter the public URL to an image (any supported protocol, even the pseude-scheme data:) and your script could then fetch the image from the given URL. Another possibility mentioned by Andrew in the comments: have users input an encoded version of the image (base64, hexdump, …) and then parse it yourself to get back the binary image data.
To then insert the image into your DOM, see other questions and answers on Stackoverflow, such as DOM appendChild to insert images:
let img = document.createElement("img");
img.src = 'path/to/image';
parent_element.appendChild(img);
What you can do is to use <input type="file" .. and trigger it with the js
Assuming you have jQuery, but the principle should work regardless
<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />
Then look at this answer how to display the image without uploading it to the server
Hello first of all sorry if Im not explaining very well but its difficult even to me. What Im try to do its get the value from an input to after that print that value into a label.
Here is what I have
Code Example
I show the preview of the image with a input down, I want to get the text that user types in that input.
<div class="col-lg-12">
<label for="files" class="hidden-print">Select multiple files:</label>
<input id="files" class="hidden-print" type="file" multiple="multiple" />
<output id="result" />
</div>
If have questions about something please let me know and again sorry if I not much clear.
It would be relatively simple, just fetch and add an event listener after you have inserted the element into the (D.O.M.). In this case, you would add (right after output.insertBefore(div, null)):
// fetch the element
var input = document.getElementById('txt')
// attach an relevant event listener to it
input.addEventListener('input', function (event) {
console.log(event.target.value) // what ever is typed
});
Here is your updated fiddle: https://jsfiddle.net/xLopjwh9/2/
I hope that helps!
So far I tried this:
JS:
function Copy(copyfrom, copyto) {
document.getElementById(copyto).value = copyfrom.value;
}
And HTML code look like this:
<div>
<input type="file" onchange="Copy(this, 'txtFileName');" />
</div>
<div>
<span id="txtFileName" type="text" readonly="readonly" />
</div>
I want To copy the selected file name/path to different span,
Thanks!
From Joe Enos answer you don't need to get server path
Some browsers have a security feature that prevents javascript from
knowing your file's local full path. It makes sense - as a client, you
don't want the server to know your local machine's filesystem. It
would be nice if all browsers did this.
And to get the name of file, try to use innerText property of span instead of value as value works on form element fields try this,
function Copy(copyfrom, copyto) {
document.getElementById(copyto).innerText = copyfrom.value;
}
Working demo
<input type="file"..> will not show textbox in chrome and safri browser, you can configure the display styles by CSS itself, go to the link here
This is not possible due to security reasons.
For more details, see: How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
For example, there is a field:
<input type="file" name="files[]" multiple="multiple" class="multiupload" />
How can I acces all the files list when multiple files have selected?
$('.multiupload').val() returns only first file name. I trying to do this in Google Chrome.
$('.multiupload').map(function(){
return $(this).val();
});
Update: For using multiple attribute for one input filed, there is files property you could get.
$.map($('.multiupload').get(0).files, function(file) {
return file.name;
});
My first question is:
- is it possible to copy from 1 file input data to another file input data?
what i mean is:
I have this input : <input type="file" name="fileinput1" />
Now I want to take what the user browse and copy the data to
<input type="file" name="fileinput2" />
Is that possible?
Second question, I have this element on my HTML input multiple="multiple"
it let me choose few files. Now I can see in the bottom that the names are getting together like this:
"img1" "img2" "img3" "img4"
Is there any way to separate this into few inputs? Like to write inputs with JavaScript and with the path to everyone of them, is that possible?
is it possible to copy from 1 file input data to another file input data?
No. File inputs are read only.
is there any way to separate this into few inputs?
No.