gwtupload input type costum

Question

I using the gwtupload libary to change the upload view of my application. I want to implement basically the same as in this example "Single uploader using a customizable button..." . Therefore I'm having a custom button class:

public class CostumButton extends Composite implements HasClickHandlers {
    DecoratorPanel widget;

    public CostumButton() {
      widget = new DecoratorPanel();
      initWidget(widget);
      widget.setStyleName("costum-Button");

      widget.setSize("100%","100%");

    }

    public HandlerRegistration addClickHandler(ClickHandler handler) {
      return addDomHandler(handler, ClickEvent.getType());
    }


  }

and a FileUploadFormImplDefault:

// new costum button
CostumButton button = new CostumButton();


// Create a FileUpload widget.
fileUpload = new SingleUploader(FileInputType.CUSTOM.with(button));

fileUpload.setTitle("costumFileUpload");

fileUpload.getWidget().setSize("100%", "50px");
RootPanel.get().add(fileUpload);

my css file:

.base-Button:active {
        position:relative;
        top:1px;
        border: none;
}

.costum-Button {
    cursor: pointer;
    background-color: green;
    background-image: url("resources/img/button_upload0.png");  
}

.custom-Button:hover {
    background-image: url("resources/img/button_upload0_hover.png");    
}

everything is loaded with an upload view:

uploadForm = new FileUploadFormImplCostum(actionUrl);
add(uploadForm);

When I start my application (in debug mode) nothing is shown. I try to debug it with the chrome debug mode, but no evidence from my costume form. Not quite sure why. thx for any help.

//EDIT: Fixed a few things know I'm having my custom button and per setAutoSubmit(true); I disabled the "Send/submit" button. Disabling works fine, but it is just invisible so it is there and takes space away which is a problem because my uploader is within another Panel and know I can not center it because it's center with the submit button. So how can I delete or overlap the button. css? thx :)

Answer 1

I fixed the problem with Css and postion.

Hint: If somebody wants to customize an UploadForm in the future, for a simple one-file-upload, it's easier to to add a clickHanderler onto your new form (image, button etc.), which performs an element click on the base upload form. Then you can position your base form out of the display area or set it behind the your new customize UploadForm and then beautify it with css.

The gwtupload framework is very good, but for this simple task to much. For multipy fileupload with animation etc. i can recommend it :)