javascript copy input file and get full file path - javascript

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.

Related

js assign one image input value to another

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.

How to copy file path in to span in addition to the input control itself?

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?

How to save input data from text box to excel using pure/native JavaScript and html?

how to save inputted data from text box made in html tag to Excel file using html and pure/native JavaScript? I have two input text box, data 1 and data 2, when the user input something in those text box and click the save button, the data/value inputted will be save in existing Excel file. This Excel file has 2 columns, one for data 1 and second, for data 2.
Please help me, I'm newbie in JavaScript. I really appreciate your help. Thank you.
Here's my little code of html:
<form>
Data 1: <input type="text" name="CA" size="75"/><br/>
<br />
Data 2: <input type="text" name="PA" size="75"/><br/>
<br />
<input type="submit" value="Save New Address"/>
</form>
Sorry,
I don't think this is possible using only JavaScript & HTML
:(
it is pure javascript
you can create an automation object (in windows) using ActiveXObject() in your javascript code. example:
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
// a text is stored in the first cell
ExcelSheet.ActiveSheet.Cells(1,1).Value = "Texto1";
// the sheet is saved
ExcelSheet.SaveAs("D:\\TEST.XLS");
// close Excel with the Quit() method of the Application object
ExcelSheet.Application.Quit();

Apply javascript with the script tag

I have a page where users can creates their own script to modify texts on the server (don't worry the access is restricted to a few users). So the users only have three fields they can fill, one with the name of the rule, another with the expression to replace and a last one with what to replace it with:
<label id="name">Name: </label> <input type="text" name="ruleName" size="50" id="ruleName"></input> </br>
<label id="input">Replace: </label> <input type="text" size="50" name="inputStep1" id="inputStep1"></input> </br>
<label id="output">By:</label> <input type="text" size="50" id="outputStep1"></input></br>
After that the rules are stored in a file on the server via a php post (I'll spare you the unecessary details of this command...). and then the rules are listed in a form with checkboxes, and I want that when the checkboxes are clicked the rule is applied.
The only thing I could come up with was to import the script file via a script tag but only by importing it it doesn't run the inside script.
How do I do that?
Thanks
If i understund you correct, you would have to create a script file with contentlike this
generate Script on the server:
// i would approch this totally differt, because i would not let user generate script on the server, but to answer the question ...
function executeRule(){ // name of the function is probably the Rulename and must be unique
document.getElementyId("withRules").innHTML = document.getElementyId("withRules").innHTML.replace('[userenteredvalue1]','[userenteredvalue2]');
}
//this code should just be executed when the radiobutton is selected
and than i would add the script per html - script - tag
<script src="/generated_user_script.js"></script> <!-- a line per generated script -->
and than on select(the onchange/onclick Event, when the checked attribute is set) i would call the function, quick an dirty. :)
if you have many rules you need uniqe names, so that they dont override themselfes and so on.
this said an other approche were javascript code is not create would be better.
If it is only the replace function, may be you could store the input and output values or so.

Angular.js Dynamic Form input types

I'm trying to make an Angular.js app that creates dynamic form inputs from a JSON object.
So firstly, I have a JSON object (called fields):
[
{"field_id":209,"form_id":1,"name":"firstname","label":"First Name","type":"text"},
{"field_id":210,"form_id":1,"name":"lastname","label":"Last Name","type":"text"},
{"field_id":211,"form_id":1,"name":"email","label":"Email","type":"text"},
{"field_id":212,"form_id":1,"name":"picture","label":"Picture","type":"file"},
{"field_id":213,"form_id":1,"name":"address","label":"Address","type":"file"},
{"field_id":214,"form_id":1,"name":"password","label":"Password","type":"password"},
{"field_id":215,"form_id":1,"name":"","label":"","type":"submit"}
]
The object key type is the input type for a form. See below:
<p ng-repeat="field in fields">
{{field.name}} : <input type="{{field.type}}" value="{{record.data[field.name]}}" />
</p>
Now this works completely fine for submit, text, password, checkbox and radio fields. But if the type is file, it sets the input type to text.
If I replace {{field.name}} with {{field.type}} for the text, I can confirm it is outputting file.
If I statically change <input type="{{field.type}}"... to <input type="file"... it will display a file input correctly.
Why won't it let me set an input type as a file dynamically?
Topic if changing type property if <input> element is hot topic.
Actually, as AngularJS behaviour depends on was jQuery added (before or after angular.js).
Here you can read some discussion about possibility to change type:
change type of input field with jQuery
Also there is pull request to AngularUI for adding new directive with support of dynamic type change: https://github.com/angular-ui/angular-ui/pull/371
If you find suggested solution is not good enough (though as type is not changed after you render form) you can go with ng-switch way - just show corrent input for user.

Categories

Resources