PDA

View Full Version : file upload example



g1_
18 Jan 2010, 1:48 AM
Does anyone have an example of file uploads?

I've taken the code from the explorer as a starting point for the client:



final FormPanel panel = new FormPanel();
panel.setHeaderVisible(false) ;
panel.setBodyBorder(false) ;
panel.setAction("xxx") ;
panel.setEncoding(Encoding.MULTIPART);
panel.setMethod(Method.POST);
panel.setButtonAlign(HorizontalAlignment.CENTER);

FileUploadField file = new FileUploadField() ;
file.setAllowBlank(false) ;
file.setFieldLabel("File") ;
//file.setName("test.gif") ;
panel.add(file) ;

Button btn = new Button("Upload") ;
btn.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
if (!panel.isValid()) {
return ;
}

// normally would submit the form but for example no server set up to
// handle the post
panel.submit();

MessageBox.info("Action", "Your file was uploaded", null);
}
});
panel.addButton(btn) ;



I've tested my server side code against:


<form action="xxx" enctype="multipart/form-data" method="post">

<input type="file" name="pic" />

<input type="submit" value="Submit" />
</form>
which seems to work.

If I use firebug to look at what is being transmitted. It looks like both the GXT code and the basic HTML code use the same headers for transmitting the data but the GXT form doesn't submit the actual file.

HTML form (POST body):


Content-Type: multipart/form-data; boundary=---------------------------16122390241448938150667377428
Content-Length: 6448

-----------------------------16122390241448938150667377428
Content-Disposition: form-data; name="pic"; filename="label.png"
Content-Type: image/png

‰PNG


IHDR���Ü���Ü���±S
sRGB�®Îé���bKGD�ÿ‡Ì¿��� pHYs�� �� �šœ���tIMEÙ
.Üwá��ÛIDATxÚíyxUÅÆçÞÂ&nìʦ•]¥ŠE*T\¨"ŠuE«Vk«Upi«Õ"EÔ
Š¸AEAÁVD+*a
 $÷¾ý#çžœ»/ Ü$wÞû<Éœ9sæÎÌ{ç›of¾ó%aP
á1M`ˆ38ˆÈ*û·ˆ…¦-ªºs†›¸ÜaÚ¤Z`œMœ•Õ[TwCƒªˆàá,ˆ¸^üÙ´O•ÅƒAÄQi¦†8C\Fh•Õ;YI!ßSˆø–#¦)¥#9X´$—¶4¥–!.}x›7™ÇOlÇCÙjy´5s ñ`Ù8ŒVŒ #'â
...
GXT form (POST body):


Content-Type: multipart/form-data; boundary=---------------------------142767030313339582041617899103
Content-Length: 63

-----------------------------142767030313339582041617899103--

g1_
18 Jan 2010, 2:01 AM
If useful, here is the html code generated by GXT:


<form style="padding: 10px; overflow: hidden;" method="post" target="gxt.formpanel-5" enctype="multipart/form-data" action="xxx">
<div class="x-form-item " tabindex="-1">
<label class="x-form-item-label" style="width: 75px;" for="x-auto-300">File:</label>
<div id="x-form-el-x-auto-300" class="x-form-element" style="padding-left: 80px;">
<div id="x-auto-300" class=" x-form-field-wrap x-form-file-wrap x-repaint" style="width: 210px;">
<input id="x-auto-301" class=" x-form-field x-form-file-text x-form-text x-form-focus" type="text" tabindex="0" readonly="" style="width: 153px;"/>
<input id="x-auto-302" class=" x-form-file" type="file" style="display: block;"/>
<table id="x-auto-303" class="x-btn x-form-file-btn x-btn-noicon" cellspacing="0" role="presentation" style="width: auto;">
</table>
</div>
<div id="x-auto-304" class=" x-hide-visibility" style="position: absolute;">
</div>
</div>
<div class="x-form-clear-left"/>
</div>
</form>

g1_
15 Apr 2010, 11:17 PM
Bump: Anyone have a working example of the the client side of a file upload?

As stated before the code at the very top of this page does not seem to actually upload the file just the http header for the upload.

jeetmarwah
16 Apr 2010, 8:25 AM
This is how I implemented and its working (till now :)))

I have a popup where the user can select a attachment to be uploaded and submit it. This is a form and its a POST to the server where you can implement a CONTROLLER(in Spring) or a servlet which ever is your preference.

This is hybrid code, GWT and GXT. The reason for that is there is a method 'addSubmitCompleteHandler' in GWT FormPanel.java class which is not available in GXT. Here is the client code for your complete understanding.

On the server side, I have used the apache commons (org.apache.commons.fileupload.* ) package. If you need that, please let me know and I will put a code snippet for you.

Hope this helps.




import com.google.gwt.user.client.ui.FormPanel;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.FormPanel.SubmitCompleteEvent;
...

// for Upload - GWT component - http://www.extjs.com/deploy/dev/examples/form/file-upload.html
public PopupPanel preparePopupFileUploadPanel(final WikiServiceAsync wikiService, final Grid<WikiCtrData> controlPanelGrid,
final WikiContentPanel wikiContentPanel)
{
final PopupPanel popUpPanel = new PopupPanel(false, true);

final FormPanel form = new FormPanel();
form.setEncoding(FormPanel.ENCODING_MULTIPART);
form.setMethod(FormPanel.METHOD_POST);
form.setWidth("450px");
form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler()
{
public void onSubmitComplete(SubmitCompleteEvent event)
{
//this will remove the upload message box
StatusUtil.setStatusValue(WikiGUIConstants.UPLOAD_ATTACHMENT_KEY, true);
popUpPanel.hide(true);

//refresh ur attachment list

}
});

HiddenField<String> timeZone = new HiddenField<String>();
timeZone.setName(WikiGUIConstants.BROWSER_CLIENT_TIMEZONE);
timeZone.setValue(WikiMenuHelper.getTimeZone(4));

//call the rpc call to set the ACTION to the form
List<String> lAction = new ArrayList<String>();
lAction.add("attach");
wikiService.getURLFor(wikiContentPanel.getControlId(), lAction, new RSAsyncCallback<Map<String, String>>()
{
@Override
public void onSuccess(Map<String, String> result)
{
//the values come from the server are:
String attachAction = result.get("attach");
System.out.println("Form Action -->" + attachAction);
form.setAction(attachAction);//setting the ACTION dyanically here
}
});


ContentPanel main = new ContentPanel();
main.setHeading("Upload Attachment");
main.getHeader().setStyleAttribute(WikiGUIConstants.BACKGROUND_COLOR_KEY, WikiGUIConstants.COLOR_HEADER_BACKGROUND);
main.getHeader().setStyleAttribute(WikiGUIConstants.COLOR_KEY, WikiGUIConstants.COLOR_WHITE);

//this is to hold all the widgets as the FormPanel is accepting only 1 widget
VerticalPanel holder = new VerticalPanel();
holder.setSpacing(10);
holder.setHorizontalAlign(HorizontalAlignment.RIGHT);

HorizontalPanel hp1 = new HorizontalPanel();//for browsing file
hp1.setSpacing(10);

HorizontalPanel hp2 = new HorizontalPanel();//for buttons
hp2.setSpacing(10);

FileUploadField file = new FileUploadField();
file.setWidth(400);
file.setName("fileUploadValue");//*** HAVE TO SET THIS ELSE THE UPLOAD WILL NOT WORK IN FIREFOX
file.setButtonOffset(10);
file.setFieldLabel("File");
file.setShim(true);
hp1.add(file);

hp1.add(timeZone);

Button btnSubmit = new Button("Submit");
btnSubmit.addListener(Events.OnClick, new Listener<BaseEvent>()
{
public void handleEvent(final BaseEvent be)
{
System.out.println("Submit Button is clicked....");
System.out.println(form.toString());
form.submit();

//Progress bar for upload
final MessageBox box = MessageBox.wait("Progress", "Uploading File, please wait...", "Uploading...");

StatusUtil.initStatus(WikiGUIConstants.UPLOAD_ATTACHMENT_KEY);
final Timer t = new Timer()
{
public void run()
{
if (StatusUtil.isStatusCompleted(WikiGUIConstants.UPLOAD_ATTACHMENT_KEY))
{
cancel();
box.close();
}
}
};
t.scheduleRepeating(500);
}
});

hp2.add(btnSubmit);

Button btnCancel = new Button("Cancel");
btnCancel.addListener(Events.OnClick, new Listener<BaseEvent>()
{
public void handleEvent(final BaseEvent be)
{
System.out.println("Button is clicked..will search the results now..");
popUpPanel.hide(true);

}
});
hp2.add(btnCancel);

holder.add(hp1);
holder.add(hp2);

main.add(holder);

form.add(main);

popUpPanel.setWidget(form);
popUpPanel.setPopupPositionAndShow(new PopupPanel.PositionCallback()
{
public void setPosition(int offsetWidth, int offsetHeight)
{
int left = (Window.getClientWidth() - offsetWidth) / 3;
int top = (Window.getClientHeight() - offsetHeight) / 3;
popUpPanel.setPopupPosition(left, top);
}
});

return popUpPanel;
}

g1_
18 Apr 2010, 11:03 PM
Thanks jeetmarwah (http://www.extjs.com/forum/member.php?115234-jeetmarwah)!
I'm going to go through this now and see if I have better luck

alacret
5 May 2010, 5:12 AM
Hi, i was having the same problem... i work out with the explorer File Upload example, and it didn't work until now...
reviewing this thread, i took notes from the last post, where a GWT solution is maded (that was how i could make it to work) and i see the comment on the setName method, i figure out that, that was the problem, the explorer source code demo has a mistake, they don't use the setName method on the instance of the FileUpload, and that's the razon why it doesn't work on Mozillas browser...

sven
7 May 2010, 3:52 AM
the explorer source code demo has a mistake, they don't use the setName method on the instance of the FileUpload, and that's the razon why it doesn't work on Mozillas browser...

I dont understand why this is a mistake in your example code. However, as many people just copy & paste code, i aded it