Files.js 1.1 - Asset Manager + AI Media Generator

Note: If you have Source Code package (Super license), please refer to:

    readme-sourcecode.txt

    for additional information.

Please see: whatsnew.txt for updates.


Getting Started:

You can choose to run the HTML/JavaScript project or PHP examples:

A. To try the HTML/Javascript project:

    1. Open terminal, go to the project directory and install the required server dependencies.
       The example is using Node.js server.

        > cd files

        > npm install

            Note: To run this command, you need to have NPM installed.
            Download & install NPM from https://nodejs.org/en/download/.

    2. Configure:

        1. Obtain the API key from OpenAI or OpenRouter
            
            https://openai.com

            or

            https://openrouter.ai 

            Use OpenRouter if you want to use various models.

        2. Update the .env file with your API key.

            OPENAI_API_KEY=YOUR_API_KEY

            or

            OPENROUTER_API_KEY=YOUR_API_KEY

        3. To use the AI media generation:

            There are 2 options: 
        
            - New Version (Recommended):
        
                Obtain the API key from Fal.ai:

                    https://fal.ai 
                    
                Update the .env file with your API key.

                    FAL_API_KEY=YOUR_API_KEY

            - Legacy Version:

                Obtain the API key from Getimg:
                
                    https://getimg.ai/tools/api 

                Update the .env file with your API key.

                    GETIMG_API_KEY=YOUR_API_KEY  

    3. Run the server:

        > node server.js

        If you're using AWS S3 storage:

        > node server-aws.js 

        (Configure your AWS S3 settings in .env file)

    4. Open another terminal, go to the project directory and run the project:

        > npm run dev

        A browser window will be opened with the example running:

        http://localhost:8085/

        Other examples:

        http://localhost:8085/example.html (standalone example)

        or

        http://localhost:8085/example-filepicker.html (file picker example)

    Note:
        The code for this project is:
            
            src/index.js

        The project is using Node.js server:

            server.js

B. To try the PHP Example: 

    Configure the api/config.php file with your API keys:

        $OPENAI_API_KEY = 'YOUR_API_KEY';
        $OPENROUTER_API_KEY = 'YOUR_API_KEY';
        $GETIMG_API_KEY = 'YOUR_API_KEY';
        $FAL_API_KEY = 'YOUR_API_KEY';

    Open from your browser:

        http://localhost/.../public/example.php

        If you're using AWS S3 storage:

        http://localhost/.../public/index-s3.php 
        
        (Configure your AWS S3 settings in .env file)
        
 
    If you're using Visual Studio Code, you can use the PHP Server extension.
    

--------------

Usage:

1. Include the script and CSS:

    <link href="filemanager/files.css" rel="stylesheet">
    <script src="filemanager/files.min.js"></script>

    Or import from NPM:

    import Files from '@innovastudio/filemanager';
    import '@innovastudio/filemanager/public/filemanager/files.css';

2. Initiate:

    const elm = document.querySelector('.files');

    const obj = new Files(elm, {

        // endpoints
        listFilesUrl: '/listfiles',
        listFoldersUrl: '/listfolders',
        deleteFilesUrl: '/deletefiles',
        moveFilesUrl: '/movefiles',
        createFolderUrl: '/createfolder',
        uploadFilesUrl: '/uploadfiles',
        renameFileUrl: '/renamefile',
        getMmodelsUrl: '/getmodels',
        saveTextUrl: '/savetext',

        //===================================================
        mediaGenerationMode: 'custom', // 'getimg' (legacy version), 'custom' (new version)

        //====== Option 1: Image Generation (Provider: getimg.ai) =======
        textToImageUrl: '/texttoimage',
        upscaleImageUrl: '/upscaleimage',
        controlNetUrl: '/controlnet',

        //====== Option 2: Media Generation (Provider: Fal.ai) =======
        sendCommandUrl: '/sendcommand', // or '/openrouter' if using OpenRouter (https://openrouter.ai/)
        // Upload Endpoints (3 options): Local Server, Fal Storage, or S3 Storage
        uploadMediaUrl_Fal: '/uploadfile-fal',
        uploadBase64Url_Fal: '/uploadbase64-fal',
        // Fal Integration Endpoints:
        generateMediaUrl_Fal: '/request-fal', // request generation
        checkRequestStatusUrl_Fal: '/status-fal', // check generation status
        getResultUrl_Fal: '/result-fal', // receive result
        // Optimization & Cleanup Endpoints:
        minimizeImageUrl: '/minimizer', // minimize image file size
        cleanup: '/cleanup', // cleanup input files
        // Utility
        viewFileUrl: '/viewfile', // image viewing

        assetsFolder: '/formfiles/',
        templatesUrl: '/templates.json', 
        templateFilters: ['all', 'image', 'video', 'audio'],
        templatesConfig: {
            fal: true
        },
        //===================================================

        // Other options:
        folderTree: true, // To show folder tree (folder navigation on the side panel)
        /*
        filePicker: true, // Used as a file picker.
        filesOnly: true, // To show only the file manager (hiding the AI image generation panel).
        refreshButton: true,
        onSelect: (url)=>{ },
        allowedFileTypes: [
            'image/jpeg',
            'image/png',
            'image/gif',
            'image/webp',
            'image/bmp',
            'image/tiff',
            'image/svg+xml',
            'image/vnd.adobe.photoshop',
            'video/mp4',
            'video/quicktime',
            'audio/mpeg',
            'application/json',
            'application/font',
            'application/pdf',
            'application/zip',
            'application/x-rar-compressed',
            'application/msword',
            'application/rtf',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
            'text/csv',
            'text/markdown',
            'text/plain',
            'text/css',
            'text/javascript',
            'text/html',
        ],
        showRelativeTime: true,
        locale: 'default',
        dateShortOptions: { // Used in file list
            year: 'numeric',
            month: 'short',
            day: 'numeric',
        },
        dateLongOptions: { // Used in file info
            weekday: 'short',
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: 'numeric',
            minute: 'numeric',
        },
        */

    });


--------------

Using with ContentBuilder/ContentBox

1. Copy the following file & folder into ContentBulder/ContentBox public folder:

    - public/api/ (if using PHP)
    - public/filemanager/
    - public/formfiles/
    - public/templates.json
    - public/files_v2.html (new version)
    - public/files_v2.php (if using PHP)
    - public/files.html (legacy version)

2. Modify your ContentBuilder/ContentBox initialization:

    - New version (recommended): 

        const builder = new ContentBuilder({

            // New Asset Manager
            imageSelect: 'files_v2.html',
            videoSelect: 'files_v2.html',
            audioSelect: 'files_v2.html',
            fileSelect: 'files_v2.html',
            mediaSelect: 'files_v2.html',

        });

        To configure, modify settings in files_v2.html.

    - Legacy version:

        const builder = new ContentBuilder({

            // New Asset Manager
            imageSelect: 'files.html',
            videoSelect: 'files.html',
            audioSelect: 'files.html',
            fileSelect: 'files.html',
            mediaSelect: 'files.html',
            
            // endpoints
            listFilesUrl: '/listfiles',
            listFoldersUrl: '/listfolders',
            deleteFilesUrl: '/deletefiles',
            moveFilesUrl: '/movefiles',
            createFolderUrl: '/createfolder',
            uploadFilesUrl: '/uploadfiles',
            renameFileUrl: '/renamefile',
            getMmodelsUrl: '/getmodels',
            textToImageUrl: '/texttoimage', // Enabling AI image generation
            upscaleImageUrl: '/upscaleimage', // Enabling AI image generation
            controlNetUrl: '/controlnet',
            saveTextUrl: '/savetext',

            /*
            // PHP endpoints:
            listFilesUrl: 'api/listfiles.php',
            listFoldersUrl: 'api/listfolders.php',
            deleteFilesUrl: 'api/delete.php',
            moveFilesUrl: 'api/move.php',
            createFolderUrl: 'api/createfolder.php',
            uploadFilesUrl: 'api/upload.php',
            renameFileUrl: 'api/rename.php',
            getMmodelsUrl: 'api/getmodels.php',
            textToImageUrl: 'api/texttoimage.php',
            upscaleImageUrl: 'api/upscaleimage.php',
            controlNetUrl: 'api/controlnet.php',
            saveTextUrl: 'api/savetext.php',

            // PHP endpoints for S3 Storage: (Please refer to the 'Using with PHP endpoints for S3 storage' section for configuration)
            listFilesUrl: 'api/listfiles-s3.php',
            deleteFilesUrl: 'api/delete-s3.php',
            moveFilesUrl: 'api/move-s3.php',
            createFolderUrl: 'api/createfolder-s3.php',
            uploadFilesUrl: 'api/upload-s3.php',
            renameFileUrl: 'api/rename-s3.php',
            textToImageUrl: 'api/texttoimage-s3.php',
            upscaleImageUrl: 'api/upscaleimage-s3.php',
            controlNetUrl: 'api/controlnet-s3.php',
            saveTextUrl: 'api/savetext-s3.php',
            viewUrl: 'api/view-s3.php', // Used if using S3 (for secure bucket)
            viewFileUrl: 'api/viewfile.php', // Used if using S3 (for public bucket)
            */

            // Other options:
            assetFolderTree: true, 
            /*
            assetPanelReverse: false,
            assetFilesOnly: false,
            assetRefreshButton: false,
            assetAllowedFileTypes: [
                'image/jpeg',
                'image/png',
                'image/gif',
                'image/webp',
                'image/bmp',
                'image/tiff',
                'image/svg+xml',
                'image/vnd.adobe.photoshop',
                'video/mp4',
                'video/quicktime',
                'audio/mpeg',
                'application/json',
                'application/font',
                'application/pdf',
                'application/zip',
                'application/x-rar-compressed',
                'application/msword',
                'application/rtf',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'application/vnd.openxmlformats-officedocument.presentationml.presentation',
                'text/csv',
                'text/markdown',
                'text/plain',
                'text/css',
                'text/javascript',
                'text/html',
            ],
            assetShowRelativeTime: true,
            assetLocale: 'default',
            assetDateShortOptions: { // Used in file list
                year: 'numeric',
                month: 'short',
                day: 'numeric',
            },
            assetDateLongOptions: { // Used in file info
                weekday: 'short',
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: 'numeric',
                minute: 'numeric',
            },
            */


            assetPanelFullScreen: true, 
            /*
            // Or specify custom size:

            imageSelectWidth: '88vw',
            imageSelectHeight: '88vh',
            fileSelectWidth: '88vw',
            fileSelectHeight: '88vh',
            videoSelectWidth: '88vw',
            videoSelectHeight: '88vh',
            audioSelectWidth: '88vw',
            audioSelectHeight: '88vh',
            mediaSelectWidth: '88vw',
            mediaSelectHeight: '88vh',

            imageSelectMaxWidth: '1600px',
            fileSelectMaxWidth: '1600px',
            videoSelectMaxWidth: '1600px',
            audioSelectMaxWidth: '1600px',
            mediaSelectMaxWidth: '1600px',
            */

            ...
        });


--------------

Important:

Please add your own security to your API endponts!

_____________________________________________
SUPPORT:

Email us at: support@innovastudio.com