Announcement

**Isomorphic** · 1 Dec 2008, 18:38

You want to use FileItem or MultiFileItem, but for now you'll need to read the Upload Overview from the SmartClient docs to get an idea of the intended usage.

**rotra** · 29 Jan 2009, 04:31

example FileItem

No way to have an example with smartgwt for the FileItem dialog?

Thank's
RT

**ysbelman** · 5 Feb 2009, 20:30

Fist start by file upload widgets. Using a DynamicForm, with UploadItem, a few HiddentItems. Set the encoding to Multipart. Set form's target to an IFRAME, that you will also will add.

Code:

public void fileUpload(){
	VLayout layout = new VLayout();
	
	final DynamicForm uploadForm = new DynamicForm();		
	uploadForm.setEncoding(Encoding.MULTIPART);
	UploadItem fileItem = new UploadItem("image");
	TextItem nameItem = new TextItem("imageName");
	TextItem descriptionItem = new TextItem("description");
	HiddenItem spaceImageIdItem = new HiddenItem("spaceImageId");
	HiddenItem propertyIdItem = new HiddenItem("propertyId");
	propertyIdItem.setValue(23);
	spaceImageIdItem.setValue(0);
	uploadForm.setTarget("hidden_frame");
	uploadForm.setAction("/company/imageUploadRest.do");
	IButton uploadButton = new IButton("Upload...");
	uploadButton.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler(){
		public void onClick(ClickEvent e){
			uploadForm.submitForm();
		}
	});
		
	uploadForm.setItems(fileItem, nameItem, descriptionItem, spaceImageIdItem, propertyIdItem);
	layout.setMembers(uploadForm, uploadButton);

	RootPanel.get("tree1").add(layout);
}

server side code, for Spring users:

Code:

@RequestMapping("/imageUploadRest.do")
@Transactional
public void processImageUploadRest(
		@RequestParam("imageName") String imageName, 
		@RequestParam("description") String description,
		@RequestParam("spaceImageId") String spaceImageId,		
		@RequestParam("image") MultipartFile image,
		@RequestParam("propertyId") String propertyId,
		HttpServletResponse response) throws IOException, Exception {

	doImageSave(imageName, description, spaceImageId, image, propertyId);

	PrintWriter out = response.getWriter();
	out.println("<response>");  
	out.println("<data>");
	out.println("<status>0</status>");	 
	out.println("</data>  ");
	out.println("</response>  ");		
}

@Transactional
public void doImageSave(String imageName, 
					 String description,
					 String spaceImageId,		
					 MultipartFile image,
					 String propertyId ) throws IOException, Exception {
	Long _spaceImageId = new Long(spaceImageId);
	ImageBlob imageBlob = new ImageBlob(image.getContentType(), image.getInputStream());
	imageBlobDAO.create(imageBlob);
}

IFRAME in your html:

Code:

<html>
<head></head>
<body bgcolor="#FFFFFF">
<iframe height="0" name="hidden_frame">   </iframe>
...

All of this was described in the doc Isomorphic pointed us to http://www.smartclient.com/docs/6.5....#group..upload

However, the docs do not detail how to get the callback working. I don't know JS at all, so maybe someone can finish this example and supply the code to make a callback from the iframe?

**tomsontom** · 10 Feb 2009, 02:21

Implementation for Callback just like GWT-FormPanel

I added an implementation working exactly the same than the GWT-FormPanel one including a callback when the frame is reloaded successfully.

**tomsontom** · 10 Feb 2009, 02:21

Originally posted by tomsontom

I added an implementation working exactly the same than the GWT-FormPanel one including a callback when the frame is reloaded successfully.

Should have mentionned to the bug http://code.google.com/p/smartgwt/issues/detail?id=17

**dejan** · 12 Mar 2009, 01:12

Here is the code which I have used for upload notification. You can use it as extension to approach described by ysbelman.

Before we submit form, we should register callback function. Here is the code that does it:

Code:

public class JavaScriptMethodHelper {
	private static int requestCounter = 0;
	
	public static String registerCallbackFunction(JavaScriptMethodCallback callback) {
		String callbackName = "callback" + (requestCounter++);
		createCallbackFunction(callback, callbackName);
		return callbackName;
	}
	
	private native static void createCallbackFunction( JavaScriptMethodCallback obj, String callbackName )/*-{		
	tmpcallback = function( j ){		   
		obj.@example.JavaScriptMethodCallback::execute(Lcom/google/gwt/core/client/JavaScriptObject;)( j );
	};
	$wnd[callbackName]=tmpcallback;	
}-*/;
}

JavaScriptMethodCallback is just simple interface:

Code:

package example;
import com.google.gwt.core.client.JavaScriptObject;

public interface JavaScriptMethodCallback {
	public void execute(JavaScriptObject obj);
}

Our DynamicForm should have HiddenItem field that will contain name of callback function. Before we submit form, we should register callback and set name of callback function to HiddenItem:

Code:

....
final HiddenItem callbackItem = new HiddenItem("callbackName");
uploadButton.addClickHandler( new ClickHandler() {
	public void onClick(ClickEvent event) {
		String callbackName = JavaScriptMethodHelper.registerCallbackFunction(new JavaScriptMethodCallback() {
			public void execute(JavaScriptObject obj) {
				uploadFinished(obj);
			}
					
		});
		callbackItem.setValue(callbackName); //set hidden item 
		form.submitForm();
	}
});

Now, when we submit form, we should return response that will contain something like this:

Code:

<script type="text/javascript">
window.top.${callbackName}(...); 
</script>

I usualy return some JSON object as method parameter. This object will be passed to uploadFinished method that we should write in Java.
Note that callbackName is name of request parameter that contains name of callback function. It was submitted by our HiddenItem. I use struts2 but in plain jsp2 it could be soemthing like ${param.callbackName}

**derferic** · 13 Apr 2009, 12:16

Just a spring question for ysbelman how do you write @InitBinder to process the image parameter. All my attempts to setup binder are concluded by :

java.lang.IllegalArgumentException: Cannot convert value of type [java.lang.String] to required type [org.springframework.web.multipart.MultipartFile]: PropertyEditor

Thanks.

**Halabe** · 21 Apr 2009, 02:50

Hi,

I used the method provided by ysbelman but without Spring.

When the upload completes a new window is being opened. This is from the iframe.

How can I close this window from the code or how can I remove it?

P.S.: If I remove the iframe, the window of my application will be blank.

Thank you

**Halabe** · 22 Apr 2009, 04:11

I found out that my issue was due to the fact that I was placing the hidden frame in another html file.

What I need now is how to read the attributes of the request from a regular servlet as it is done in the Spring do as it was posted by ysbelman.

**Halabe** · 23 Apr 2009, 07:03

Hi again,

I used the method described by dejan for the callback.
However, I am sending the callbackname in a different way (calling a service which sets the name in the session).

Everything is working fine in IE but the callback is not working in Firefox and Chrome.

Note that I used String instead of JavaScriptObject.

Did anyone face a similar issue? What should I do to close it?

Thank you

**Nbawwwwww** · 10 Nov 2009, 04:19

Originally posted by dejan

Here is the code which I have used for upload notification. You can use it as extension to approach described by ysbelman.

Before we submit form, we should register callback function. Here is the code that does it:

Code:

public class JavaScriptMethodHelper {
	private static int requestCounter = 0;
	
	public static String registerCallbackFunction(JavaScriptMethodCallback callback) {
		String callbackName = "callback" + (requestCounter++);
		createCallbackFunction(callback, callbackName);
		return callbackName;
	}
	
	private native static void createCallbackFunction( JavaScriptMethodCallback obj, String callbackName )/*-{		
	tmpcallback = function( j ){		   
		obj.@example.JavaScriptMethodCallback::execute(Lcom/google/gwt/core/client/JavaScriptObject;)( j );
	};
	$wnd[callbackName]=tmpcallback;	
}-*/;
}

JavaScriptMethodCallback is just simple interface:

Code:

package example;
import com.google.gwt.core.client.JavaScriptObject;

public interface JavaScriptMethodCallback {
	public void execute(JavaScriptObject obj);
}

Our DynamicForm should have HiddenItem field that will contain name of callback function. Before we submit form, we should register callback and set name of callback function to HiddenItem:

Code:

....
final HiddenItem callbackItem = new HiddenItem("callbackName");
uploadButton.addClickHandler( new ClickHandler() {
	public void onClick(ClickEvent event) {
		String callbackName = JavaScriptMethodHelper.registerCallbackFunction(new JavaScriptMethodCallback() {
			public void execute(JavaScriptObject obj) {
				uploadFinished(obj);
			}
					
		});
		callbackItem.setValue(callbackName); //set hidden item 
		form.submitForm();
	}
});

Now, when we submit form, we should return response that will contain something like this:

Code:

<script type="text/javascript">
window.top.${callbackName}(...); 
</script>

I usualy return some JSON object as method parameter. This object will be passed to uploadFinished method that we should write in Java.
Note that callbackName is name of request parameter that contains name of callback function. It was submitted by our HiddenItem. I use struts2 but in plain jsp2 it could be soemthing like ${param.callbackName}

Hello, could you please give me more details about the script that will call back a method declared in the client side, I failed to do it. thanks.

**Eethyo** · 30 Nov 2009, 12:47

Hi,

i followed the example and everything works fine.
The method gets registered and so on.

My problem is the following: I can't call my excecution method via

Code:

<script type="text/javascript">
_methodName(...);
</script>

What i can do is something like:

Code:

<script type="text/javascript">
_alert('Hi');
</script>

or

Code:

<button onClick="javascript:_methodeName(...);">test</button>

is also working.
I just cant geht methodName(...) run from serverside code. Any idea's? How to call a freshly registred method via <script>....</script>?

Thanks alot,

Eeth

Announcement

FileUpload dialog

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment