Jump to content

How to change the button text of file?

Recommended Posts

The "upload file..." text is pre-defined by the browser and can't be changed. You can change it with a shot of CSS/JS. For example: 1. Insert a HTML block to add a text field and a button to make them like a file field:

<tr><td style="width:140px;" class="cbFormLabel"><label>Logo</label> </td><td> <input type="text" class="cbFormTextField" id="f_file"><input type="button" value="Upload" class="file" onclick="InsertRecordfileField.click()"></td></tr> 

2. Insert JS code in the Footer to hide real file field

<script> document.getElementById("InsertRecordfileField").style.display ="none"; function fire() { document.getElementById("f_file").value = document.getElementById("InsertRecordfileField").value; } document.getElementById("InsertRecordfileField").onchange = fire; </script> 

css style class "cbFormLabel" and "cbFormTextField" only work in the direct link. If the DataPage is embedded into a page, the style will be broken. You can insert the correct style directly. For example: 

<td style="width:140px; color:blue; font-family:Verdana; font-size:13px;"><label>Logo</label> </td>
Link to comment
Share on other sites

  • 4 years later...

Agree, I hate the standard browser button.  I like my own graphics I'm kinda a novice but try this, it worked for me:

In your file field, enable the label to be shown on top.  (This is where your going to put an image of uploading a photo which will cover the browse button.)

<img id="browsepng" style="position:absolute;width:100px; height:100px;margin-top:5px;" src="http://patsi.net/addphoto.png"></img> 

Make your file field height large so that the image will fit (replace the image in the src with your image).  This will cover the browse button in most browsers with  your image, but not all.  Also, I ID it because it does appear slightly in a different place in each browser so it has to be CSS. 

When a user hits the image, the file field will still try to upload a file and thats good.

Now, set the opacity of the file field to zero (if you do display:none it may not show the label).  My tag is #InsertRecordpic1 but yours could be #InsertRecordYOURFIELDNAME.

Now when a user submits a pic, they will just see your image.  But wait,  the actually selected wont show because you opacitied it at zero.  Now insert this code from this forum member which shows you the image just uploaded right below the field.


Hope this helps


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...