Table of contents

Introduction💻

1.1.

Advantages of GWT🤔

1.2.

Limitations of GWT🤔

GWT FileUpload Widget🧑🏻‍💻

2.1.

Class Declaration

2.2.

CSS Style Rules

Constructors of GWT FileUpload Widget👇🏻

Methods of GWT FileUpload Widget👇🏻

Inherited Methods🎯

GWT FileUpload Widget Example💻

6.1.

GWTProjectOne.gwt.xml

6.2.

GWTProjectOne.css

6.3.

GWTProjectOne.html

6.4.

GWTProjectOne.java

6.5.

Output

Frequently Asked Questions

7.1.

What is the google web toolkit?

7.2.

What is an uploader widget?

7.3.

What do you mean by CSS?

7.4.

What is GWT weight?

7.5.

What is Constructor in Java?

Conclusion

Last Updated: Mar 27, 2024

Medium

GWT FileUpload Widget

Author Devika Varshney

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction💻

GWT (Google web toolkit) is an open-source development toolkit provided by google for developing browser-based, complex Ajax applications. We can even develop Rich Internet Applications (RIA) in Java using GWT, which will then be compiled into Javascript and cross-browser compliant.

Advantages of GWT🤔

Java script projects are hard to maintain when compared to Java projects. But we need Javascript to run the RIA in the browser. So GWT combines both the above advantages.
GWT is almost similar to the swing package of Java and AWT.
Each browser has its own set of problems; therefore, supporting all of them in the market is challenging. So, GWT solved this problem by creating optimized javascript code for each browser.

Limitations of GWT🤔

When Java is compiling into javascript to run on the browser, it will run only if enabled. Otherwise, it will not work.
Search engines do not index the web pages created by GWT since these web applications are generally dynamic.
If you have a UI designer who can create HTML pages, this will not work; hence you will need to implement whatever designer created again in GWT.

We have seen everything about GWT; let's go through one of its widgets, the GWT FileUpload Widget.

GWT FileUpload Widget🧑🏻‍💻

The HTML <input type = 'file'> element is wrapped by FileUpload widget. We use this widget with FormPanel if we want it to be submitted to the server.

Class Declaration

We can use the following code to declare a GWT CheckBox class(com.google.gwt.user.client.ui.FileUpload),

public class FileUpload 
  extends Widget
      implements HasName, HasChangeHandlers

You can also try this code with Online Java Compiler

Run Code

CSS Style Rules

The given below is the default CSS style rule that is applied to all the textBox widgets. This CSS style rule can be overridden as per your requirements.

.gwt-FileUpload {}

You can also try this code with Online Java Compiler

Run Code

Although users may choose to override the CSS to meet their requirements.

Constructors of GWT FileUpload Widget👇🏻

The GWT FileUpload comes equipped with various Constructors. Let us discuss some of these in this section.

Constructor	Description
FileUpload()	Default constructor for File upload is used for creating a new file upload widget.
FileUpload(Element element)	This constructor may be used by subclasses to explicitly use an existing element.

Methods of GWT FileUpload Widget👇🏻

The GWT CheckBox also has various class methods. Let us look at the GWT CheckBox class methods.

Functions	Description
boolean isEnabled()	Gets whether this widget is enabled.
HandlerRegistration addChangeHandler(ChangeHandler handler)	Adds a ChangeEvent handler.
void onBrowserEvent(Event event)	Fired whenever a browser event is received.
void setName(java.lang.String name)	Sets the widget's name.
static FileUpload wrap(Element element)	Creates a FileUpload widget that wraps an existing <input type='file'> element.
protected void prepareCell(int row, int column)	Verifies that a cell in the table is valid.
void setEnabled(boolean enabled)	Sets whether this widget is enabled.

Inherited Methods🎯

Following are the classes from which this class inherits methods −

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object

GWT FileUpload Widget Example💻

We will now go through the easy steps to show the usage of the GWT FileUpload Widget. You need to modify files ‘GWTProjectOne.css’, ‘GWTProjectOne.gwt.xml’, ‘GWTProjectOne.html’, and ‘GWTProjectOne.java’ by changing the with the below code.

The Eclipse IDE and file structure will look something like this -

GWTProjectOne.gwt.xml

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'gwtprojectone'>
  <!-- Let's inherit the core GWT things. -->
  <inherits name = 'com.google.gwt.user.User'/>

  <!-- Let's inherit the default Google Web Toolkit style sheet. -->
  <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

  <!-- Let's specify the application entry-point class. -->
  <entry-point class = 'coding.ninja.client.GWTProjectOne'/>

  <!-- Let's specify the souce paths for the translatable code. -->
  <source path = 'client'/>
  <source path = 'shared'/>


  <add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<!-- enable source maps -->
<set-property name="compiler.useSourceMaps" value="true" />
</module>

GWTProjectOne.css

body {
  text-align: center;
  font-family: verdana, sans-serif;
}

h1 {
  font-size: 2em;
  font-weight: bold;
  color: orange;
  margin: 40px 0px 70px;
  text-align: center;
}

.gwt-FileUpload {
  color: blue; 
}

GWTProjectOne.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="GWTProjectOne.css">
    <script type="text/javascript" language="javascript" src="gwtprojectone/gwtprojectone.nocache.js"></script>
  </head>
  
  <body>
      <h1>Coding Ninjas FileUpload Widget</h1>
      <div id = "codingContainer"></div>
  </body>
</html>

GWTProjectOne.java

package coding.ninja.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FileUpload;
import com.google.gwt.user.client.ui.FormPanel;
import com.google.gwt.user.client.ui.FormPanel.SubmitCompleteEvent;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class GWTProjectOne implements EntryPoint {
public void onModuleLoad() {
      VerticalPanel panel = new VerticalPanel();
   
      final FormPanel form = new FormPanel();
      final FileUpload fileUpload = new FileUpload();
      
      Label selectLabel = new Label("Select a file here");
      Button uploadButton = new Button("Upload File here");
      
      form.setAction("https://www.codingninjas.com/studio/library/forms-in-html");
      form.setEncoding(FormPanel.ENCODING_MULTIPART);
      form.setMethod(FormPanel.METHOD_POST);
      
      panel.add(selectLabel);
      panel.add(fileUpload);
      panel.add(uploadButton);
      
      uploadButton.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            String filename = fileUpload.getFilename();
            if (filename.length() == 0) {
              Window.alert("No File selected!");
            } else {
              form.submit();           
            } 
        }
      });
  
      form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {
        @Override
        public void onSubmitComplete(SubmitCompleteEvent event) {
            Window.alert(event.getResults()); 
        }
      });
      panel.setSpacing(10);      
      form.add(panel);      

      RootPanel.get("codingContainer").add(form);
  }
}

You can also try this code with Online Java Compiler

Run Code

After modifying all the files, right-click the project, go to GWT and then select compile button. And then, you will see one dialog box where you have to again click on compile button.

And after clicking it, you will see the following output in the console.

Now click on the dropdown button of the run button and select the project you want to run that is, in our case, GWTProjectOne.

After clicking, you will see the following outputs in the console and development mode tab.

After clicking on the link in development mode, you will see the output of the code.

Output

After clicking on the "Choose file" button, the file explorer folder will open. Select a file from the folder and click on "select" then, you will be able to see the file's name beside the "Choose file" button.

We hope you have completely understood the GWT FileUpload Widget. 😁

Frequently Asked Questions

What is the google web toolkit?

GWT (Google web toolkit) is an open-source development toolkit provided by google for developing browser-based, complex Ajax applications.

What is an uploader widget?

The Upload widget from Cloudinary is a comprehensive, interactive user interface that allows users to upload files to your website or application from various sources.

What do you mean by CSS?

The language used to describe how Web pages are presented, including their colors, design, and fonts, is called CSS.

What is GWT weight?

The maximum weight of cargo that a vessel can carry is known as its gross weight tonnage (GWT).

What is Constructor in Java?

A Constructor in Java is a unique method that initializes the object.

Conclusion

In this blog, we went through GWT FileUpload Widget. We saw class declaration, CSS style rules, constructors, and inherited methods. At last, we will see an example of the GWT FileUpload Widget and if you would like to learn more, check out our articles on-

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Happy Learning Ninja! 🥷

Live masterclass

Top GenAI Skills to crack 30 LPA+ roles at Amazon & Google

by Sumit Shukla

02 Feb, 2026

03:00 PM

34+ registered

Python + AI Skills to ace 30L+ CTC Data roles at Amazon

by Prerita Agarwal

01 Feb, 2026

06:30 AM

536+ registered

Top 5 GenAI Projects to Crack 25 LPA+ Roles in 2026

by Shantanu Shubham

01 Feb, 2026

08:30 AM

181+ registered

Zero to Data Analyst: Amazon Analyst Roadmap for 30L+ CTC

by Abhishek Soni

02 Feb, 2026

01:30 PM

345+ registered

Top GenAI Skills to crack 30 LPA+ roles at Amazon & Google

by Sumit Shukla

02 Feb, 2026

03:00 PM

34+ registered

Python + AI Skills to ace 30L+ CTC Data roles at Amazon

by Prerita Agarwal

01 Feb, 2026

06:30 AM

536+ registered

View more events