I'm trying to select a file by clicking on an image and releasing the click event of either element input file.
In HTML the example would be:
<html>
<head>
<script>
function openSelectorFile(){
document.getElementById("fichero").click();
}
</script>
</head>
<body>
<div style="visibility:hidden"><input type="file" id="fichero"/></div>
<img src="http://www.altolujo.com/lujo/coche-de-lujo-ferrari458-550x268.jpg" onclick="openSelectorFile();"/>
</body>
</html>
When I try in SmartGWT, not working and not what would be the best method to perform the same operation.
The code I tried to run it:
package pruebas.client;
import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.FormLayoutType;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.form.fields.UploadItem;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Pruebas implements EntryPoint {
UploadItem foto;
public void onModuleLoad() {
DynamicForm formFoto = new DynamicForm();
formFoto.setItemLayout(FormLayoutType.ABSOLUTE);
formFoto.setAlign(Alignment.CENTER);
foto = new UploadItem("FOTO");
foto.setShowTitle(false);
CanvasItem canvasImage = new CanvasItem();
canvasImage.setShowTitle(false);
Img image = new Img("http://www.altolujo.com/lujo/coche-de-lujo-ferrari458-550x268.jpg",550,268);
image.addClickHandler(new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
abrirSelectorFichero();
}
});
canvasImage.setCanvas(image);
formFoto.setFields(foto,canvasImage);
formFoto.draw();
}
public native void abrirSelectorFichero()/*-{
var obj = this.@pruebas.client.Pruebas::foto.getJSObjectUploadFoto();
obj.click();
}-*/;
}
Can someone please guide me to achieve my goal.
many Thanks
In HTML the example would be:
<html>
<head>
<script>
function openSelectorFile(){
document.getElementById("fichero").click();
}
</script>
</head>
<body>
<div style="visibility:hidden"><input type="file" id="fichero"/></div>
<img src="http://www.altolujo.com/lujo/coche-de-lujo-ferrari458-550x268.jpg" onclick="openSelectorFile();"/>
</body>
</html>
When I try in SmartGWT, not working and not what would be the best method to perform the same operation.
The code I tried to run it:
package pruebas.client;
import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.FormLayoutType;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.form.fields.UploadItem;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Pruebas implements EntryPoint {
UploadItem foto;
public void onModuleLoad() {
DynamicForm formFoto = new DynamicForm();
formFoto.setItemLayout(FormLayoutType.ABSOLUTE);
formFoto.setAlign(Alignment.CENTER);
foto = new UploadItem("FOTO");
foto.setShowTitle(false);
CanvasItem canvasImage = new CanvasItem();
canvasImage.setShowTitle(false);
Img image = new Img("http://www.altolujo.com/lujo/coche-de-lujo-ferrari458-550x268.jpg",550,268);
image.addClickHandler(new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
abrirSelectorFichero();
}
});
canvasImage.setCanvas(image);
formFoto.setFields(foto,canvasImage);
formFoto.draw();
}
public native void abrirSelectorFichero()/*-{
var obj = this.@pruebas.client.Pruebas::foto.getJSObjectUploadFoto();
obj.click();
}-*/;
}
Can someone please guide me to achieve my goal.
many Thanks