angular-filemanager

File manager developed with AngularJS and Bootstrap by Jonas Sciangula Street

Try the DEMO (only listing and file editor)

---

Mobile support

Features

• Multilanguage (English / Spanish / Portuguese)
• Multiple templates (List / Icons)
• Multiple file upload
• Search files
• Directory tree navigation
• Copy, Move, Rename (Interactive UX)
• Delete, Edit, Preview, Download
• File permissions (Unix chmod style)

TODO

• Multiple file selector (nice to have)
• Backend controllers (PHP, Python, NodeJS, .Net, etc)

---

Backend API

Listing

URL: $config.listUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "list",
    "onlyFolders": false,
    "path": "/public_html"
}}

JSON Response

{ "result": [ 
    {
        "name": "joomla",
        "rights": "drwxr-xr-x",
        "size": "4096",
        "date": "2015-04-29 09:04:24",
        "type": "dir"
    }, {
        "name": "magento",
        "rights": "drwxr-xr-x",
        "size": "4096",
        "date": "17:42",
        "type": "dir"
    }, {
        "name": ".htaccess",
        "rights": "-rw-r--r--",
        "size": "0",
        "date": "2014-01-03 10:12:09",
        "type": "file"
    }, {
        "name": "index.php",
        "rights": "-rw-r--r--",
        "size": "0",
        "date": "2013-11-01 11:44:13",
        "type": "file"
    }
]}

---

Rename / Move

URL: $config.renameUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "rename",
    "path": "/public_html/index.php",
    "newPath": "/public_html/index2.php"
}}

JSON Response

{ "result": {
    "success": true,
    "error": null
}}

---

Copy

URL: $config.copyUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "copy",
    "path": "/public_html/index.php",
    "newPath": "/public_html/index-copy.php"
}}

JSON Response

{ "result": {
    "success": true,
    "error": null
}}

---

Remove

URL: $config.removeUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "delete",
    "path": "/public_html/index.php",
}}

JSON Response

{ "result": {
    "success": true,
    "error": null
}}

---

Edit file

URL: $config.editUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "savefile",
    "content": "<?php echo random(); ?>",
    "path": "/public_html/index.php",
}}

JSON Response

{ "result": {
    "success": true,
    "error": null
}}

---

Get content of a file

URL: $config.getContentUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "editfile",
    "path": "/public_html/index.php"
}}

JSON Response

{
    "result": "<?php echo random(); ?>",
}

---

Create folder

URL: $config.createFolderUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "addfolder",
    "name": "new-folder",
    "path": "/public_html"
}}

JSON Response

{ "result": {
    "success": true,
    "error": null
}}

---

Set permissions

URL: $config.permissionsUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "changepermissions",
    "path": "/public_html/index.php",
    "perms": "653",
    "permsCode": "rw-r-x-wx",
    "recursive": false
}}

JSON Response

{ "result": {
    "success": true,
    "error": null
}}

---

Compress file

URL: $config.compressUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "compress",
    "path": "/public_html/compressed.zip",
    "destination": "/public_html/backups"
}}

JSON Response

{ "result": {
    "success": true,
    "error": null
}}

---

Extract file

URL: $config.extractUrl, Method: POST

JSON Request content

{ "params": {
    "mode": "extract",
    "destination": "/public_html/extracted-files",
    "path": "/public_html/compressed.zip",
    "sourceFile": "/public_html/compressed.zip"
}}

JSON Response

{ "result": {
    "success": true,
    "error": null
}}

---

Upload file

URL: $config.uploadUrl, Method: POST, Content-Type: multipart/form-data
Unlimited file upload, each item will be enumerated as file-1, file-2, etc.

Http post params

[$config.uploadUrl]?destination=/public_html/image.jpg&file-1={..}&file-2={...}

JSON Response

{ "result": {
    "success": true,
    "error": null
}}

---

Download / Preview file

URL: $config.downloadFileUrl, Method: GET

Http query params

[$config.downloadFileUrl]?mode=download&preview=true&path=/public_html/image.jpg

Response

-File content

---

Errors / Exceptions

Any backend error should be with an error 500 HTTP code. Btw, you can also report errors with a 200 response using this json structure

{ "result": {
    "success": false,
    "error": "Access denied to remove file"
}}