PDA

View Full Version : File Upload



posta07
31 Jul 2008, 1:00 PM
Does GXT provide file-uploading capabilities?
If not, can someone help me understand how to implement it?
Has anyone done this?

gslender
31 Jul 2008, 1:24 PM
GWT 1.5 does, and I'm guessing a GXT version would be nice....

http://google-web-toolkit-doc-1-5.googlecode.com/svn/javadoc/1.5/index.html

posta07
4 Aug 2008, 3:00 PM
Darrell,

are there plans for a GXT upload widget?

The GWT one is very limited........

annbrown50
6 Aug 2008, 11:35 PM
I also think that it would be quite suitable to have a GXT upload widget.

Gianluigi
7 Aug 2008, 2:14 AM
I have the same problem. I have to use a FileUpload widget into a GXT formpanel...
someone suggest to me to use GWT FileUpload into Gxt... i'm trying to do it but without success.


FormPanel panel = new FormPanel();
panel.setFrame(true);
panel.setFieldWidth(210);
panel.setLabelWidth(100);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setHeading("CVS Upload");
panel.setIconStyle("icon-form");
panel.setStyleAttribute("padding", "20");

FileUpload fu = new FileUpload();
fu.setName("file upload");
fu.setTitle("File Upload:");
fu.setVisible(true);
fu.setPixelSize(300, 110);
panel.add(fu);

it doesn't works...8-| any hints? Regards, Gianluigi

gslender
7 Aug 2008, 2:35 AM
I've not tried this, so I can't say exactly what is wrong, but you will at least need to wrap non "form" widgets in an AdapterField -> anything that is not in com.extjs.gxt.ui.client.widget.form will need to be wrapped.

see>> http://extjs.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/form/AdapterField.html

gslender
7 Aug 2008, 2:37 AM
...actually I don't think using the com.extjs.gxt.ui.client.widget.form.FormPanel is the right approach !!

You really need to get a GWT FormPanel working, on its own without GXT widgets. When that is working, just drop it into a GXT ContentPanel.

That should work.

Gianluigi
7 Aug 2008, 3:07 AM
Yes the method that u suggested works, thanks :)

posta07
7 Aug 2008, 5:26 AM
it doesn't works...8-| any hints? Here's how I did it, for those interested.
Please drop me a comment if you know of a better way, or at least a way to improve what I've already done.

On the client side, as gslender suggests, I had to get the FileUpload widget working outside of GXT first (to make sure everything was working). You must use the FormPanel (http://google-web-toolkit.googlecode.com/svn/javadoc/1.4/index.html?overview-summary.html) widget with the FileUpload widget... since the FileUpload widget just wraps <input type="file"> it must be used within the <form></form> tags (which is what FormPanel wraps). Unfortunately, I found no way of doing file uploads with RPC :-(

I used the following code

Client:

public void onModuleLoad() {
final FormPanel form = new FormPanel();
form.setAction(GWT.getModuleBaseURL() + "/myFormHandler");

// Because we're going to add a FileUpload widget, we'll need to set the
// form to use the POST method, and multipart MIME encoding.
form.setEncoding(FormPanel.ENCODING_MULTIPART);
form.setMethod(FormPanel.METHOD_POST);

VerticalPanel panel = new VerticalPanel();
form.setWidget(panel);

// Create a FileUpload widget.
FileUpload upload = new FileUpload();
upload.setName("uploadFormElement");

panel.add(upload);

Button button2 = new Button("Submit", new ClickListener() {
public void onClick(Widget sender) {
form.submit();
}
});

// Add a 'submit' button.
panel.add(button2);

// Add an event handler to the form.
form.addFormHandler(new FormHandler() {

public void onSubmitComplete(FormSubmitCompleteEvent event) {
// When the form submission is successfully completed, this
// event is
// fired. Assuming the service returned a response of type
// text/html,
// we can get the result text here (see the FormPanel
// documentation for
// further explanation).
Window.alert(event.getResults());
}

public void onSubmit(FormSubmitEvent event) {
// TODO Auto-generated method stub

}
});

RootPanel.get().add(form);

}<module>.gwt.xml
add this line:

<servlet path="/myFormHandler" class="com.posta.samples.server.MyFormHandler"/>

Server (using Commons-FileUpload and Commons-IO... with much guidance from this website: http://balusc.blogspot.com/2007/07/fileservlet.html):

public class MyFormHandler extends HttpServlet {


public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {

resp.setContentType("text/html");

FileItem uploadItem = getFileItem(req);
if(uploadItem == null) {
resp.getWriter().write("NO-SCRIPT-DATA");
return;
}

resp.getWriter().write(new String(uploadItem.get()));


}

private FileItem getFileItem(HttpServletRequest req) {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);

try {
List items = upload.parseRequest(req);
Iterator it = items.iterator();

while(it.hasNext()) {
FileItem item = (FileItem) it.next();
if(!item.isFormField() && "uploadFormElement".equals(item.getFieldName())) {
return item;
}
}
}
catch(FileUploadException e){
return null;
}

return null;
}

}I have also implemented file download and file delete. Let me know whether there is interest in that.

zaccret
7 Aug 2008, 11:34 PM
You should open a new thread in "Feature Requests" forum.

Martin.Trummer
7 Aug 2008, 11:52 PM
Unfortunately, I found no way of doing file uploads with RPC :-(


This is not possible due to browser security restrictions. HTML pages (java-script) are not allowed to read directly from the local file-system.
The only ways you can access the files:
use a form as described in this thread
include some object that is allowed to read from the file system: e.g. a java applet

oswalsarikap
18 Aug 2008, 2:42 AM
Hello All,
I am new to this GWT world. I m trying to implement File Upload functionality and facing some errors.
Please help!

As per above discussions i tried adding the code, i have also imported the commons-fileupload.jar but getting the error as "No source code is available for type org.apache.commons.fileupload.FileUploadException; did you forget to inherit a required module?"

oswalsarikap
18 Aug 2008, 3:28 AM
Hello All,
I am new to this extjs and gwt world. I m trying to implement File Upload functionality and facing some errors.
Please help!

As per above discussions i tried adding the code, i have also imported the commons-fileupload.jar but still getting some errors related to missing file. I have added to the classpath as well.

Error


<H1>HTTP Status 500 - </H1>
<HR noShade SIZE=1>

<P><B>type</B> Exception report</P>
<P><B>message</B> <U></U></P>
<P><B>description</B> <U>The server encountered an internal error () that prevented it from fulfilling this request.</U></P>
<P><B>exception</B> <PRE>javax.servlet.ServletException: Servlet execution threw an exception
</PRE>
<P></P>
<P><B>root cause</B> <PRE>java.lang.NoClassDefFoundError: org/apache/commons/io/output/DeferredFileOutputStream
org.apache.commons.fileupload.disk.DiskFileItemFactory.createItem(DiskFileItemFactory.java:191)
org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:350)
org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:126)
org.gwtbook.client.MyFormHandler.getFileItem(MyFormHandler.java:47)
org.gwtbook.client.MyFormHandler.doPost(MyFormHandler.java:31)
javax.servlet.http.HttpServlet.service(HttpServlet.java:709)
javax.servlet.http.HttpServlet.service(HttpServlet.java:802)
com.google.gwt.dev.shell.GWTShellServlet.service(GWTShellServlet.java:290)
javax.servlet.http.HttpServlet.service(HttpServlet.java:802)
</PRE>
<P></P>
<P><B>note</B> <U>The full stack trace of the root cause is available in the Apache Tomcat/5.0.28 logs.</U></P>
<HR noShade SIZE=1>

<H3>Apache Tomcat/5.0.28</H3>

Do i need to add the Commons-io.jar as well ? i tried googling it but couldnt find it. Can you please guide what could be wrong while implementing.

Thanks In Advance!

posta07
18 Aug 2008, 4:51 AM
Do i need to add the Commons-io.jar as well ? i tried googling it but couldnt find it. Can you please guide what could be wrong while implementing.


Yes, you do need commons-io also. Verify both are correctly on your build path and classpath for when you run the app.

http://commons.apache.org/io/

posta07
27 Aug 2008, 5:12 AM
Per some requests for the File Download opposite of File Upload, I've posted some hints:

On the server side I implemented the doGet method of the HttpServlet class. I grab the raw data from the database and set it into the response (with the appropriate response type):



BufferedOutputStream output = null;
try {
RawAttachmentItem attachment = attachmentFileDao.retrieveContents(fileid);
ByteArrayInputStream input = new ByteArrayInputStream(attachment.getContents());
int contentLength = input.available();

resp.reset();
resp.setContentType("application/octet-stream");
resp.setContentLength(contentLength);
resp.setHeader("Content-disposition", "attachment; filename=\"" + attachment.getFilename()
+ "\"");
output = new BufferedOutputStream(resp.getOutputStream());
for(int data; (data=input.read()) != -1;) {
output.write(data);
}
output.flush();
}
catch (IOException e) {

e.printStackTrace();
}
finally {
close(output);
}


On the client side, you simple create a new iFrame with its 'src' attribute set to the servlet url for downloading the file:



boolean frameExists = (RootPanel.get("downloadiframe") != null);
if(frameExists) {
Widget widgetFrame = (Widget)RootPanel.get("downloadiframe");
widgetFrame.removeFromParent();
}

NamedFrame frame = new NamedFrame("downloadiframe");
frame.setUrl(GWT.getModuleBaseURL()
+ "/attachmentHandler?action=dl&fileid="
+ model.getFileId());
frame.setVisible(false);

RootPanel.get().add(frame);


When the file gets sent back to the iFrame, the browser will treat it as a file download and prompt you to do something with it (open, save, cancel, etc).

If anyone has questions or requires more detail, please do not hesitate to ask!!

javier.garcia.parra
28 Aug 2008, 2:05 AM
After reading your work, and a couple of ~o)... got it to work. This is what I consider more important. It's almost perfectly described in :
http://home.izforge.com/index.php/2006/10/29/295-handling-file-uploads-with-the-google-web-toolkit

Just must now:
- I added the FileUpload to a FormPanel and this to a GWTExt Panel and look very nice.
- It is required to set the name of the FileUpload widget. Otherwise you'll get crazy with a silent empty list on the servlet...

Enjoy coding!!:D

qwertz
4 Sep 2008, 4:59 AM
Hi,

is it possible to combine the GWT FileUpload with other GXT FormWidgets?
I want to implement a file upload with additional metadata...

zaccret
23 Oct 2008, 4:56 AM
File upload support is planned for 1.2 : http://www.extjs.com/products/gxt/roadmap.php

TheBuzzer
23 Oct 2008, 7:07 AM
it is possible. like i said my project i did it already.

amit.vankadia
1 Dec 2010, 3:44 PM
i look at your upload example which returns the uploaded file but how do i display that binary data as an Image. if i upload an image

posta07
1 Dec 2010, 3:47 PM
kinda out of the scope of this client-side framework.... but i suppose you could save the binary data into an abstraction that represents an image (file, perhaps?) and send it back to the browser with appropriate content type? i would google around to see what others have done for this approach as this is not specific to GXT framework.

Alvasin
22 Jan 2011, 2:17 AM
If you want to have file uploading available in your Web site, whether intranet or Internet (although I prefer to use only in Intranet servers), you can build it all by yourself.
You can build your own ISAPI DLL; You can build your own COM/MTS DLL;
You can have your file upload transactional;
You don't need to have a directory with write permissions;
You can even deal with all your upload content only in ASP code (example appears in the article code).

pjimenez
8 Sep 2011, 12:17 PM
Thanks a lot, the name was the solution.

Great =D>