amcms_filemanager 0.1.9

data/app/views/amcms_filemanager/filemanager/index.html.erb

@@ -0,0 +1,168 @@
+<div id="amcms-filemanager-container" data-routes="<%= @config[:routes].to_json %>" data-type="<%= @config[:type] %>">
+  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light mb-3 fm">
+    <div class="collapse navbar-collapse">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="bi bi-plus-lg"></i>
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <li id="fm-mkdir-item">
+              <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#createFolderModal" href="#">
+                <i class="bi bi-folder-plus"></i>
+                Create Folder
+              </a>
+            </li>
+            <li id="fm-upload-item">
+              <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#uploadModal" href="#">
+                <i class="bi bi-cloud-arrow-up"></i>
+                Upload
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-item"><a class="nav-link" id="pwd-display"></a></li>
+      </ul>
+      <ul class="navbar-nav ms-auto" id="file-list-type">
+        <% if @config[:type] == 'image' %>
+        <li class="nav-item">
+          <a class="nav-link active" aria-current="page" href="#" id="thumbnail-view-btn" onclick="switchViewHandler(this, 'thumbnail')">
+            <i class="bi bi-grid-fill"></i>
+            Thumbnails
+          </a>
+        </li>
+        <% end %>
+        <li class="nav-item">
+          <a class="nav-link<%= @config[:type] == 'file' ? ' active' : '' %>" aria-current="page" href="#" id="list-view-btn" onclick="switchViewHandler(this, 'list')">
+            <i class="bi bi-list-ul"></i>
+            List
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <div class="fm-file-panel">
+    <div class="row" style="padding: 0 15px;">
+      <div id="fm-directory-structure" class="col-md-3 ">
+        <ul id="fm-directories-list" class="list-group position-static">
+
+        </ul>
+      </div>
+      <div id="fm-directory-listing" class="col-md-9" style="overflow: auto">
+        <div class="row" id="fm-file-list">
+
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Create Folder Modal -->
+  <div class="modal fade" id="createFolderModal" tabindex="-1" aria-labelledby="createFolderModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="createFolderModalLabel">Create Folder</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <form id="fm-new-folder-form">
+            <input type="text" name="item_name" id="new-folder-name" class="form-control" placeholder="Folder Name">
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-primary" onclick="createDirectory()">Create</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Rename Item Modal -->
+  <div class="modal fade" id="renameItemModal" tabindex="-1" aria-labelledby="renameItemModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="renameItemModalLabel">Rename Item</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <form id="fm-rename-item-form">
+            <input type="text" name="item_name" id="new-filename" class="form-control" placeholder="Rename">
+            <input type="hidden" name="original_filename" id="original-filename">
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-primary" onclick="renameFilename()">Rename</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Warning Modal -->
+  <div class="modal" tabindex="-1" id="fmModal" aria-labelledby="fmModal" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header alert" id="fm-modal-header">
+          <h5 class="modal-title fm-modal-title">Title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body fm-modal-body">
+        </div>
+        <div class="modal-footer fm-modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          <div class="fm-modal-footer-buttons"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Upload Modal -->
+  <div class="modal fade" tabindex="-1" id="uploadModal" aria-labelledby="uploadModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header alert" id="fm-upload-header">
+          <h5 class="modal-title upload-modal-title">Upload Files</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body upload-modal-body">
+          <form action="<%= filemanager_upload_path(type: @config[:type]) %>" class="dropzone" id="fm-uploader">
+            <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
+            <input type="hidden" name="dir" id="upload_to_dir">
+          </form>
+        </div>
+        <div class="modal-footer upload-modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Resize Image Modal -->
+  <div class="modal fade" id="resizeImageModal" tabindex="-1" aria-labelledby="resizeImageModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="imageResizeModalLabel">Resize Image</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-8" id="image-preview-panel">
+              <img src="" alt="" id="original_image">
+            </div>
+            <div class="col-4">
+              <form id="fm-resize-image-form">
+                <h6>Image Details</h6>
+                <div id="image-info-container">
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-secondary" onclick="resizeImageHandler(true)">Resize and Save Copy</button>
+          <button type="button" class="btn btn-primary" onclick="resizeImageHandler(false)">Resize and Save</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>

data/app/views/layouts/amcms_filemanager/application.html.erb

@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Amcms filemanager</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css" integrity="sha512-jU/7UFiaW5UBGODEopEqnbIAHOI8fO6T99m7Tsmqs2gkdujByJfkCbbfPSN4Wlqlb9TGnsuC0YgUgWkRBK7B9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <%= stylesheet_link_tag  "amcms_filemanager/application", media: "all" %>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js" integrity="sha512-oQq8uth41D+gIH/NJvSJvVB85MFk1eWpMK6glnkg6I7EdMqC1XVkW7RxLheXwmFdG03qScCM7gKS/Cx3FYt7Tg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+<body>
+  <%= yield %>
+
+<script>
+    const csrf = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+    const mkdirModal = new bootstrap.Modal(document.getElementById('createFolderModal'));
+    const renameItemModal = new bootstrap.Modal(document.getElementById('renameItemModal'));
+    const resizeImageModal = new bootstrap.Modal(document.getElementById('resizeImageModal'));
+    let pwd = '';
+    const type = document.getElementById('amcms-filemanager-container').getAttribute('data-type');
+
+    Dropzone.options.fmUploader = {
+      init: function() {
+        this.on("complete", file => {
+          changeDirectory(pwd)
+        });
+      }
+    };
+
+    getTargetOrigin = () => {
+      // return wilcard(*) if debug on and testing locally
+      // if (allowDebugOrigin && window.location.origin.match(regex)) return "*";
+      //
+      // // since we're not testing locally, return required origin
+      // return targetOrigin;
+      return '*';
+    }
+
+    const routes = (path) => {
+      const config = document.getElementById('amcms-filemanager-container');
+      const routes = JSON.parse(config.dataset.routes);
+      return routes[path];
+    };
+
+    sendMessage = (filename) => {
+
+      window.parent.postMessage(
+        {
+          mceAction: "customAction",
+          data: {
+            location: filename
+          }
+        },
+        getTargetOrigin()
+      );
+    };
+
+    directoryListing = (response) => {
+      html = activeView() === 'thumbnail-view-btn' && type == 'image' ? thumbnailListing(response) : listViewLiisting(response);
+      document.getElementById('fm-file-list').innerHTML = html;
+    }
+
+    thumbnailListing = (response) => {
+      let html = '';
+      for (const file of response.data.files) {
+        const onClick = file.directory ? `changeDirectory('${file.filepath}')` : `sendMessage('${file.filepath}')`;
+
+        html += `<div class="col-md-3 mb-3">
+          <div class="card text-center d-flex mb-3">
+            <div class="row align-items-center item-name">
+              <a
+                data-filename="${file.filename}"
+                data-filepath="${file.filepath}"
+                data-directory="${file.directory}"
+                data-size="${file.size}"
+                data-date-modified="${file.date_modified}"
+                class="fm-${file.directory ? 'folder' : 'file'}-item"
+                onClick="${onClick}"
+              >
+                <img
+                  src="${file.directory ? '/assets/amcms_filemanager/folder.png' : file.filepath}"
+                  alt="${file.filename}"
+                  class="fm-image-thumbnail"
+                  style="border: none; max-width: 90%"
+                >
+            </a>
+            </div>
+          </div>
+          <div class="btn-group d-flex w-100 mb-3">
+            <button type="button" class="btn btn-sm btn-primary item-name" style="width:85%" onclick="${onClick}">${file.filename}</button>
+            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" style="width:15%" data-bs-toggle="dropdown" aria-expanded="false">
+              <span class="visually-hidden">Toggle Dropdown</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              ${fileMenuOptions(file)}
+            </ul>
+          </div>
+        </div>`;
+      }
+      return html;
+    };
+
+    listViewLiisting = (response) => {
+      let html = '<ul class="list-group list-group-flush">';
+      for (const file of response.data.files) {
+        const onClick = file.directory ? `changeDirectory('${file.filepath}')` : `sendMessage('${file.filepath}')`;
+        const fileCopyMenuItem = !file.directory ? `<li><a class="dropdown-item" data-filepath="${file.filepath}" data-filename="${file.filename}" href="#" onclick="copyFileHandler(this)"><i class="bi bi-copy"></i> Copy</a></li>` : '';
+        html += `
+          <li class="list-group-item">
+            <div class="row">
+              <div class="col">
+                <a onclick="${onClick}">
+                  <i class="bi bi-${file.directory ? 'folder-fill' : 'file-earmark-text-fill'}"></i>
+                  ${file.filename}
+                </a>
+              </div>
+              <div class="col text-end">
+                ${file.directory ? '' : file.size}
+              </div>
+              <div class="col col-auto text-end">
+                ${file.date_modified}
+                <div class="btn-group" role="group">
+                  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"></button>
+                  <ul class="dropdown-menu">
+                    ${fileMenuOptions(file)}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </li>
+        `;
+      }
+      html += `</ul>`
+      return html;
+    };
+
+    directories = (response) => {
+      // console.log(response.data.root_directory);
+      let html = '';
+      if (pwd != response.data.parent_directory) {
+        html += `<li class="list-group-item">
+          <div onclick="changeDirectory('${response.data.parent_directory}', '${routes('cd_path')}')" class="w-100">
+            <i class="bi bi-folder-fill"></i>
+            ..
+          </div>
+        </li>`;
+      }
+      html += `<li class="list-group-item">
+        <div onclick="changeDirectory('${pwd}', '${routes('cd_path')}')" class="w-100">
+          <i class="bi bi-folder-fill"></i>
+          ${response.data.pwd_name}
+        </div>
+        <ul class="list-group">
+      `;
+      for (const file of response.data.files) {
+        if (file.directory) {
+          html += `
+            <li class="list-group-item">
+              <div onclick="changeDirectory('${file.filepath}')" class="w-100">
+                <i class="bi bi-folder-fill"></i>
+                ${file.filename}
+              </div>
+            </li>
+          `;
+        }
+      }
+      html += '</ul></li>';
+      document.getElementById('fm-directories-list').innerHTML = html;
+      document.getElementById('pwd-display').innerHTML = `/${pwd}`;
+    }
+
+    activeView = () => {
+      return document.querySelector('#file-list-type .nav-link.active').id;
+    };
+
+    fileMenuOptions = (file) => {
+      const fileCopyMenuItem = !file.directory ? `<li><a class="dropdown-item" data-filepath="${file.filepath}" data-filename="${file.filename}" href="#" onclick="copyFileHandler(this)"><i class="bi bi-copy"></i> Copy</a></li>` : '';
+      const filedownloadMenuItem = !file.directory ? `<li><a class="dropdown-item" data-filename="${file.filename}" href="${file.filepath}" target="_blank"><i class="bi bi-download"></i> Download</a></li>` : '';
+      const imageResizeMenuItem = file.image ? `<li><a class="dropdown-item" data-filepath="${file.filepath}" href="# " onclick="openImageDialogHandler(this)"><i class="bi bi-arrows-move"></i> Resize</a></li>` : '';
+      html = fileCopyMenuItem;
+      html += `
+        <li><a class="dropdown-item" data-filepath="${file.filepath}" data-filename="${file.filename}" href="#" onclick="openRenameDialogHandler(this)"><i class="bi bi-pencil"></i> Rename</a></li>
+        <li><a class="dropdown-item" data-filepath="${file.filepath}" href="#" onclick="deleteFileHandler(this)"><i class="bi bi-trash"></i> Delete</a></li>`
+      html += imageResizeMenuItem;
+      html += filedownloadMenuItem;
+      return html;
+    }
+
+    switchViewHandler = (e, listType) => {
+      e.classList.add('active');
+      deSelectedListClass = `#${listType == 'thumbnail' ? 'list' : 'thumbnail'}-view-btn`;
+      document.querySelector(deSelectedListClass).classList.remove('active');
+      changeDirectory(pwd);
+    };
+
+    copyFileHandler = (e) => {
+      const filepath = e.getAttribute('data-filepath');
+      axios.post(
+        routes('copy_path'),
+        {
+          item_name: filepath
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrf
+          }
+        }
+      )
+      .then(function(response) {
+        if(response.data.success) {
+          mkdirModal.hide();
+          document.getElementById('new-folder-name').value = '';
+          changeDirectory(pwd);
+        } else {
+          fmModalDialog(response.data.message);
+        }
+      });
+    };
+
+    createDirectory = () => {
+      const directoryName = document.getElementById('new-folder-name').value;
+      if (directoryName === null || directoryName === '') {
+        fmModalDialog(
+          {
+            title: 'Error',
+            body: 'Please enter a folder name',
+            status: 'danger'
+          }
+        )
+        return ;
+      }
+      axios.post(
+        routes('mkdir_path'),
+        {
+          pwd: pwd,
+          item_name: directoryName
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrf
+          }
+        }
+      )
+      .then(function(response) {
+        if(response.data.success) {
+          mkdirModal.hide();
+          document.getElementById('new-folder-name').value = '';
+          changeDirectory(pwd);
+        } else {
+          fmModalDialog(response.data.message);
+        }
+      });
+    };
+
+    changeDirectory = (filePath) => {
+      axios.get(`${routes('cd_path')}?type=${type}&cd=${filePath}`)
+        .then(function (response) {
+            // handle success
+          pwd = response.data.pwd;
+          document.getElementById('upload_to_dir').value = pwd
+          directoryListing(response);
+          directories(response);
+        })
+        .catch(function (error) {
+            // handle error
+            console.log(error);
+        })
+        .then(function () {
+            // always executed
+        });
+    }
+
+    fmModalDialog = (content) => {
+      const fmModal = new bootstrap.Modal(document.getElementById('fmModal'));
+      let header = document.getElementById('fm-modal-header');
+      header.className = 'modal-header'
+
+      if(content.status !== undefined || content.status) {
+        header.classList.add("alert");
+        header.classList.add(`alert-${content.status}`);
+      }
+      document.querySelector('.fm-modal-title').innerHTML = content.title
+      document.querySelector('.fm-modal-body').innerHTML = content.body;
+
+      fmModalDialogButtons(content.buttons);
+
+      fmModal.show();
+    }
+
+    fmModalDialogButtons = (buttons) => {
+      if(buttons === undefined) return;
+
+      let btnContainer = document.querySelector('.fm-modal-footer-buttons');
+      btnContainer.innerHTML = '';
+      for (const btn of buttons) {
+        let node = document.createElement('button');
+        let textNode = document.createTextNode(btn.name);
+        node.appendChild(textNode);
+        node.classList.add('btn');
+        node.classList.add(`btn-${btn.type}`);
+        node.onclick = btn.onclick;
+        node.setAttribute('data-bs-dismiss', 'modal');
+        btnContainer.appendChild(node);
+      }
+    }
+
+    deleteFileHandler = (e) => {
+      const filepath = e.getAttribute('data-filepath');
+      fmModalDialog({
+        title: 'Please confirm',
+        body: 'Are you sure you wish to delete this item?',
+        buttons: [
+          { name: 'Ok', onclick: () => { deleteFile(`${filepath}`) }, type: 'primary' }
+        ]
+      });
+    }
+
+    deleteFile = (file) => {
+      axios.delete(
+        routes('rm_path'),
+        {
+          data: { file: file },
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrf
+          }
+        },
+      ).then(function (response) {
+        changeDirectory(pwd);
+      })
+      .catch(function (error) {
+        console.log(error);
+      })
+    }
+
+    openImageDialogHandler = (e) => {
+      document.getElementById('original_image').src = e.getAttribute('data-filepath');
+      document.getElementById('original_image').setAttribute('width', '');
+      document.getElementById('original_image').setAttribute('height', '');
+
+      const filepath = encodeURIComponent(e.getAttribute('data-filepath'));
+
+      axios.get(
+        routes('image_info_path').replace(':id', filepath),
+        {
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrf
+          }
+        }
+      )
+      .then(function(response) {
+        if(response.status === 200) {
+          html = `
+            <table class="table table-striped">
+              <tr>
+                <td>File:</td>
+                <td>
+                  <input type="hidden" id="orig_file_path" value="${response.data.filepath}">
+                  ${response.data.filepath}
+                </td>
+              </tr>
+              <tr>
+                <td>Width:</td>
+                <td>
+                  <input type="hidden" id="original_image_width" value="${response.data.width}">
+                  <input type="text" name="image_width_text" id="image_width_text" onblur="changeImageHeight('width')" value="${response.data.width}"> px
+                </td>
+              </tr>
+              <tr>
+                <td>Height:</td>
+                <td>
+                  <input type="hidden" id="original_image_height" value="${response.data.height}">
+                  <input type="text" name="image_height_text" id="image_height_text" onblur="changeImageHeight('height')" value="${response.data.height}"> px
+                </td>
+              </tr>
+            </table>
+          `;
+          document.getElementById('image-info-container').innerHTML = html;
+        } else {
+
+        }
+      });
+
+      resizeImageModal.show();
+    };
+
+    changeImageHeight = (attrib) => {
+      const oWidth = document.getElementById("original_image_width").value
+      const oHeight = document.getElementById("original_image_height").value;
+      let nWidth, nHeight;
+
+      const ratio = oWidth / oHeight;
+
+      if(attrib === 'width') {
+        nWidth = document.getElementById("image_width_text").value
+        nHeight = nWidth / ratio;
+        document.getElementById("image_height_text").value = Math.round(nHeight);
+      }
+      else {
+        nHeight = document.getElementById("image_height_text").value;
+        nWidth = nHeight * ratio;
+        document.getElementById("image_width_text").value = Math.round(nWidth);
+      }
+
+      document.getElementById('original_image').setAttribute('width', nWidth);
+      document.getElementById('original_image').setAttribute('height', nHeight);
+    };
+
+    resizeImageHandler = (copy) => {
+      const filepath = encodeURIComponent(document.getElementById('orig_file_path').value);
+      axios.put(
+        routes('image_info_path').replace(':id', filepath),
+        {
+          width: document.getElementById("image_width_text").value,
+          height: document.getElementById("image_height_text").value,
+          copy
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrf
+          }
+        }
+      )
+      .then(function(response) {
+        if(response.data.success) {
+          resizeImageModal.hide();
+          changeDirectory(pwd);
+        } else {
+
+        }
+      })
+      .catch(function (error) {
+          console.log(error);
+      });
+    };
+
+    openRenameDialogHandler = (e) => {
+      document.getElementById('new-filename').value = e.getAttribute('data-filename');
+      document.getElementById('original-filename').value = e.getAttribute('data-filename');
+      renameItemModal.show();
+    }
+
+    renameFilename = () => {
+      const newFilename = document.getElementById('new-filename').value;
+      if (newFilename === null || newFilename === '') {
+        fmModalDialog(
+          {
+            title: 'Error',
+            body: 'Please enter a filename',
+            status: 'danger'
+          }
+        )
+        return ;
+      }
+      axios.put(
+        routes('rename_path'),
+        {
+          pwd: pwd,
+          original_filename: document.getElementById('original-filename').value,
+          item_name: newFilename
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrf
+          }
+        }
+      )
+      .then(function(response) {
+        if(response.data.success) {
+          renameItemModal.hide();
+          document.getElementById('new-filename').value = '';
+          changeDirectory(pwd);
+        } else {
+          fmModalDialog(response.data.message);
+        }
+      })
+      .catch(function (error) {
+          console.log(error);
+      });
+    }
+
+    changeDirectory('');
+</script>
+</body>
+</html>

data/config/locales/en.yml

@@ -0,0 +1,4 @@
+en:
+  errors:
+    messages:
+      extension_whitelist_error: "You are not allowed to upload %{extension} files, allowed types: %{allowed_types}"

data/config/routes.rb

@@ -0,0 +1,12 @@
+AmcmsFilemanager::Engine.routes.draw do
+  get :filemanager, to: 'filemanager#index'
+  namespace :filemanager do
+    get :change_directory
+    post :mkdir
+    post :copy
+    post :upload
+    put :rename
+    delete :destroy
+  end
+  resources :imagemanager
+end