## html
<div class="node input" style="transform: translate({{ x }}px, {{ y }}px)">
  <sf-template path="Blackprint/nodes/template/routes.sf"></sf-template>
  <sf-template path="Blackprint/nodes/template/header.sf"></sf-template>

  <div class="content">
  	<div class="file-place" @click="browseFile(event)" @filedrop="dropFile">
  		{{ name || 'Drop file here'}}
  	</div>

    <div class="right-port">
      <sf-template path="Blackprint/nodes/template/output-port.sf"></sf-template>
    </div>
  </div>

  <sf-template path="Blackprint/nodes/template/other.sf"></sf-template>
</div>

## scss-global
bpic-input-ui-file {
  .file-place{
    margin: 5px;
    border: 1px dashed white;
    width: 120px;
    max-height: 20px;
    overflow: hidden;
    word-break: break-all;
    display: flex;
    float: left;
    margin-right: -20px;
  }
  input{
    opacity: 0;
    width: 1px;
    height: 1px;
  }
}

## js-global
Blackprint.Sketch.registerInterface('BPIC/Input/UI/File',
class FileIFace extends Context.IFace.File {
  constructor(node){
    super(node);

    let that = this;
    this.dropFile = function(file){
      file = file[0];

      // Fix for multiple window
      if(file.constructor !== File)
        Object.setPrototypeOf(file, File.prototype);

      that.setFile(file);
    }
  }
});