Show filename from upload filefield with javascript

Question

I need your help. This works so far that I will get alerts when I add a filefield and add files to them. But when I want to change a previous field it will show the last ones value. I have tried using the different id:s but I'm stuck.

Also how to show the filename only in showSrc() here?

upload.html

<form id="uploadForm" action="{% url fileman.views.upload %}" method="post"  enctype="multipart/form-data">{% csrf_token %}
<p><input type="file" name="ufile1" id="myfile1" onChange="javascript:showSrc();" size="20"><a href="#" id="myframe1"></a></p>
<p id="addFileFild"><a href="#" id="myframe" onclick="return addFileFild();"><img src="{{ fileman_media_url }}/plus_icon.png"WIDTH=25 HEIGHT=25></a></p>

script.js

function addFileFild(){
  ufile = ufile+1;
  myfile = myfile+1;
  myframe = myframe+1;
  $("#addFileFild").before('<p><input type="file" name="ufile'+ufile+'" id="myfile' +myfile+'" onChange="javascript:showSrc();" size="20"><a href="#" id="myframe' +myframe+'"></a></p>');
return 0;
}


function showSrc() {
  document.getElementById("myframe"+myframe).href = document.getElementById("myfile" +myfile).value;
  var theexa=document.getElementById("myframe"+myframe).href.replace("file:///","");
  alert(document.getElementById("myframe"+myframe).href.replace("file:///",""));
  }

This is where I would have to get the correct field value each time:

document.getElementById("myfile" +myfile).value;

Here is the solution by Dr.Molle with added C:/fakepath removal for chrome and IE8+.

function showSrc(obj) {
  //obj.nextSibling.href = obj.value;
  // this is for Chrome and IE8+ excluding C:/fakepath/...
  var filename = obj.value.replace(/^.*\\/, '')
  //Write filename to page.
  obj.parentNode.replaceChild(document.createElement('span'),obj.parentNode.lastChild);
  obj.parentNode.lastChild.appendChild(document.createTextNode(filename));

}

The file input element is heavily secured, since it interacts directly with the users files. I highly doubt its allowed to get the path. — TJHeuvel
– TJHeuvel, Commented Jul 20, 2011 at 8:18
No I get the destination path, but with the filename which is enough. I just need to know if there is a way I can check which filefield I'm on at the moment and show that with showScr(). If I do it manually I am able to do it, say if I set myfile="myfile2" I can change the second filefield and it will show the changes correctly. — leffe
– leffe, Commented Jul 20, 2011 at 8:24

Dr.Molle · Accepted Answer · 2011-07-20 22:42:21Z

2

Provide the input as argument to showSrc()

onChange="showSrc(this)"

Inside showSrc access this argument:

function showSrc(obj) {
  obj.nextSibling.href = obj.value;
  //output the src inside the link
  obj.nextSibling.innerHTML = '';
  obj.nextSibling.appendChild(document.createTextNode(obj.value));
  //......
  }

Edited function regarding to the comments:

function showSrc(obj) {
  obj.parentNode.replaceChild(document.createElement('span'),obj.parentNode.lastChild);
  obj.parentNode.lastChild.appendChild(document.createTextNode(obj.value));
}

edited Jul 20, 2011 at 22:42

answered Jul 20, 2011 at 8:23

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

leffe Over a year ago

Wow this was even more than I could have hoped for! It gives the filename only right away and reacts to changes correctly. Thank you!

leffe Over a year ago

Do you have an idea on how to write this obj value to my page? Right under the upload filefield for example.

leffe Over a year ago

Awesome! It gives it as a link though, can this be avoided?

Dr.Molle Over a year ago

of course, the link-href is set at the first line. Change the tagName of the link after the input to something else, e.g. <span> and you dont get a link.

leffe Over a year ago

Sorry I didn't quite understand where to insert <span> </span> ?

|

Collectives™ on Stack Overflow

Show filename from upload filefield with javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related