[RESOLVED] break up input value into sections

kender

Select File: <input type="file" name="f_file" style="width:400px;" onchange="this.form.f_name.value=this.form.f_file.value" /><br />
File Name: <input type="text" name="f_name" style="width: 300px;" />.<input type="text" name="f_ext" style="width: 75px;" /><br />

instead of getting in the f_name box the full path
C:/fakepath/filename.ext
I want just the "filename" and the "ext" in the second box

how can I break that up in javascript (basically i want the user to be able to manipulate the name if they choose, before uploading)

kender

i am assuming i would use split() function (twice, once for the / in the result and once for the . in that result), but cant seem to get it to work

bradgrafelman

You can't modify the value of a "file" input element - that'd be a huge security vulnerability.

kender

if you look at my code snip, you will see i copy the value, onchange into a text field

i want to modify the text field (2 of them actually) 1 with the file name, other with the extension

bradgrafelman

...Oops, my bad. :o

One problem you'll need to address is the inconsistencies amongst different browsers. For example, on Google Chrome, this.value will report only the filename whereas in IE you'll get the full path to the file.

To handle that, you could emulate PHP's basename() function in Javascript like so:

filepath = filepath.replace(/^.*[\/\\]/g, '');

You'll then be left with "filename.ext", which as you suggested can be broken apart into filename and extension using Javascript's split() function.

kender

thanks for the regex..
got me where I was going, it works now

though very sloppy
Any chance I can get you to show me how to make this a script so i can call the function instead of doing it all inline?

				Select File: <input type="file" name="f_file" style="width:400px;" onchange="

this.form.f_name.value=((this.form.f_file.value.replace(/^.*[\/\\]/g, '')).split('.',1));
this.form.f_ext.value=((this.form.f_file.value.slice(-4)).replace('.',''));

" /><br />
				File Name: <input type="text" name="f_name" style="width: 300px;" />.<input type="text" name="f_ext" style="width: 75px;" /><br />

in the second box i go -4 (.jpg) then remove the dot for the instances where it is a 4 letter extension (.jpeg would then only come up with jpeg and not hack off the first letter)

bradgrafelman

Make your onchange look like this:

onchange="setFile(this)"

and then make a Javascript function that does what you need:

<script type="text/javascript">
function setFile(obj) {
    // now you can use obj.value, obj.form.f_name, etc. etc.
}
</script>

As for your second question, why work from the back when you can just work from the front?

extension = extension.substring(1);

kender

Thanks a ton, got it up and running perfectly