Uploading Files

The cuba-file-field component allows you to to upload files to the server.

The example below is a stub and doesn’t upload any files, so you can safely test it.

Source code:

index.html

<html>
<head>
	<link rel="import" href="src/cuba/file/file-upload-app.html">
	<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
    <file-upload-app></file-upload-app>
</body>
</html>

src/cuba/file/file-upload-app.html

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/cuba-app/cuba-app.html">
<link rel="import" href="../../../bower_components/cuba-file-field/cuba-file-field.html">

<dom-module id="file-upload-app">
  <template>

    <cuba-app api-url="/app/rest/"></cuba-app>

    <cuba-file-field on-cuba-upload-success="_onUploadSuccess"></cuba-file-field>

    <br/>

    <template is="dom-if" if="[[fileIsUploaded]]">
      File "[[uploadedFile.name]]" is successfully saved into <b>SYS_FILE</b> table.
      The record id is [[uploadedFile.id]].
    </template>

  </template>
  <script>
    class FileUploadApp extends Polymer.Element {
      static get is() {
        return 'file-upload-app';
      }

      static get properties() {
        return {
          uploadedFile: Object,
          fileIsUploaded: Boolean
        };
      }

      _onUploadSuccess(e) {
        this.set('uploadedFile', e.detail);
        this.set('fileIsUploaded', true);
      }

    }

    customElements.define(FileUploadApp.is, FileUploadApp);
  </script>
</dom-module>