Styling file input

Hi, I am trying to style the upload file input field to match all other fields. I found a js plus css script that will make this happen but in safari it is showing "fakepath". How do I make it just show the file name without the path in safari? Also, I am having trouble making the field box to be longer to match other field. Is that possible? below is the scripts. Thx.

JS.

Code:

---

var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
        if (!W3CDOM) return;
        var fakeFileUpload = document.createElement('div');
        fakeFileUpload.className = 'fakefile';
        fakeFileUpload.appendChild(document.createElement('input'));
        var image = document.createElement('img');
        image.src='pix/button_select.gif';
        fakeFileUpload.appendChild(image);
        var x = document.getElementsByTagName('input');
        for (var i=0;i<x.length;i++) {
                if (x[i].type != 'file') continue;
                if (x[i].parentNode.className != 'fileinputs') continue;
                x[i].className = 'file hidden';
                var clone = fakeFileUpload.cloneNode(true);
                x[i].parentNode.appendChild(clone);
                x[i].relatedElement = clone.getElementsByTagName('input')[0];
                x[i].onchange = x[i].onmouseout = function () {
                        this.relatedElement.value = this.value;
                }
        }
}

---

css

Code:

---

div.fileinputs {
        position: relative;
}

div.fakefile {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
}

input.file {
        position: relative;
        text-align: right;
        -moz-opacity:0 ;
        filter:alpha(opacity: 0);
        opacity: 0;
        z-index: 2;
}

---

html

HTML Code:

---

<div class="fileinputs">
        <input type="file" class="file">
</div>

---

You can use a regular expression to grab the filename from a path.

Code:

---

this.relatedElement.value = this.value.match(/[^\/\\]*$/i)[0];

---

To change the width just use the CSS width parameter.

Code:

---

.fakefile input { width: 100px; }

---

Thanks. It works great. Another question. Right now the script will not allow the user to delete the file after uploaded it. Is there a work around that will allow user to delete uploaded file?

Quote:

---

Originally Posted by phpnewbie08

Thanks. It works great. Another question. Right now the script will not allow the user to delete the file after uploaded it. Is there a work around that will allow user to delete uploaded file?

---

after upload, your server needs to delete the file, it's out of JS's hands at that point...

I meant to say after the user selects a file, then decides not to upload it. How do I allow user to delete the file from the input field. In a normal <input type="file"> the user can simply remove the path.

any help?

You'll have to either replace the file input with a new one or reset the whole form. Another solution would be to move the file input to a temporary form, reset that form, and then move the input back.