Creating a file upload progress indicator similar to Gmail using GWT

I’ve been working on a project with Google Web Toolkit (GWT) and I’m trying to figure out how to make a cool file upload progress bar. You know the one Gmail has? That’s what I’m aiming for.

I’m pretty new to GWT so I’m struggling a bit. Does anyone have experience with this? I’d love to see some example code or even just get pointed in the right direction. What’s the best way to approach this in GWT?

I’ve been googling around but haven’t found anything that really clicks for me yet. Any tips or tricks would be super helpful. Thanks in advance for any advice!

I’ve tackled a similar challenge in GWT before. The key is to use a combination of the FileUpload widget and AJAX to handle the upload process asynchronously. For the progress bar, you can leverage GWT’s ProgressBar widget.

First, set up your FileUpload widget and attach an onChange event handler. When a file is selected, initiate the upload using RequestBuilder to send the file data. On the server side, implement a servlet that can handle the file upload and report progress.

To update the progress bar, use a timer that periodically checks the upload status via a separate AJAX call. Update the ProgressBar widget’s value as you receive progress updates.

Remember to handle edge cases like upload errors or cancellations. It takes some effort, but the end result is worth it for a smooth user experience.

hey neo, i’ve done something like this b4. try using gwt-upload lib, it’s pretty sweet. just add the dependency, use MultiUploader in ur UI, and make a servlet extending UploadAction. The progress bar comes built-in, so u don’t gotta worry bout that. good luck man!

I’ve actually implemented something similar in one of my projects. Here’s what worked for me:

Instead of reinventing the wheel, I used the gwtupload library. It’s a fantastic tool that handles most of the heavy lifting for you, including the progress bar functionality.

To get started, add the gwtupload dependency to your project. Then, create an instance of the MultiUploader class in your UI. This class provides a built-in progress bar and handles the file selection and upload process.

For the server-side, you’ll need to implement a servlet that extends UploadAction. This servlet will handle the actual file processing and can send progress updates back to the client.

One thing to watch out for is configuring the correct servlet mapping in your web.xml file. Make sure it matches the path you’re using in your GWT code.

Overall, gwtupload made the whole process much easier than trying to build everything from scratch. Give it a shot and see if it works for your needs!