Copying file names from upload to textarea
-1
I have a code that will copy the file names and add them to the textarea. Everything works but when you add more files, the first ones are deleted. How to fix it?
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = '';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Display file name in page after selecting file in file input</title>
</head>
<form>
<input type="file" name="file" id="file" multiple
onchange="javascript:updateList()" />
<br/>Selected files:
<textarea id="fileList"></textarea>
<script src="js/index.js"></script>
</body>
</html>FIDDLE: https://jsfiddle.net/yhw8zfue/
javascript html
edited Nov 27 '18 at 14:17
Prashant Pimpale
3,5153932
asked Nov 27 '18 at 13:27
LeilangLeilang
82
add a comment |
-1
I have a code that will copy the file names and add them to the textarea. Everything works but when you add more files, the first ones are deleted. How to fix it?
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = '';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Display file name in page after selecting file in file input</title>
</head>
<form>
<input type="file" name="file" id="file" multiple
onchange="javascript:updateList()" />
<br/>Selected files:
<textarea id="fileList"></textarea>
<script src="js/index.js"></script>
</body>
</html>FIDDLE: https://jsfiddle.net/yhw8zfue/
javascript html
edited Nov 27 '18 at 14:17
Prashant Pimpale
3,5153932
asked Nov 27 '18 at 13:27
LeilangLeilang
82
you should not be using innerHTML for a textarea
– epascarello
Nov 27 '18 at 13:36
Why would the first ones be deleted if you loop over all the files?
– epascarello
Nov 27 '18 at 13:37
add a comment |
-1
-1
-1
I have a code that will copy the file names and add them to the textarea. Everything works but when you add more files, the first ones are deleted. How to fix it?
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = '';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Display file name in page after selecting file in file input</title>
</head>
<form>
<input type="file" name="file" id="file" multiple
onchange="javascript:updateList()" />
<br/>Selected files:
<textarea id="fileList"></textarea>
<script src="js/index.js"></script>
</body>
</html>FIDDLE: https://jsfiddle.net/yhw8zfue/
javascript html
edited Nov 27 '18 at 14:17
Prashant Pimpale
3,5153932
asked Nov 27 '18 at 13:27
LeilangLeilang
82
I have a code that will copy the file names and add them to the textarea. Everything works but when you add more files, the first ones are deleted. How to fix it?
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = '';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Display file name in page after selecting file in file input</title>
</head>
<form>
<input type="file" name="file" id="file" multiple
onchange="javascript:updateList()" />
<br/>Selected files:
<textarea id="fileList"></textarea>
<script src="js/index.js"></script>
</body>
</html>FIDDLE: https://jsfiddle.net/yhw8zfue/
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = '';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Display file name in page after selecting file in file input</title>
</head>
<form>
<input type="file" name="file" id="file" multiple
onchange="javascript:updateList()" />
<br/>Selected files:
<textarea id="fileList"></textarea>
<script src="js/index.js"></script>
</body>
</html>updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = '';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Display file name in page after selecting file in file input</title>
</head>
<form>
<input type="file" name="file" id="file" multiple
onchange="javascript:updateList()" />
<br/>Selected files:
<textarea id="fileList"></textarea>
<script src="js/index.js"></script>
</body>
</html>javascript html
javascript html
edited Nov 27 '18 at 14:17
Prashant Pimpale
3,5153932
asked Nov 27 '18 at 13:27
LeilangLeilang
82
edited Nov 27 '18 at 14:17
Prashant Pimpale
3,5153932
asked Nov 27 '18 at 13:27
LeilangLeilang
82
edited Nov 27 '18 at 14:17
Prashant Pimpale
3,5153932
edited Nov 27 '18 at 14:17
Prashant Pimpale
3,5153932
edited Nov 27 '18 at 14:17
Prashant Pimpale
3,5153932
3,5153932
asked Nov 27 '18 at 13:27
LeilangLeilang
82
asked Nov 27 '18 at 13:27
LeilangLeilang
82
asked Nov 27 '18 at 13:27
LeilangLeilang
82
82
you should not be using innerHTML for a textarea
– epascarello
Nov 27 '18 at 13:36
Why would the first ones be deleted if you loop over all the files?
– epascarello
Nov 27 '18 at 13:37
add a comment |
you should not be using innerHTML for a textarea
– epascarello
Nov 27 '18 at 13:36
Why would the first ones be deleted if you loop over all the files?
– epascarello
Nov 27 '18 at 13:37
you should not be using innerHTML for a textarea
– epascarello
Nov 27 '18 at 13:36
you should not be using innerHTML for a textarea
– epascarello
Nov 27 '18 at 13:36
Why would the first ones be deleted if you loop over all the files?
– epascarello
Nov 27 '18 at 13:37
Why would the first ones be deleted if you loop over all the files?
– epascarello
Nov 27 '18 at 13:37
add a comment |
2 Answers
2
active
oldest
votes
4
You are setting your textarea value to empty string.
You can fix by removing the line:
output.innerHTML = '';
edited Nov 27 '18 at 13:34
Luke Walker
26914
answered Nov 27 '18 at 13:31
JinJin
9311322
add a comment |
1
When you add more files the function will run again and updste your filelist. but in your code you reset the list of files here:
output.innerHTML = '';
so instead you want to have whats currently in there. replace it with that:
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = output.value;
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}
answered Nov 27 '18 at 13:36
xDragoxDrago
6418
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53500805%2fcopying-file-names-from-upload-to-textarea%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
You are setting your textarea value to empty string.
You can fix by removing the line:
output.innerHTML = '';
edited Nov 27 '18 at 13:34
Luke Walker
26914
answered Nov 27 '18 at 13:31
JinJin
9311322
add a comment |
4
You are setting your textarea value to empty string.
You can fix by removing the line:
output.innerHTML = '';
edited Nov 27 '18 at 13:34
Luke Walker
26914
answered Nov 27 '18 at 13:31
JinJin
9311322
add a comment |
4
4
4
You are setting your textarea value to empty string.
You can fix by removing the line:
output.innerHTML = '';
edited Nov 27 '18 at 13:34
Luke Walker
26914
answered Nov 27 '18 at 13:31
JinJin
9311322
You are setting your textarea value to empty string.
You can fix by removing the line:
output.innerHTML = '';
edited Nov 27 '18 at 13:34
Luke Walker
26914
answered Nov 27 '18 at 13:31
JinJin
9311322
edited Nov 27 '18 at 13:34
Luke Walker
26914
edited Nov 27 '18 at 13:34
Luke Walker
26914
edited Nov 27 '18 at 13:34
Luke Walker
26914
26914
answered Nov 27 '18 at 13:31
JinJin
9311322
answered Nov 27 '18 at 13:31
JinJin
9311322
answered Nov 27 '18 at 13:31
JinJin
9311322
9311322
add a comment |
add a comment |
1
When you add more files the function will run again and updste your filelist. but in your code you reset the list of files here:
output.innerHTML = '';
so instead you want to have whats currently in there. replace it with that:
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = output.value;
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}
answered Nov 27 '18 at 13:36
xDragoxDrago
6418
add a comment |
1
When you add more files the function will run again and updste your filelist. but in your code you reset the list of files here:
output.innerHTML = '';
so instead you want to have whats currently in there. replace it with that:
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = output.value;
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}
answered Nov 27 '18 at 13:36
xDragoxDrago
6418
add a comment |
1
1
1
When you add more files the function will run again and updste your filelist. but in your code you reset the list of files here:
output.innerHTML = '';
so instead you want to have whats currently in there. replace it with that:
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = output.value;
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}
answered Nov 27 '18 at 13:36
xDragoxDrago
6418
When you add more files the function will run again and updste your filelist. but in your code you reset the list of files here:
output.innerHTML = '';
so instead you want to have whats currently in there. replace it with that:
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
output.innerHTML = output.value;
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += 'n' + input.files.item(i).name + '';
}
output.innerHTML += ' n';
}
answered Nov 27 '18 at 13:36
xDragoxDrago
6418
answered Nov 27 '18 at 13:36
xDragoxDrago
6418
answered Nov 27 '18 at 13:36
xDragoxDrago
6418
answered Nov 27 '18 at 13:36
xDragoxDrago
6418
6418
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53500805%2fcopying-file-names-from-upload-to-textarea%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you should not be using innerHTML for a textarea
– epascarello
Nov 27 '18 at 13:36
Why would the first ones be deleted if you loop over all the files?
– epascarello
Nov 27 '18 at 13:37