Uploading files with RAP 1.4

Uploading files with RAP 1.4

One of the new things in RAP 1.4 is the FileUpload widget in RWT, that replaces the old Upload widget from the sandbox. And there’s some more new upload stuff in the RAP Incubator. Here’s how to use the new features to upload files with RAP 1.4.

The FileUpload is a new widget that wraps the HTML file selection tag. It looks like a button, and when it’s pressed, a native file dialog opens up that lets users select a file from their local file system. On file selection, a SelectionEvent will be fired. You can then programmatically upload the selected file to an http server using FileUpload.submit( URL ).

FileUpload widget

In order to receive and store the uploaded files on the server, you also need a server-side component. We created such an upload server component in the RAP Incubator. It’s called FileUploadHandler and it uses the Apache fileupload component internally. It’s included in the bundle org.eclipse.rap.rwt.supplemental.fileupload. This handler accepts file uploads to a certain URL (FileUploadHandler.getUploadUrl()) and delegates the data to a FileUploadReceiver. You can either use the provided DiskFileUploadReceiver or create your own receiver to do whatever you like with the uploaded data: put it into a database, or simple analyze the data and discard it.

Sounds complicated? Well, there’s a much easier way to upload files with RAP 1.4! We’ve encapsulated the entire upload process in an implementation of the SWT FileDialog, which is also available in the incubator.

FileDialog

To make it easy to use, we now provide an update site for the Incubator. To use the FileDialog in your application, all you have to do is to:

  1. include the bundles from the RAP Incubator repository http://download.eclipse.org/rt/rap/1.4/incubator/ in your RAP 1.4 target platform, and
  2. add a bundle dependency to org.eclipse.rap.rwt.supplemental.filedialog to your project (yes, you have to use Require-Bundle here because this bundle contributes a class to the org.eclipse.swt.widgets package, effectively creating a split-package).

That’s all. Now you can use the FileDialog just like in SWT:

  FileDialog fileDialog = new FileDialog( shell, SWT.TITLE | SWT.MULTI );
  fileDialog.setText( "Upload Files" );?
  fileDialog.setAutoUpload( true ); // This API will change, see below!
  fileDialog.open();
  String[] fileNames = fileDialog.getFileNames();

After uploading, the dialog closes and the variable fileNames contains the absolute file names of the uploaded files on the server’s file system. There’s an auto-upload feature that is really nice (I think it should be the default) – with autoUpload on, the upload starts immediately after file selection. A user can still press Cancel to prevent the application from using the uploaded files.

Note: Please note that this stuff is in the incubator and not part of the 1.4 release. The API and implementation may (and will) have to change and mature over time. However, if you use the latest version from 1.4/incubator site, you’ll always get a file dialog that will work with RAP 1.4. The server-side upload receiver and the required Apache bundles are also included.

We hope you enjoy these new features. Please try them out, tell us what you think, open bugs for the new stuff, and help us improving them.

Kudos to our new RAP committers Austin Riddle and Cole Markham who created this great new feature!

Update: I mistakenly left out the “.rwt.” from the bundle namespace in the original post, the bundle names are fixed now in the text.

Update: The 1.4 incubator repository has been updated with a newer version of the file dialog that is compatible with RAP 1.4. This update fixes the problem with missing file names mentioned in the comments.

47 Comments
  • J.F.Kilian
    Posted at 9:45 pm, June 24, 2011

    This feature is really cool and makes things much easier to use.
    The problem on my side is, that the default server-side receivers don’t keep the original filename extension. So the server has no chance to distinguish between a .pdf a .gif etc.
    It would be nice to have some hints about where to modify the default-receivers.

    Thanks,

    Jürgen

  • Posted at 12:05 am, June 27, 2011

    @Great Post!

  • Uli
    Posted at 4:29 pm, July 18, 2011

    Hi Ralf,

    unfortunately the FileUpload widget does not provide the path information of the selected file. The method “getFileName” returns only the name of the file without the path. Is there a way to get the path of the file too?

    Thanks,
    Uli

  • Jessy
    Posted at 1:16 pm, July 29, 2011

    Hi

    I have a problem to get it startet.

    1.include the bundles from the RAP Incubator repository http://download.eclipse.org/rt/rap/1.4/incubator/ in your RAP 1.4 target platform
    >no Problem, but
    2.add a bundle dependency to org.eclipse.rap.rwt.supplemental.filedialog to your project (yes, you have to use Require-Bundle here because this bundle contributes a class to the org.eclipse.swt.widgets package, effectively creating a split-package).
    is not working. When I start the RAP-Applikation the following exception is thrown
    org.osgi.framework.BundleException:
    Reason: Missing Constraint: Require-Bundle: org.eclipse.rap.rwt.supplemental.filedialog;

    I’m not so practised with Targed/Dependencies/Budels….so have anybody a solution for me?

    Thanks!

  • Posted at 11:56 am, August 1, 2011

    Hi Jessy, this exception says that your launch configuration is missing a required bundle. Before starting, validate your launch configuration by clicking Validate Bundles on the Bundles tab.
    Regards, Ralf

  • Erik
    Posted at 5:15 pm, August 1, 2011

    Hi,

    got some problems while trying the RAP Demo which includes the new FileDialog.
    I’m using Helios and the latest release of RAP 1.4.
    As mentioned here I’ve also installed RAP Incubator files.

    After importing the psf for the RAP Demo the classes DialogUtil and DialogCallBack are not known.
    What is missing? I’ve already searched the web, but could not find any hints related to this.

    Thanks in advance and best regards,
    Erik

  • Posted at 9:30 pm, August 1, 2011

    Hi Erik,

    you are using the FileDialog from the current development stream which uses new 1.5 API. For RAP 1.4, you have to get the FileDialog from the v14_Maintenance branch or from the incubator repository mentioned above.

    Hope this helps, Ralf

  • Erik
    Posted at 9:41 pm, August 1, 2011

    Hi Ralf,

    Thanks for your reply.
    Does this mean the PSF for the Rap Demo already use 1.5 API?

    Regards,
    Erik

  • Erik
    Posted at 11:02 am, August 2, 2011

    Hi Ralf,

    sorry if I got you wrong, but I already had the RAP 1.4 Target and the Incubators version of the FileDialog (1.4.0.201106201014).
    I switched the RAP Demo to the v14_Maintenance branch, but it does not contain the FileUpload dialog.

    Can you help me out?
    Erik

  • Posted at 12:21 pm, August 2, 2011

    Hi Erik, sorry, I was on the wrong track – the 1.4 incompatible code you referred to is in the example page which only exists in HEAD. All you have to do to use the code of the example page with 1.4 is to replace the non-blocking style:

    DialogUtil.open( fileDialog, new DialogCallback() {
    public void dialogClosed( int returnCode ) {
    showUploadResults( fileDialog );
    }
    } );

    with the blocking style:

    filedialog.open();
    showUploadResults( fileDialog );

    I’m sorry for the confusion.
    BTW, we’ll update the FileDialog repository with an improved version by ~ next week.

    Good luck, Ralf

  • Erik
    Posted at 1:23 pm, August 2, 2011

    works like a charm now 🙂

    Thanks Ralf

  • Antoine
    Posted at 10:25 am, August 16, 2011

    Hi,

    I’ve tried the exemple but it seems that the new FileDialog component does not override the standard one. I’ve followed the steps referred in the example without success. I’m certanly wrong but where ?

    Regards,

    Antoine

  • Antoine
    Posted at 12:52 pm, August 16, 2011

    Sorry,

    I will try to explain clearer. I’m trying to use FileDialog class with specific implementation like showed above. My target platform is as follows :

    http://download.eclipse.org/rt/rap/1.4/incubator
    http://download.eclipse.org/rt/rap/latest-stable/runtime

    In “Dependencies/Required Plug-ins” I specified the following:
    org.eclipse.rap.rwt.supplemental.filedialog (1.4.0)
    org.eclipse.rap.rwt (1.4.0)

    It seems that Eclipse does not recognize specific methods and enhancements you made in FileDialog. For instance :
    fileDialog.setAutoUpload( true ) is not recognized as a valid method.

    My question is, how can I simple use FileDialog (and FileUpload) ? What do I miss ?

    Regards,

    Antoine

  • Antoine
    Posted at 5:41 pm, August 16, 2011

    I’ve created a new rap project from scratch and used org.eclipse.rap.rwt.supplemental.filedialog.demo source code and everything seems working now. Did not change anything neither in target nor in required plugins.

    Thanks anyway.

    Regards

  • Jeffry Santoso
    Posted at 9:24 pm, August 27, 2011

    Hi, I’m try to download this fileupload at this http://download.eclipse.org/rt/rap/1.4/incubator/, but it said it is not found. When I try to go to the eclipse rap cvs (at cvsroot/rt/org.eclipse.rap/incubator/supplemental/fileupload/org.eclipse.rap.rwt.supplemental.fileupload & filedialog), I only find the 1.5 version, but do not find the 1.4. Where can I find the 1.4 version? I use eclipse Indigo.

    Because I am download from there in 1.5 version, the fileupload and filedialog get many errors. Or if the 1.4 version is not at there anymore, can I get the 1.4 version of fileupload and filedialog plugins? Many Thanks.

    Regards,
    Jeffry

  • rocketman
    Posted at 12:11 am, August 31, 2011

    Ralf, thanks for the informative article! I’m having an issue running my simple hello world app to display the file dialog. I followed your 2 step instructions above and everything compiles fine, but the runtime error I get is:

    class “org.eclipse.swt.widgets.FileDialog”‘s signer information does not match signer information of other classes in the same package

    which I know means that there are classes in the same package in 2 different jars that have different digital signatures…I’m just not sure how to resolve the issue because filedialog.jar contains only FileDialog from org.eclipse.swt.widgets, but my app also requires other classes from that package, e.g. Shell. I’m new to RAP/RCP development, so I’m sure it’s something I’m missing.

    My source is this:

    public class EntryPoint implements IEntryPoint {

    public int createUI() {
    Display display = new Display();
    Shell shell = new Shell(display);
    shell.setLayout(new GridLayout(1, false));

    FileDialog fileDialog = new FileDialog(shell, SWT.TITLE | SWT.MULTI);
    fileDialog.setText(“Upload Files”);
    fileDialog.setAutoUpload(true); // This API will change, see below!
    fileDialog.open();
    String[] fileNames = fileDialog.getFileNames();

    shell.pack();
    shell.open();
    while (!shell.isDisposed()) {
    if (!display.readAndDispatch()) {
    display.sleep();
    }
    }
    display.dispose();
    return 0;
    }
    }

    I’m using Eclipse for RCP and RAP Developers, Indigo Release, Build id: 20110615-0604; and RAP 1.4.0.20110614-2335.

    Thanks in advance for your insights!

    Paul

  • Jeffry Santoso
    Posted at 7:35 am, August 31, 2011

    Hi Ralf,

    Previously I try to adding them directly with CVS, not web browser off course. But I get 1.5 version (I think the procedure is same when getting org.eclipse.equinox.http.helper, org.eclipse.equinox.http.registry, etc). Later, I try to adding them into the target platform, and it works.

    Thanks

  • Werner
    Posted at 1:16 pm, August 31, 2011

    Hi Ralf,

    nice feature, I just replaced the old implementation with the new FileDialog and it works great.
    I only have one question concerning the usability: Why not throw away the + button, and add a new row automatically each time a file was selected? This would save a lot of clicks if you want to upload lots of files. Please let me know if you want me to file an enhancement request for this.

    Best, Werner

  • rocketman
    Posted at 10:16 pm, August 31, 2011

    Thanks, Ralf! I will try out the new version once it’s posted.

  • Werner
    Posted at 10:44 am, September 1, 2011

    @Ralf: added enhancement request: https://bugs.eclipse.org/bugs/show_bug.cgi?id=356441

    I think it would become clear that multiple files can be uploaded when the 2nd UploadPanel appears.

    Regards, Werner

  • Jeffry Santoso
    Posted at 1:30 pm, September 1, 2011

    Hi Ralf,
    I have questions. 1. Can we validate the file first base on the file name before we upload? I see the file will be uploaded first then we have to validate after that. 2. Is there any function that get the original file name instead of we parse manual? The file example abc.jpg after we upload, the file will be abc.xxxxxx.jpg which the xxxxx is the temporary number.

    That’s only small functionality thing that I asked. Exclude of them, the plugins are very good. Thanks

  • rocketman
    Posted at 12:55 am, September 7, 2011

    Ralf, the signed version worked for me! Thanks again!

  • Jeffry Santoso
    Posted at 7:29 am, September 24, 2011

    Hi Ralf,
    I have successfully upload several files with no issue. But when I try to upload file with only 1 character of the filename (exclude extension), it is always fail. Try to rename your file become 1.jpg, 2.jpg, or a.jpg, etc. It is always failed. Is the error occurred in your computer too? Thanks

  • Ivan Furnadjiev
    Posted at 12:47 pm, September 27, 2011

    Hi Jeffry,
    we changed the implementation so the original file name is now preserved after the upload (the temporary numbers are in the directory name). Unfortunately, I can’t reproduce the issue with the single character name. Tested with FF 7, IE9, Chrome 14. What OS and browser are you using? If it is still reproducible with CVS HEAD, could you open a bugzilla with a snippet/example upload file to reproduce it. Thanks.

  • Jeffry Santoso
    Posted at 8:05 pm, September 29, 2011

    Hi Ivan, when I fetch the latest from CVS HEAD, I got a few error in filedialog package (FileDialog.java), in line 356 runEventLoop( shell );

    I’m still use RAP 1.4 not 1.5, and in filedialog package, I have successfully configured to run with 1.4, but still can’t solve the filedialog package (error above). Currently I use org.eclipse.rap.rwt.supplemental.filedialog_1.4.0.201108091246.jar and org.eclipse.rap.rwt.supplemental.filedialog_1.4.0.201108091246.jar.

    Btw, I have successfully compare those version (1.4.0.201108091246 and CVS head). When I try to compare and debug the app, I see the different in the implementation the file name in DiskFileUploadReceiver.createTargetFile. I try to add breakpoint, and yes, the error can be reproduced in my version (1.4). It got an Exception in FileUploadProcessor in line 66 (java.lang.IllegalArgumentException: Prefix string too short). I think it is because DiskFileUploadReceiver at line 60 when execute File.createTempFile

    So I change the old implementation the original file name (1.4) with the new one (CVS HEAD), and the problem is solved. Thanks

  • Jeffry Santoso
    Posted at 8:22 am, October 1, 2011

    Hi Ralf,
    Basically I’m just replace DiskFileUploadReceiver (in 1.4 version – org.eclipse.rap.rwt.supplemental.filedialog_1.4.0.201108091246.jar) with the CSV HEAD, and it is fixed. Should I still open a bug? Because the patch is already in the CSV head. Thanks

  • Paul
    Posted at 10:50 am, October 7, 2011

    Hi Ralf,

    I can upload files using FileDialog when I’m running my application from Eclipse, but after creating a war file the application run from a web browser throws: HTTP Status 404 – ProxyServlet …The requested resource is not available.

    Have you faced this problem? I have included org.eclipse.rap.rwt.supplementa.filedialog in Plug-ins tab i feature.xml, but the application still does not work.

    I know that this problem is somehow related to the FileDialog, because after removing this widget and all entries in Required Bundles in the Manifest file, the deployed application works fine.

    Regards,
    Paul

  • Ivan Furnadjiev
    Posted at 11:51 am, October 7, 2011

    Hi Paul,
    you need in your feature.xml also:
    org.eclipse.rap.rwt.supplemental.fileupload
    org.apache.commons.fileupload
    org.apache.commons.io
    Hope this helps,
    Ivan

  • Jeffry Santoso
    Posted at 8:05 am, October 9, 2011

    Hi Ralf, it is done. I have posted at https://bugs.eclipse.org/bugs/show_bug.cgi?id=360345. Hope I can contribute more later. Thanks and regards, Jeffry

  • Avrajit
    Posted at 2:51 pm, November 4, 2011

    Jeffry, This is an excellent feature developed. I want to know if you have this available in GIT or somewhere from where I can download the zip version (in form of jar say) of it as I am struggling to make a CVS connection and download the code. That will be a a great help !

  • Paul
    Posted at 1:11 pm, November 25, 2011

    Hi,

    Ivan, thanks for your help, somehow I managed to solve the problem.
    I have a question: how to filter files in the browser?
    There are methods avaliable, like setFilterNames and setFilterExtensions, and they
    seem to set the filter only in the main window (image at the top of the page), but
    the browser opened after clicking “Browse” does not filter the files (the filter list is empty).

    Thanks and regards,
    Paul

  • Ivan Furnadjiev
    Posted at 1:26 pm, November 25, 2011

    Paul,
    cross-browser filtering on the client is not possible. More over, the filter in the RCP file dialog (at least in Windows) is a convenience to the user, not a blocking feature. See this bug for more details and discussions on the topic:
    361001: FileDialog accepts filtered file name extension
    https://bugs.eclipse.org/bugs/show_bug.cgi?id=361001
    Best,
    Ivan

  • Paul
    Posted at 10:12 am, November 28, 2011

    Ivan,

    Thank you for help.

    Regards,
    Paul

  • Michael
    Posted at 6:12 pm, January 27, 2012

    Hi,

    The FileUpload leaves temporary files in the “Local SettingsTemp” folder on the Server (WinXP) like upload_399f7116_1351ad7feda__8000_00000001.tmp.
    Is there a possibility to cleanup these files after uploading?

    Thanks
    Michael

  • Austin Riddle
    Posted at 12:19 am, January 31, 2012

    Hi Michael,

    I recently upgraded FileUpload to use Apache Fileupload 1.2.2, so that we could use the FileCleanupTracker for proper cleanup. The new version in CVS HEAD will be set to cleanup after session termination, but will only actually do so after JVM garbage collection.

    Please see this bug for more information: https://bugs.eclipse.org/bugs/show_bug.cgi?id=362924