manipulate html input type file filename in firefox

Question

I have a html input type file control. When I select a file with very big name, it shows complete filename in firefox which causes bad UI. Is there any solution for this problem like changing name etc?

Answer 1

You can handle it this way:

1. Make your html input file control hidden and add onchange event handler to change selected file name
2. Add a readonly html textbox control for showing changed file name
3. Add html button control with onclick event handler to trigger file control's click event

DEMO here

HTML:

<input type="text" id="txtFile" readonly="true" />
<input type="button" id="btn" value="Browse..." onclick="browseFile();" />
<input type="file" id="file1" name="file1" onchange="setFileName(this.value);" />

CSS:

#file1 {
    display: none;
}

JS:

function browseFile() {
    document.getElementById('file1').click();
}

function setFileName(fileName) {

    /* Manipulate file name here */
    fileName = fileName.substr(0, fileName.lastIndexOf('.'));
    document.getElementById('txtFile').value = fileName;
}

Answer 2

There is three possible answers I know:

1. You can style size of your input, and then browser cut longer names to given size (with '...' at the end of visible part).
2. You can not change from script the value of file input for security reason. The same is with trigger its click event. So the answer in this case is No .
3. You can cover whole file input with "pseude custom css" . It is not real input styling but uses some trick with opacity. Look here for more details.