Basic uplod for the documents

app/components/button/submit.js

 import Component from '@glimmer/component';
 
+
 class ButtonSubmitComponent extends Component {
   /*
   "Submit Button" component. Renders a button as either

app/components/button/upload.hbs

+<input
+  type="file"
+  multiple="true"
+  hidden="true"
+  {{on "change" this.onUploadChange }} />
+
+<button
+  class="btn btn-bordered btn-light btn-flat"
+  type="button" {{on "click" this.onClickProxyUpload }}>
+    <i class="fa fa-upload mr-1 text-success"></i>
+    Upload
+</button>
\ No newline at end of file

app/components/button/upload.js

+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+
+export default class UploadButtonComponent extends Component {
+  /*
+    Component which takes care of uploading documents to the server.
+    Takes only one argument - parental node of the uploaded documents.
+
+    Example of usage:
+
+      <Button::Upload @node={{@node}} />
+  */
+  @service store;
+
+  @action
+  onClickProxyUpload() {
+    /* Proxy click event to real input[type=file] element
+    */
+    let element = document.querySelector('input[type=file]');
+
+    if (element) {
+      element.click();
+    } else {
+      console.error('input[type=file] element not found');
+    }
+  }
+
+  @action
+  onUploadChange(event) {
+    let files;
+    console.log(this.args.node.id);
+    console.log(event.target.files);
+
+    files = event.target.files;
+
+    if (!files) {
+      console.error('Empty array for uploaded files');
+      return;
+    }
+
+    Array.from(files, (file) => {
+      let new_doc;
+
+      /* Upload of documents to the server side is two stage process:
+        (1.) create document model on the server side
+        (2.) upload file and associated it with model created in (1.)
+       */
+      new_doc = this._createDocumentModel({
+        file: file,
+        node: this.args.node,
+        lang: "deu"
+      });
+      this._uploadFile({doc: new_doc, file: file});
+    });
+  }
+
+  _createDocumentModel({file, node, lang}) {
+    /*
+      Creates document model on the server side.
+
+      This will create, on the server side, the document model
+      with specified `lang`, `title`, `parent_id` attribute.
+      Server side will take care of associating it to the correct user.
+      It is important to understand that NO FILE UPLOAD happens
+      in this method. Because there is no file uploaded at this stage,
+      server side document model will be created with
+       `size` and `page_count` attributes set to zero i.e.
+
+        size = 0
+        page_count = 0
+    */
+    let new_doc;
+
+    new_doc = this.store.createRecord('document');
+    new_doc.title = file.name;
+    new_doc.parent = node;
+    new_doc.lang = lang;
+
+    new_doc.save();
+
+    return new_doc;
+  }
+
+  _uploadFile({file, doc}) {
+    /*
+      Uploads given file for given document model.
+
+      Document model ``doc`` should exist on the server side.
+    */
+  }
+
+}
\ No newline at end of file

app/components/commander/action_buttons.hbs

 <div>
-  <button class="btn btn-bordered btn-light btn-flat"
-  type="button">
-    <i class="fa fa-upload mr-1 text-success"></i>
-    Upload
-  </button>
+  <Button::Upload @node={{@node}} />
 
-  <button class="btn btn-bordered btn-light btn-flat"
-  type="button" {{on "click" @openNewFolderModal }}>
-    <i class="fa fa-plus mr-1 text-success"></i>
+  <button
+    class="btn btn-bordered btn-light btn-flat"
+    type="button" {{on "click" @openNewFolderModal }}>
+      <i class="fa fa-plus mr-1 text-success"></i>
     New Folder
   </button>
 </div>
\ No newline at end of file

app/components/commander/action_modes.hbs

-<div class="panel-mode">
-  <button type="button" class="btn btn-light mx-1"
-    {{on "click" @onPanelToggle}}>
-    {{#if @dualPanelMode}}
-      <i class="bi-x"></i>
-    {{else}}
-      <i class="bi-layout-split"></i>
-    {{/if}}
-  </button>
+<div class="d-flex">
+  <Commander::ViewMode
+    @onViewModeChange={{@onViewModeChange}} />
+  <div class="panel-mode">
+    <button type="button" class="btn btn-light mx-1"
+      {{on "click" @onPanelToggle}}>
+      {{#if @dualPanelMode}}
+        <i class="bi-x"></i>
+      {{else}}
+        <i class="bi-layout-split"></i>
+      {{/if}}
+    </button>
+  </div>
 </div>
\ No newline at end of file

app/components/commander/index.hbs

 <div class="panel commander col m-2 p-2">
   <div class="d-flex justify-content-between">
     <Commander::ActionButtons
-      @openNewFolderModal={{this.openNewFolderModal}} />
+      @openNewFolderModal={{this.openNewFolderModal}}
+      @node={{@node}} />
 
     <Commander::ActionModes
       @onPanelToggle={{@onPanelToggle}}
-      @dualPanelMode={{@dualPanelMode}} />
+      @dualPanelMode={{@dualPanelMode}}
+      @onViewModeChange={{this.onViewModeChange}} />
   </div>
 
   <Modal::NewFolder
@@ -19,20 +21,22 @@
     @extranode={{@extranode}}
     @hint={{@hint}} />
 
-  {{#each @node.children as |node|}}
-    {{#let (component node.nodeType) as |NodeType|}}
-      {{! NodeType is either <Folder /> or <Document />}}
-      <NodeType @model={{node}}>
-        {{#if (is_equal @hint "left")}}
-          <Commander::LinkToLeft
-            @node={{node}}
-            @extranode={{@extranode}} />
-        {{else}}
-          <Commander::LinkToRight
-            @node={{@extranode}}
-            @extranode={{node}} />
-        {{/if}}
-      </NodeType>
-    {{/let}}
-  {{/each}}
+  <div class="view-mode-{{this.view_mode}}">
+    {{#each @node.children as |node|}}
+      {{#let (component node.nodeType) as |NodeType|}}
+        {{! NodeType is either <Folder /> or <Document />}}
+        <NodeType @model={{node}}>
+          {{#if (is_equal @hint "left")}}
+            <Commander::LinkToLeft
+              @node={{node}}
+              @extranode={{@extranode}} />
+          {{else}}
+            <Commander::LinkToRight
+              @node={{@extranode}}
+              @extranode={{node}} />
+          {{/if}}
+        </NodeType>
+      {{/let}}
+    {{/each}}
+  </div>
 </div>

app/components/commander/index.js

@@ -4,7 +4,10 @@ import { action } from '@ember/object';
 
 
 export default class CommanderComponent extends Component {
+  // show create new folder modal dialog?
   @tracked show_new_folder_modal = false;
+  // nodes are displayed as list or as grid?
+  @tracked view_mode = 'list';
 
   @action
   openNewFolderModal() {
@@ -15,4 +18,9 @@ export default class CommanderComponent extends Component {
   closeNewFolderModal() {
     this.show_new_folder_modal = false;
   }
+
+  @action
+  onViewModeChange(new_view_mode) {
+    this.view_mode = new_view_mode;
+  }
 }

app/components/commander/view_mode.hbs

+<button
+  id="view-mode"
+  type="button"
+  data-bs-toggle="dropdown"
+  class="btn btn-light dropdown-toggle mx-1">
+    <i class="bi-grid"></i>
+</button>
+<ul class="dropdown-menu"
+  aria-expand="false"
+  aria-labelledby="display-mode">
+
+  {{#each this.items as |item|}}
+    <li class="dropdown-item">
+      <button
+        class="btn btn-link text-decoration-none"
+        {{on "click" (fn this.onItemClick item)}}>
+        <span class="px-2">{{ item.title }}</span>
+        {{#if (is_equal this.current_item item.value) }}
+            <i class="bi-check-lg text-success"></i>
+        {{/if}}
+      </button>
+    </li> <!-- dropdown-item -->
+  {{/each}}
+</ul> <!-- dropdown-menu -->

app/components/commander/view_mode.js

+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { A } from '@ember/array';
+import { action } from '@ember/object';
+
+
+export default class ViewModeComponent extends Component {
+
+  @tracked items = A([
+    {
+      title: 'List',
+      value: 'list',
+      is_checked: true
+    },
+    {
+      title: 'Grid',
+      value: 'grid',
+      is_checked: false
+    },
+  ]);
+
+  @tracked current_item = 'list';
+
+
+  @action onItemClick(item) {
+    this.current_item = item.value;
+    this.args.onViewModeChange(item.value);
+  }
+
+}

app/components/document.hbs

 <div class="node document">
+    <Input @type="checkbox" />
     <div class="icon document"></div>
     <div class="title">
         <LinkTo @route="authenticated.document" @model={{@model}}>

app/components/folder.hbs

 <div class="node folder">
+  <Input @type="checkbox" />
   <div class="icon folder"></div>
   <div class="title">
     {{yield}}

app/components/modal/new_folder.js

@@ -3,8 +3,6 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
-import { Modal } from 'bootstrap';
-
 
 export default class NewFolderComponent extends Component {
   @tracked title = '';

app/models/document.js

@@ -3,6 +3,7 @@ import NodeModel from './node';
 
 export default class DocumentModel extends NodeModel {
   @attr image;
+  @attr lang;
 
   get nodeType() {
     return 'document';