Writing a filename into a textarea minus the file path

[Sam_C]

I've been playing with this for several hours without success and I think it's time to ask for an expert opinion. ;) In short, I want to be able to browse for a local image file using a "file" input field and write the filename into a textarea minus the file path when a button is clicked. I have two separate scripts/forms but combining them is beyond my very limited knowledge of javascript, if it's even possible.

This is a stripped down version of the original script and form...

<script language="javascript">
function WriteItIn(form){
var txt='';
txt+='<img src="'+form.img.value+'">';
form.source.value=txt;
}
</script>

<form name="gen" action="#">
<input type="file" name="img" size="55">
<textarea name="source" rows="5" Cols="65"></textarea>
<input type="button" value="Make Code" onClick="WriteItIn(this.form);">
</form>

...and this is the sort of thing that I'm trying to add to it, but without the alert message:

<script language="JavaScript">
function getExtension(value) {
return value.substring(value.lastIndexOf('\\') + 1,value.length);
}
</script>

<form>
<input name="myFile" type="file">
<input type="button" value="Extract" onClick="alert(getExtension(this.form.myFile.value))">
</form>

Is it possible?

[jshanman]

If the user types in a file path, then you can access it via .value, however, if the user uses the browse button, the .value property is not set for security reasons.

- JS

[Sam_C]

Err, thanks. So... reading between the javascript lines, would that be a "No, it's not possible"? :)

[milanmk]

<script language="javascript">
function WriteItIn(form){
form.source.value = form.img.value.substring(form.img.value.lastIndexOf('\\') + 1, form.img.value.length);
}
</script>

<form name="gen" action="#">
<input type="file" name="img" size="55">
<textarea name="source" rows="5" Cols="65"></textarea>
<input type="button" value="Make Code" onClick="WriteItIn(this.form);">
</form>

Is that what you want? I just made my guess because i didnt get what exactly you mean to say by "add to it".

Milan

[Sam_C]

Thanks for that. :)

I meant that I was trying to add the function of the second script (removing the local file path) to the first script. Basically I'm trying to make an HTML code "generator" of sorts. For example, instead of the user having to type imagename.jpg into a form field so that it can be written into the code, it occurred to me that it might be possible to browse for the image instead. The only problem was the local file path.

This bit of tacked together code shows the sort of thing I've been trying to achieve - it works now but it might be breaking every rule in the javascript book for all I know. ;)

<script language="javascript">
function WriteItIn(form){
form.source.value = form.img.value.substring(form.img.value.lastIndexOf('\\') + 1, form.img.value.length);
var txt='';
txt+='<img src="'+form.source.value+'">';
form.source.value=txt;
}
</script>

<form name="gen" action="#">
<input type="file" name="img" size="55">
<textarea name="source" rows="5" Cols="65"></textarea>
<input type="button" value="Make Code" onClick="WriteItIn(this.form);">
</form>