Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
Reorder multi file names
Hi,
I have a javascript that allow the user to upload multiple files and removes files.
My code will add the files starting from 0 - what ever number of files need to upload.
for example:
name=file0
name=file1
name=file2
name=file3
name=file4
if I remove two of the uploaded files (file2, file3)
I want the javascript to rename my files and give me the total number of upload.
so the output should be:
name=file0
name=file1
name=file2
Result = 3 for the total number of uploaded files.
I removed two of the files and renamed them from 0 - 2
this is my code
I have a javascript that allow the user to upload multiple files and removes files.
My code will add the files starting from 0 - what ever number of files need to upload.
for example:
name=file0
name=file1
name=file2
name=file3
name=file4
if I remove two of the uploaded files (file2, file3)
I want the javascript to rename my files and give me the total number of upload.
so the output should be:
name=file0
name=file1
name=file2
Result = 3 for the total number of uploaded files.
I removed two of the files and renamed them from 0 - 2
this is my code
var counter = 0;
function AddFileUpload()
{
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
'" type="file" />' +
'<input id="Button' + counter + '" type="button" ' +
'value="Remove" onclick = "RemoveFileUpload(this)" />';
document.getElementById("FileUploadContainer").appendChild(div);
counter++;
}
function RemoveFileUpload(div)
{
//here I need to rename my input files because I removed one and get the total count of the uploaded files.
document.getElementById("FileUploadContainer").removeChild(div.parentNode);
}
<table style="width:100%;border:1px solid #eeeeee;background-color:#f5f5f5;">
<tr>
<td align="right" valign="top" style="width:10%;padding-right:5px;"><span style="color:#4a79a5;font-weight:normal;"> <span style="color:#4a79a5;font-weight:normal;"> Click to add files:</span></td>
<td valign="top" colspan="6">
<input id="Button1" type="button" value="add" onclick = "AddFileUpload()" />
<br /><br />
<div id = "FileUploadContainer">
<!--FileUpload Controls will be added here -->
</div>
<br />
</td>
</tr>
</table>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try this
function RemoveFileUpload(div)
{
//here I need to rename my input files because I removed one and get the total count of the uploaded files.
var el = document.getElementById("FileUploadContainer");
el.removeChild(div.parentNode);
var children = el.getElementsByTagName('input');
var indx = 0;
for (var i = 0; i < children.length;i++) {
if (children[i].type.toLowerCase() == 'file') {
children[i].setAttribute('name', 'file' + indx++);
}
}
}
Hi Julian,
Thank you for helping me on this.
I am getting this output
<input name="file1" id="file1" submitName="file0" type="file"/>
what i want is for the name and id to change so the output should look like this:
<input name="file0" id="file0" submitName="file0" type="file"/>
right now it doesn't change the name or id and it add "submitName to my input file field.
Thank you for helping me on this.
I am getting this output
<input name="file1" id="file1" submitName="file0" type="file"/>
what i want is for the name and id to change so the output should look like this:
<input name="file0" id="file0" submitName="file0" type="file"/>
right now it doesn't change the name or id and it add "submitName to my input file field.
Fairly straight forward - create the name and then assign to the children\[i\].id member like so.
function RemoveFileUpload(div)
{
//here I need to rename my input files because I removed one and get the total count of the uploaded files.
var el = document.getElementById("FileUploadContainer");
el.removeChild(div.parentNode);
var children = el.getElementsByTagName('input');
var indx = 0;
for (var i = 0; i < children.length;i++) {
if (children[i].type.toLowerCase() == 'file') {
var newname = 'file' + indx++;
children[i].setAttribute('name', newname);
children[i].id = newname;
}
}
}
right now it doesn't change the name or id and it add "submitName to my input file field.Then you need to post code to show how you have implemented. Code does work - refer sample below
http://www.marcorpsa.com/ee/t921.html
What browser are you using? There was a known bug in IE that resulted in submitname being created - but that was IE7.
I have updated the sample to dump the contents of the input's to a textarea so you can view them there. Tested in IE8,10,11 - seems to work fine?
I have updated the sample to dump the contents of the input's to a textarea so you can view them there. Tested in IE8,10,11 - seems to work fine?
@Julian: You need to reset the global counter variable after or the addition of new buttons/rows will off once you remove an item. Also, since you already have a test page setup, I am curious as to what the behavior will be when let's say you have already attached 4 items, remove the second, and you then submit. Will the "second" item still reflect the old name (since technically the file was "attached" before the field was renamed)? If so, doing the naming on the server-side might be easier.
You need to reset the global counter variable after or the addition of new buttons/rows will off once you remove an item.Correct - I was not focusing on the adding part as it did not require change.
Involves changing the indx to counter in the code so that the counter is set to the correct value after the rename
function RemoveFileUpload(div)
{
//here I need to rename my input files because I removed one and get the total count of the uploaded files.
var el = document.getElementById("FileUploadContainer");
el.removeChild(div.parentNode);
var children = el.getElementsByTagName('input');
counter = 0;
for (var i = 0; i < children.length;i++) {
if (children[i].type.toLowerCase() == 'file') {
var newname = 'file' + counter++;
children[i].setAttribute('name', newname);
children[i].id = newname;
}
}
document.getElementById("result").value = el.innerHTML;
}
when I test your example I see the correct output but when I bring your code to my page I get this result
file id is the only one that is getting updated
<!--FileUpload Controls will be added here -->
<DIV><INPUT id=file0 name=file2 type=file><INPUT id=Button2 onclick=RemoveFileUpload(this) value=Remove type=button></DIV>
<DIV><INPUT id=file1 name=file3 type=file><INPUT id=Button3 onclick=RemoveFileUpload(this) value=Remove type=button></DIV>
file id is the only one that is getting updated
>> the rename is on the id and name fields only - not sure how that relates to the actual file attached? Maybe I did not understand your question?
What I meant was, does the browser honor the name of the field when it was "attached/selected", or does it honor the name at the time of submission? To clarify, if there are four <input type="file"/> initially (named file0...file3). If I then attach a file on all four. but just before submission I remove the second one only (ultimately uploading only three total). Does the server see file0,file2,file3 (the original name sequence), or does it see file0,file1, file2 (the new name sequence)?
What I meant was, does the browser honor the name of the field when it was "attached/selected", or does it honor the name at the time of submission? To clarify, if there are four <input type="file"/> initially (named file0...file3). If I then attach a file on all four. but just before submission I remove the second one only (ultimately uploading only three total). Does the server see file0,file2,file3 (the original name sequence), or does it see file0,file1, file2 (the new name sequence)?
Hielo,
the server should see the new file0,file1,file2
and provide the correct count so i can do my loop
the server should see the new file0,file1,file2
and provide the correct count so i can do my loop
@hielo,
Tested on genuine XP IE8 - also worked.
What browser version are you using?
What I meant was, does the browser honor the name of the field when it was "attached/selected", or does it honor the name at the time of submissionAt the time of submission. If you submit the form on the example page you will see that the file names come back
file id is the only one that is getting updatedTested in IE - works as expected (IE11 and emulation on Edge, 10, 9, 8 and 7) - all worked until IE7.
Tested on genuine XP IE8 - also worked.
What browser version are you using?
and provide the correct count so i can do my loopWhat are you using on the backend?
This gives the same results in IE7 but works everywhere else - it uses JQuery instead of straight javascript. See if this makes a difference to your code
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function AddFileUpload()
{
...
}
function RemoveFileUpload(div)
{
var el = $('#FileUploadContainer');
$(div).parent().remove();
counter = 0;
$('input[type="file"]', el).each(function() {
var newname = 'file' + counter++;
$(this).attr({name: newname, id: newname});
});
}
</script>
lulu50,
While I do appreciate your generosity with the points, in the future, please take the time to assess the responses. Your question was really addressed by Julian. Julian actually solved the problem, so the Accepted solution should have been once of his posts. At most, my post should have been an "Assist". However, in this case I feel that I did not make any "valuable" contribution to even merit an "assist". I would have preferred for him to get the full credit.
Regards,
Hielo
While I do appreciate your generosity with the points, in the future, please take the time to assess the responses. Your question was really addressed by Julian. Julian actually solved the problem, so the Accepted solution should have been once of his posts. At most, my post should have been an "Assist". However, in this case I feel that I did not make any "valuable" contribution to even merit an "assist". I would have preferred for him to get the full credit.
Regards,
Hielo
Hielo - I gave you credit because you recommend using server side which I did and solved the issue I was having.
Julian - I gave you credit because your solution is correct but for some reason I couldn't get to work when I put your code in my files. So, I had to do it using server side instead javascript.
I don't know why the example that you provided works fine on your end but when I bring in the same code to my page, I am getting the wrong result.
So therefore, I split the point.
Thanks,
Lulu
Julian - I gave you credit because your solution is correct but for some reason I couldn't get to work when I put your code in my files. So, I had to do it using server side instead javascript.
I don't know why the example that you provided works fine on your end but when I bring in the same code to my page, I am getting the wrong result.
So therefore, I split the point.
Thanks,
Lulu
Premium Content
You need an Expert Office subscription to comment.Start Free Trial