Getting Started

To start using «File.Shark» media manager it is necessary to do the next things:

• download archive with files (in this archive you will find index.html file with example of launching media manager, File.Shark Media manager - Documentation.pdf file with documentation, js folder with file.shark.js file, source folder with project source code)
• include file.shark.js file to your page
• initialize «File.Shark» media manager (check usage section for more details)
• configure the server to work with media manager

Setup

Include the file.shark.js file into your page. You can find this file in the archive, in the js folder.

<script src="/js/file.shark.js"></script>

Usage

new Fileshark({
    root: document.getElementById('root'),
    host: 'http://localhost:3500',
    endpoints: {
        folder: '/folder',
        file: '/file'
    },
    headers: {
        'Content-Type': 'application/json'
    },
    onInsertFile: function(data) {
        console.log('data:', data);
    }
});

onInsertFile function receives the object with data about current selected file. This object contains the following properties:

File insertion functionality will not be available if onInsertFile callback function is not defined.

Server

«File.Shark» media manager is only an ui solution at current moment, so you will have to write the server part by yourself. Here you can find the list with request formats that our media manager will send to your server and response format that media manager expects to receive in response.

Folders

This functionality allows you to create, edit and delete folders. If you are sure that you do not need this functionality, you can skip this part and then you will have one folder by default.

• POST /yourFolderEndpoint - create a new folder

Request parameters:

Expected response:

    {
        created: "15.10.2018",
        description: "",
        id: "dfd8c3e4-45b3-4278-acba-467b42dae5f9",
        title: "Nature",
        total: "0"
    }
                

• PUT /yourFolderEndpoint - edit folder

Request parameters:

Expected response:

    {
        created: "15.10.2018",
        description: "",
        id: "dfd8c3e4-45b3-4278-acba-467b42dae5f9",
        title: "Nature",
        total: "0"
    }
                

• DELETE /yourFolderEndpoint/idOfDeletedFolder - delete folder

No request parameters.

Expected response:

dfd8c3e4-45b3-4278-acba-467b42dae5f9

Files

This functionality allows you to upload, edit and delete files.

• GET /yourFileEndpoint - get the list of files

Request parameters:

Expected response:

    {
        hasMore: false,
        list: [
            {
                alt: "",
                created: "15.10.2018",
                description: "",
                dimensions: "",
                extension: "zip",
                filename: "favicon_package_v0.16.zip",
                folder: "7f55583d-d42f-4bc3-9853-7f64b93f3c76",
                id: "b713c14b-9fea-49fd-bda7-e4c5e9045a46",
                size: "49.22 KB",
                title: "favicon_package_v0.16.zip",
                url: "http://localhost:3500/assets/images/b713c14b-9fea-49fd-bda7-e4c5e9045a46/file/favicon_package_v0.16.zip"
            }
        ]
    }
                

Each file in the received list should be an object with the following properties:

• POST /yourFileEndpoint - upload file

Request parameters:

Expected response:

    {
        alt: "",
        created: "15.10.2018",
        description: "",
        dimensions: "1200x900",
        extension: "webp",
        filename: "s1.webp",
        folder: "7f55583d-d42f-4bc3-9853-7f64b93f3c76",
        id: "af638588-2e61-4005-915b-f7a6eb22d3b7",
        size: "214.59 KB",
        title: "s1.webp",
        url: "http://localhost:3500/assets/images/af638588-2e61-4005-915b-f7a6eb22d3b7/file/s1.webp"
    }

                

• PUT /yourFileEndpoint - edit file

Request parameters:

Expected response:

    {
        alt: "",
        created: "15.10.2018",
        description: "",
        dimensions: "1200x900",
        extension: "webp",
        filename: "s1.webp",
        folder: "7f55583d-d42f-4bc3-9853-7f64b93f3c76",
        id: "af638588-2e61-4005-915b-f7a6eb22d3b7",
        size: "214.59 KB",
        title: "s1.webp",
        url: "http://localhost:3500/assets/images/af638588-2e61-4005-915b-f7a6eb22d3b7/file/s1.webp"
    }

                

• DELETE /yourFileEndpoint/idOfDeletedFile - delete file

No request parameters.

Expected response:

dfd8c3e4-45b3-4278-acba-467b42dae5f9

Browsers support