Hiding textbox of the file Uploading browse button

Question

The title might make the question looks older, but there is some more to it.

In order to hide the textbox of the browse button, i added the following code.

 <html:form action="/validate" enctype="multipart/form-data">
    <html:file property="file" id="selectedFile" style="display: none;" />
    <input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
   <html:sumbit/>
 </html:form>

It works well till selecting the files. I'm using spring for my project.

When I use this method I'm not able to get the file to the class method. I need the textbox to be hidden. Following is the code I used in the class.

 public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
        FileUploadForm uploadForm = (FileUploadForm) form;
        FileOutputStream outputStream = null;
        FormFile formFile = null;
        try {
            formFile = uploadForm.getFile();
            String path = getServlet().getServletContext().getRealPath("") + "/" + formFile.getFileName();
            outputStream = new FileOutputStream(new File(path));
            outputStream.write(formFile.getFileData());
        } finally {
            if (outputStream != null) {
                outputStream.close();
            }
        }
        uploadForm.setMessage("The file " + formFile.getFileName() + " is uploaded successfully.");
        return mapping.findForward(SUCCESS);
    }

Since the file is not receriving here, it shows FileNotFound exception. The code runs fine If i use normal browse button with textbox . But the requirement is like, the textbox should be hidden. And the button shouldn't messed up with css too. Any thoughts what's going wrong.

Answer 1

Don't use display:none , use height:0;width:0;opacity:0;

Why?

When you use display:none the element is removed completely from the document structure hence is not sensed in your code.

Please note that a display of 'none' does not create an invisible box; it creates no box at all. http://www.w3.org/TR/CSS2/visuren.html#propdef-display