Server File Management

Server File Manager component using Vuetify framework.

Features

• Create

  • New folder
  • New File

• View

  • Navigation
    • Tree
    • Breadcrumb
    • Search All, Search within folder
  • Sort

• Update

  • Rename
  • Move File, Folder

• Delete

  • Delete File, Folder and all Files within

• Translation using vue-i18n

Install Vuetify

vue add vuetify

Install Vue i18n

vue add i18n

Install

yarn add @skymapglobal/server-file-management

Usage

ServerFileManager Usage

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <div class="d-flex align-center">
        App
      </div>

      <v-spacer></v-spacer>
    </v-app-bar>

    <v-main>
      <div
        class="d-flex justify-center align-center"
        style="width: 100%; height: 100%"
      >
        <v-card
          width="300"
          height="500"
          class="px-2 py-4"
          style="position: relative"
        >
          <ServerFileManager
            style="width: 100%; height: 100%"
            :api-url="apiUrl"
            :api-token="apiToken"
            @new-file="onCreateNewFile"
            @change="onSelectFile"
            @notify="onNotify"
          />
        </v-card>
      </div>
    </v-main>

    <NewFileDialog :visible.sync="newFileDialog" @submit="createNewFile" />
  </v-app>
</template>

<script>
  import ServerFileManager from "@/components/ServerFileManager";
  import NewFileDialog from "./NewFileDialog";

  export default {
    name: "App",

    components: {
      ServerFileManager,
      NewFileDialog,
    },

    data() {
      return {
        apiUrl: "/api/files",
        apiToken: "",

        newFileDialog: false,
      };
    },

    methods: {
      onCreateNewFile(cb) {
        this.newFileCallback = cb;
        this.newFileDialog = true;
      },

      createNewFile(data) {
        if (this.newFileCallback instanceof Function) {
          this.newFileCallback(data);
        }
      },

      onSelectFile(file) {
        console.log("Selected file", file);
      },

      onNotify(options) {
        console.log("Notify", options);
      },
    },
  };
</script>

Server API

Show Files

Returns json data about list of files

• URL

  /api/files

• Method:

  GET

• URL Params

  Optional:

  q=[string] query for search

  parent_id=[pk] get all files, folders belongs to this parent_id

  only_folder=[boolean] only get folder

  exclude=[pk[]] list of file/folder to exclude

  sort_by=[string] field name for sorting, prefix minus (-) for descending

• Success Response:

  • Code: 200

    Content:

    {
      "status": "Success",
      "data": [
        {
          "id": 1,
          "name": "My File 1",
          "is_group": false,
          "parent_id": null,
          "created_at": "2021-05-19T03:37:52.854Z",
          "updated_at": "2021-05-19T03:37:52.854Z"
        }
      ]
    }

• Error Response:

  • Code: 401 UNAUTHORIZED

    Content: { error : "Unauthorized Required" }

  OR

  • Code: 500 INTERNAL SERVER ERROR

    Content: { message : "Something is wrong" }

Create File

Create new file

• URL

  /api/files

• Method:

  POST

• Data Params

  Required:

  name=[string] name of file

  Optional:

  parent_id=[pk] pk of folder this file belongs to is_group=[boolean] is this file folder or file?

• Success Response:

  • Code: 200

    Content:

    {
      "status": "Success",
      "data": 1
    }

• Error Response:

  • Code: 401 UNAUTHORIZED

    Content: { error : "Unauthorized Required" }

  OR

  • Code: 500 INTERNAL SERVER ERROR

    Content: { message : "Something is wrong" }

Show File

Returns json data about file

• URL

  /api/files/:id

• Method:

  GET

• Success Response:

  • Code: 200

    Condition: Target is folder

    Note: Need to return location of folder for breadcrums

    Content:

    {
        "message": "Success",
        "data": {
            "id": 2,
            "user": 1,
            "name": "Other Folder",
            "is_group": true,
            "parent": null,
            "location": [
                {
                    "id": 1,
                    "name": "My Folder",
                    "is_group": true,
                    "parent_id": null
                }
            ]
        }
    }

    OR

    Condition: Target is File

    {
      "message": "Success",
      "data": {
        "id": 3,
        "user": 1,
        "name": "My File",
        "is_group": false,
        "parent": 2
      }
    }

• Error Response:

  • Code: 401 UNAUTHORIZED

    Content: { error : "Unauthorized Required" }

  OR

  • Code: 500 INTERNAL SERVER ERROR

    Content: { message : "Something is wrong" }

Update File

Update file data (name, location, ...)

• URL

  /api/files/:id

• Method:

  PUT

• Data Params

  Optional:

  name=[string] new name of file parent_id=[pk] new folder pk to move this file into

• Success Response:

  • Code: 200

• Error Response:

  • Code: 401 UNAUTHORIZED

    Content: { error : "Unauthorized Required" }

  OR

  • Code: 500 INTERNAL SERVER ERROR

    Content: { message : "Something is wrong" }

Delete File

Delete file

• URL

  /api/files/:id

• Method:

  DELETE

• Success Response:

  • Code: 200

• Error Response:

  • Code: 401 UNAUTHORIZED

    Content: { error : "Unauthorized Required" }

  OR

  • Code: 500 INTERNAL SERVER ERROR

    Content: { message : "Something is wrong" }