custom p:fileUpload in p:dialog is not working

Question

I'm trying to use <p:fileUpload> inside <p:dialog>. When I use:

<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            <p:fileUpload mode="simple" id="file" value="#{hints.uploadedFile}" />
        </div>
    </div>
</div>

everything is ok, but I need to use my own styles. So I'm trying this:

<p:dialog .... >    
    <h:form id="resourceDialogForm">    
        <div class="row">
            ...
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="file-upload-panel">
                        <p:fileUpload mode="simple" id="file" value="#{hints.uploadedFile}" />
                        <div class="input-append input-group">
                            <h:panelGroup styleClass="input-group-btn">
                                <button class="btn btn-default" type="button">
                                <h:outputText value="#{text['resourceDialog.choose.file']}" />
                                </button>
                            </h:panelGroup>
                            <input class="input-large form-control" type="text" readonly="readonly" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </h:form>
</p:dialog>

It is working when I use it not in <p:dialog>, but in <p:dialog> when I click the button nothing is happening. I've checked a lot of topics (e.g. File upload doesn't work with AJAX in PrimeFaces) but I'm still not able to work it out. I've also tried to use advaced <p:fileUpload> with dragDropSupport="true" and fileUploadListener, but while drag and drop is working just fine, the button is not.