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

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

• javascript
• html

Share Improve this question Follow asked Jul 15, 2013 at 5:32 PopeyePopeye 1,55833 gold badges3030 silver badges4242 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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;
}

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.