Flmngr

https://flmngr.com
Admin
Flmngr is a free PHP/Node file manager with an integrated image editor, supporting cloud storage...
Tokens:84,575
Snippets:934
Trust Score:7.1
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies with npm

Source: https://flmngr.com/doc/install-file-manager-server-microservice

Installs all necessary dependencies for the Flmngr microservice. Ensure Node.js is installed and the version is >= 14.15.0.

```bash
npm i
```

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

### Open Flmngr with Child API Key (React)

Source: https://flmngr.com/doc/parent-and-child-api-keys

This example shows how to integrate Flmngr into a React application using the dedicated React package. Install the @flmngr/flmngr-react package for this.

```javascript
import Flmngr from "@flmngr/flmngr-react";

Flmngr.open({
    apiKey: "child-flmngr-api-key",
    urlFileManager: 'https://child-website.com/flmngr/flmngr.php',
    urlFiles: 'https://child-website.com/files/',
    isMultiple: false,
    onFinish: (files) => {
        console.log("User picked:");
        console.log(files);
    }
});

```

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

### Initialize TinyMCE with Flmngr Plugin

Source: https://flmngr.com/doc/tinymce-file-manager

Configure TinyMCE to use the file-manager plugin and set up the Flmngr API key. The setup function waits for TinyMCE initialization to get the Flmngr API.

```javascript
tinymce.init({
  selector: "#editor",
  plugins: "file-manager,link,image",
  toolbar: "link | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent",
  Flmngr:  {
    apiKey: "FLMN24RR1234123412341234", // default free key
  },
  
  // Let's wait for TinyMCE is initialized...
  setup: (editor) => {
    editor.on('init', (event) => {
      
      // ...and get Flmngr API
      editor.getFlmngr(
        (Flmngr) => {
          
          // In this demo we pass Flmngr API into inner functions and callbacks.
          // You can save it somewhere and reuse without passing as an argument.
          attachOnClickListenerToButton(Flmngr);
        }
      )
      
    });
  }
});
```

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

### Run Flmngr Microservice

Source: https://flmngr.com/doc/install-file-manager-server-microservice

Starts the Flmngr standalone microservice. Ensure you are in the microservice's root directory before running this command.

```bash
npm run start
```

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

### Create ImgPen Instance using `create` Method

Source: https://flmngr.com/api/classes/imgpen.html

This example shows how to create an ImgPen instance using the `create` method, which is equivalent to `new ImgPen(...)`.

```javascript
import {imgPenLib} from "imgpen";

let imgPen = imgPenLib.create({});
```

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

### Basic ImgPen Image Editing

Source: https://flmngr.com/api/classes/imgpen.html

A minimal example demonstrating how to instantiate ImgPen and initiate image editing. The `onSave` callback handles the processed image data.

```javascript
import {ImgPen} from "imgpen";

let imgPen = new ImgPen({});
imgPen.editImage({
    url: "https://example.com/some-image.png",
    onSave: function(file, onFinish) {
         // Do whatever you want with BLOB data stored in "file" variable
         // and then always call "onFinish(true)" if processed image successfully
         // or "onFinish(false)" otherwise.
         onFinish(true);
    }
});
```

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

### Check GD Library Installation via Command Line

Source: https://flmngr.com/doc/enable-php-gd

Use this command to quickly check if the GD library is installed and recognized by PHP on your server.

```bash
php -r "phpinfo();" | grep "GD"
```

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

### Full Flmngr Integration Sample

Source: https://flmngr.com/doc/install-js-snippet

This sample demonstrates how to include the Flmngr script and use the `window.Flmngr.open()` method to launch the file manager dialog for selecting images. Ensure you have installed the backend and configured `urlFileManager` and `urlFiles`.

```html
<script src="https://unpkg.com/flmngr"></script>
<script>
    window.onFlmngrAPILoaded = function() {
        // Now we can use window.Flmngr object
        // In this example we show how to call file manager dialog to select images 
        window.Flmngr.open({
            apiKey: "FLMN24RR1234123412341234",                  // default free key
            urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
            urlFiles: 'https://fm.flmngr.com/files',             // demo file storage

            isMultiple: false,                                   // let selecting a single file
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }

    // You can use window.Flmngr here too, 
    // just check that the script form "unpkg.com" was loaded
    // (check window.Flmngr exists).
</script>
```

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

### Install Flmngr NPM Package

Source: https://flmngr.com/doc/install-file-manager-server-node-express

Install the Flmngr server package for Express apps using npm. This command adds the necessary dependencies to your project.

```bash
npm i @flmngr/flmngr-server-node-express --save
```

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

### Install Flmngr Node Backend NPM Package

Source: https://flmngr.com/doc/install-file-manager-server-node-custom

Install the Flmngr backend library using NPM. This command adds the package to your project's dependencies.

```bash
npm i @flmngr/flmngr-server-node --save
```

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

### Set Routes to Map a URL

Source: https://flmngr.com/doc/install-file-manager-server-php-symfony

Create a controller to handle Flmngr requests and map a URL for file operations. This example manages files in the 'public/files/' directory.

```php
<?php

namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class FlmngrController extends AbstractController
{

    #[Route('/flmngr', name: 'flmngr')]
    public function flmngr(): Response
    {
        \EdSDK\FlmngrServer\FlmngrServer::flmngrRequest(
            array(
                'dirFiles' => $this->getParameter('kernel.project_dir') . '/public/files'
            )
        );

        // As far Flmngr returns a response itself,
        // you must use "die" here to prevent a error.
        die;
    }

}

```

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

### Natural Sorting Example

Source: https://flmngr.com/doc/api-open

Illustrates natural sorting behavior, which handles numerical suffixes correctly.

```text
dir-a
dir-b
dir-c-1
dir-c-2
dir-c-11
```

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

### Check GD Library Installation via PHP Script

Source: https://flmngr.com/doc/enable-php-gd

Create a PHP script to output all PHP information, allowing you to visually check for the GD extension and its status in a web browser.

```php
<?php
    phpinfo();
?>
```

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

### Install React Component with NPM

Source: https://flmngr.com/doc/install-react-component

Use this command to add the File Manager React component to your project dependencies using NPM.

```bash
npm i --save @flmngr/flmngr-react
```

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

### Install @flmngr/flmngr-angular with NPM

Source: https://flmngr.com/doc/install-angular-module

Use this command to add the Angular file manager package to your project via NPM.

```bash
npm i --save @flmngr/flmngr-angular
```

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

### Restart Apache Web Server

Source: https://flmngr.com/doc/enable-php-gd

After installing the GD extension, restart the Apache web server to apply the changes.

```bash
sudo service apache2 restart
```

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

### Install React Component with Yarn

Source: https://flmngr.com/doc/install-react-component

Use this command to add the File Manager React component to your project dependencies using Yarn.

```bash
yarn add @flmngr/flmngr-react
```

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

### Open Flmngr in React Component with User-Specific Paths

Source: https://flmngr.com/doc/multiple-users

Integrate Flmngr into a React application. This example shows how to open the file manager from a button click, using a user-specific path for file storage.

```javascript
import Flmngr from "@flmngr/flmngr-react";
import * as React from "react";

export class MyButton extends React.Component {

    render() {
        return <button 
            onClick={() => {
                let userId = getUserId(); // your function

                Flmngr.open({
                    apiKey: "your-flmngr-api-key",
                    urlFileManager: 'https://example.com/flmngr/flmngr.php',
                    urlFiles: 'https://example.com/files/user-' + userId,   
                    isMultiple: false,                            
                    onFinish: (files) => {
                        console.log("User picked:");
                        console.log(files);
                    }
                });
            }}
        >
            Open file manager
        </button>
    }

}


```

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

### Open File Manager with Image Preview Options

Source: https://flmngr.com/doc/select-image-with-preview

Open the Flmngr dialog and specify the image formats to be created. The `onFinish` callback will receive the original image URL and any requested preview formats.

```javascript
Flmngr.open({
  ...
  createImageFormats: ["preview", "medium", "large"],
  onFinish: (originalImage, formats) => {
    console.log(originalImage);
    console.log(formats);
  }
});
```

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

### Install Specific PHP Version GD Package

Source: https://flmngr.com/doc/enable-php-gd

If you have a specific PHP version installed, adjust the package name to include the version number for a precise installation.

```bash
sudo apt-get install php<your-php-version>-gd
```

```bash
sudo apt-get install php8.2-gd
```

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

### Call Flmngr from your code

Source: https://flmngr.com/doc/install-npm-package

Import the Flmngr namespace and use the `open` method to display the file manager. The `onFinish` callback receives the selected files.

```javascript
import Flmngr from "flmngr";

Flmngr.open({
    apiKey: "FLMN24RR1234123412341234",                  // default free key
    urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
    urlFiles: 'https://fm.flmngr.com/files',             // demo file storage

    isMultiple: false,                                   // let selecting a single file
    onFinish: (files) => {
        console.log("User picked:");
        console.log(files);
    }
});

```

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

### Install Flmngr NPM Package for Nest

Source: https://flmngr.com/doc/install-file-manager-server-node-nest

Install the Flmngr server package for Nest.js applications using npm. This package is compatible with Nest installations based on the Express platform.

```bash
npm i @flmngr/flmngr-server-node-nest-express --save
```

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

### Initialize Flmngr with Dynamic URLs (NPM)

Source: https://flmngr.com/doc/multiple-users

When using NPM, override File Manager and Files URLs dynamically during initialization to support multiple users.

```javascript
import Flmngr from '@flmngr/flmngr';

Flmngr.options({
    urlFileManager: 'https://your-domain.com/flmngr',
    urlFiles: 'https://your-domain.com/files/'
});
```

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

### Install php-gd Package

Source: https://flmngr.com/doc/enable-php-gd

Install the `php-gd` package using the system's package manager. This command is for Ubuntu or Debian-based systems.

```bash
sudo apt-get install php-gd
```

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

### Initialize Flmngr via CDN with User-Specific Paths

Source: https://flmngr.com/doc/multiple-users

Load Flmngr using a CDN and initialize it. This snippet demonstrates how to set user-specific file paths when using the global `window.Flmngr` object.

```javascript
<script src="https://unpkg.com/flmngr"></script>
<script>
    let userId = getUserId(); // your function

    window.onFlmngrAPILoaded = function() {
        // Now we can use window.Flmngr object
        // In this example we show how to call file manager dialog to select images 
        window.Flmngr.open({
            apiKey: "your-flmngr-api-key",
            urlFileManager: 'https://example.com/flmngr/flmngr.php',
            urlFiles: 'https://example.com/files/user-' + userId,
            isMultiple: false,                                   
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
</script>


```

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

### Select and Upload Files

Source: https://flmngr.com/doc/upload-files

Use Flmngr.selectFiles to allow users to pick files, then Flmngr.upload to send them to the server. Configure accepted file types, multiple file selection, upload directory, and conflict resolution mode.

```javascript
function uploadFiles() {
  Flmngr.selectFiles({
    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
    isMultiple: true,
    onFinish: (files) => {
      
      Flmngr.upload({
        filesOrLinks: files,
        dirUploads: "/",
        mode: "ASK",
        onFinish: (uploadedFiles) => {
          showUploadedImages(uploadedFiles);
        }
      });
      
    }
  });
  
}
```

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

### Install Flmngr Module using Composer

Source: https://flmngr.com/doc/install-drupal9-module

Use this Composer command to add the Flmngr module to your Drupal 9 project. Ensure Composer is installed before running.

```bash
composer require drupal/flmngr
```

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

### Install CKEditor 5 File Manager Plugin

Source: https://flmngr.com/doc/install-ckeditor-5-file-manager-plugin

Install the File Manager plugin for CKEditor 5 using npm. This command should be run from your CKEditor 5 project directory.

```bash
npm install --save-dev @edsdk/flmngr-ckeditor5
```

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

### Flmngr.load() Parameters

Source: https://flmngr.com/doc/api-open

This section details the parameters that can be passed to the Flmngr.load() method to configure the file manager. These parameters allow for preselecting files, setting the initial directory, defining accepted file extensions, mounting as a panel, controlling multi-file selection, customizing the title, window state, button visibility, file reordering, image format generation, directory expansion levels, and directory sorting.

```APIDOC
## Flmngr.load() Parameters

### Common Parameters

All parameters available for `Flmngr.load({params})` are applicable here. You can override existing values (except `apiKey`) or provide parameters required by this method that might be missing in the `Flmngr.load()` call, such as `urlFiles` and `urlFileManager`.

### `list`

*   **Type**: `string[] | null`
*   **Description**: An URL or a list of URLs to be preselected when the file manager opens. If omitted or `null`, no file will be selected by default. This parameter is useful for allowing users to edit their previous file selection. Each URL must start with `urlFiles` and exist in your storage. Not applicable when `isMultiple` is `null`. Optional, defaults to `null`.

### `dir`

*   **Type**: `string`
*   **Description**: Specifies the directory to open when the dialog is shown. Overrides the default behavior of opening the root directory or the directory containing preselected files. The value should be a relative path, e.g., `my-folder/sub-folder` for `/files/my-folder/sub-folder`.

### `acceptExtensions`

*   **Type**: `string[] | null`
*   **Description**: A list of file extensions to accept, filtering out all others from the file view. For example, `["png", "jpg", "jpeg", "webp"]` for images or `["pdf"]` for PDFs. Not applicable when `isMultiple` is `null`. Optional, defaults to `null` (any extension accepted).

### `el`

*   **Type**: `HTMLElement | null`
*   **Description**: If provided, the file manager mounts as a panel component instead of showing a dialog. Prefer using the `mount()` method directly. Optional, defaults to `null`.

### `isMultiple`

*   **Type**: `boolean | null` (Premium feature)
*   **Description**: Determines if multiple files can be selected. Defaults to `false` (single file selection). If `mount()` is called, this defaults to `null`. 
    *   `false`: Allows selection of a single file.
    *   `true`: Allows selection of multiple files.
    *   `null`: Manages files without selection capability.

### `title`

*   **Type**: `string` (Premium feature)
*   **Description**: Sets the caption for the dialog title. Optional, defaults to `Flmngr file manager`.

### `isMaximized`

*   **Type**: `boolean`
*   **Description**: Controls the initial state of the dialog: maximized or a standard dialog. Optional, defaults to `false` (dialog).

### `showMaximizeButton`

*   **Type**: `boolean`
*   **Description**: Shows or hides the maximize/minimize button. Optional, defaults to `true`.

### `showCloseButton`

*   **Type**: `boolean`
*   **Description**: Shows or hides the close button, disabling the dialog's cancel feature if set to `false`. Optional, defaults to `true`.

### `allowReorder`

*   **Type**: `boolean`
*   **Description**: Enables or disables reordering of selected files when `isMultiple` is `true`. Optional, defaults to `true`.

### `createImageFormats`

*   **Type**: `string[]`
*   **Description**: A list of image format IDs (e.g., `["preview", "medium"]`) to generate previews for. The `onFinish` listener will automatically receive URLs for these previews. Optional, defaults to `null` (original images only).

### `expandLevels`

*   **Type**: `number` (Premium feature)
*   **Description**: Specifies how many directory levels to expand on startup. Defaults to `99`. 
    *   `1`: Expands only immediate child folders.
    *   `2`: Expands immediate child folders and their subfolders.

### `sortDirs`

*   **Type**: `string` (Premium feature)
*   **Description**: Determines the sorting order for directories in the tree. Optional, defaults to `none`.
    *   `none`: No specific sorting; order depends on the server response.
    *   `alphabetical`: Sorts directories alphabetically (e.g., `dir-a`, `dir-b`, `dir-c-1`, `dir-c-11`, `dir-c-2`).
```

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

### Basic CSS Styling for CKEditor 4 Inline Example

Source: https://flmngr.com/samples/ckeditor4-inline-mode-file-manager

Apply basic CSS styling to the CKEditor 4 inline mode example, including background color, layout, and specific styles for the editor area. This ensures a visually appealing presentation.

```css
body {
  background-color: #F4F4F4;
}

.root {
  max-width: 900px;
  margin: 20px auto;
}

h2 {
  font-weight: bold;
}

#editor {
  outline: 2px #CCC dotted;
  background-color: white;
  padding: 16px;
}
```

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

### Flmngr Constructor Initialization

Source: https://flmngr.com/api/classes/flmngr.html

Instantiate the Flmngr client with essential server URLs. Configure optional parameters like default upload directory, custom image formats, image editor settings, and upload thread limits.

```javascript
const flmngr = new Flmngr({
  urlFileManager: "https://example.com/flmngr",
  urlFiles: "https://example.com/files/",
  defaultUploadDir: "/users/avatar",
  imageFormats: [
    {
      name: "preview",
      width: 100,
      height: 100,
      quality: 80,
      crop: "crop",
      rotate: 0
    }
  ],
  uploadThreads: 10
});
```

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

### Optimized Flmngr Initialization with Preloading

Source: https://flmngr.com/doc/install-npm-package

Preload Flmngr components and configurations asynchronously from the CDN for a smoother user experience. Subsequent calls to Flmngr methods should omit parameters already provided in `load`.

```javascript
import Flmngr from "flmngr";

// Starts async loading Flmngr code from CDN (this is non-blocking action)
Flmngr.load({
    apiKey: "FLMN24RR1234123412341234",                  // default free key
    urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
    urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
});

// Somewhere when you need to open Flmngr
Flmngr.open({
    // Do not specify parameters already passed into Flmngr.load(...) before.
    // The same for other methods like Flmngr.upload(...), Flmngr.edit(...), etc.
    isMultiple: false, // let selecting a single file
    onFinish: (files) => {
        console.log("User picked:");
        console.log(files);
    }
});

```

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

### Get URL without cache

Source: https://flmngr.com/doc/api

Constructs a unique URL by appending `?no-cache=timestamp` to prevent caching.

```APIDOC
## Flmngr.getNoCacheUrl

### Description
Constructs a unique URL to prevent caching. Adds `?no-cache=timestamp` URL argument to a specified URL.

### Method Signature
Flmngr.getNoCacheUrl( url: string ): string
```

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

### Get supported image extensions

Source: https://flmngr.com/doc/api

Retrieves a list of all image file extensions supported by Flmngr.

```APIDOC
## Flmngr.getImageExtensions

### Description
Get all supported image extensions.

### Method Signature
Flmngr.getImageExtensions(): string[]
```

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

### Unpack File Manager Plugin

Source: https://flmngr.com/doc/install-tinymce-plugin

Unpack the downloaded plugin archive into the `plugins/` directory of your TinyMCE installation.

```text
tinymce/
  plugins/
     file-manager/
        plugin.js
        plugin.min.js
```

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

### Initialize Flmngr and Attach Upload Listener

Source: https://flmngr.com/doc/upload-files

Load the Flmngr API and attach a click listener to a button to initiate the file upload process. Ensure the Flmngr API is loaded before attaching the listener.

```javascript
import {Flmngr} from "flmngr";

Flmngr.load({
  apiKey: "FLMN24RR1234123412341234",
  urlFileManager: 'https://fm.flmngr.com/fileManager',
  urlFiles: 'https://fm.flmngr.com/files'
}, {
  onFlmngrLoaded: () => {
    attachOnClickListenerToButton();
  }
});

function attachOnClickListenerToButton() {
  
  let elBtn = document.getElementById("btn");
  
  // Style button as ready to be pressed
  elBtn.style.opacity = 1;
  elBtn.style.cursor = "pointer";
  let elLoading = document.getElementById("loading");
  elLoading.parentElement.removeChild(elLoading);
  
  // Add a listener for uploading files
  elBtn.addEventListener("click", () => {
    uploadFiles();
  });
}
```

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

### Mount Flmngr Component with Image Preview Configuration

Source: https://flmngr.com/samples/component-manager-image-gallery

Mounts the Flmngr component, enabling multiple image selection and configuring automatic generation of preview images. The `onFinish` callback processes selected files, extracting URLs and preview URLs to render them.

```javascript
import {Flmngr} from "flmngr";

Flmngr.mount(
  document.getElementById("file-manager"),
  {
    apiKey: "FLMN24RR1234123412341234",
    urlFileManager: "https://fm.flmngr.com/fileManager",
    urlFiles: "https://fm.flmngr.com/files",
    isMultiple: true,
    acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
  
    // Optional part for auto creation of previews for each selected image
    createImageFormats: ["preview"],
    imageFormats: [
      {
        id: "preview",
        title: "Preview",
        suffix: "-preview",
        maxWidth: 250,
        maxHeight: 250
      }
    ],

    onFinish: (
      files: {
        url: string,
        formats: {
          format: string,
          url: string
        }[]
      }[]
    ) => {
      
      let elFileManager = document.getElementById("file-manager");
      elFileManager.parentElement.removeChild(elFileManager);
      renderImages(
        files.map(file => {
          return {
            url: file.url,
            urlPreview: file.formats.find(formatItem => formatItem.format === "preview").url
          };
        })
      );
    }

  }
);
```

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

### Install Composer Package

Source: https://flmngr.com/doc/install-file-manager-server-php-laravel

Use Composer to add the Flmngr server-side PHP package to your Laravel project.

```bash
composer require edsdk/flmngr-server-php
```

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

### Initialize Flmngr and Attach Click Listener

Source: https://flmngr.com/doc/select-image-with-preview

Initializes Flmngr with custom image formats and attaches a click listener to a button to trigger the file selection process. The preview format is defined here.

```javascript
import {Flmngr} from "flmngr";

// This demo uses a script for animating showing full-screen image when user clicks on a preview (a-la LightBox)
import {Luminous} from "https://cdn.skypack.dev/luminous-lightbox@2.4.0";

Flmngr.load({
  apiKey: "FLMN24RR1234123412341234",
  urlFileManager: 'https://fm.flmngr.com/fileManager',
  urlFiles: 'https://fm.flmngr.com/files',
  imageFormats: [
     {
        id: "preview",
        title: "Preview",
        suffix: "-preview",
        maxWidth: 250,
        maxHeight: 250
     }
  ]
}, {
  onFlmngrLoaded: () => {
    attachOnClickListenerToButton();
  }
});

function attachOnClickListenerToButton() {
  let elBtn = document.getElementById("btn");
  
    // Style button as ready to be pressed
    elBtn.style.opacity = 1;
    elBtn.style.cursor = "pointer";
    let elLoading = document.getElementById("loading");
    elLoading.parentElement.removeChild(elLoading);

    // Add a listener for selecting files
    elBtn.addEventListener("click", () => {
      selectFiles();
    });
}
```

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

### Unpack File Manager Plugin

Source: https://flmngr.com/doc/install-ckeditor-plugin

Unpack the downloaded file manager plugin into the `plugins/` directory of your CKEditor installation.

```bash
ckeditor/
  plugins/
     file-manager/
        plugin.js
```

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

### Open Flmngr Dialog with Image Preview Formats

Source: https://flmngr.com/samples/select-image-with-preview

Open the Flmngr dialog and specify `createImageFormats` to enable the generation of predefined image previews. The `onFinish` callback will include these formats if created.

```javascript
Flmngr.open({
  ...
  createImageFormats: ["preview", "medium"],
  onFinish: ({
    original, // original image URL
    preview,  // preview image URL
    medium    // medium image URL
  }) => {
    console.log(original, preview, medium);
  },
  ...
});
```

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

### Install @flmngr/flmngr-angular with Yarn

Source: https://flmngr.com/doc/install-angular-module

Use this command to add the Angular file manager package to your project via Yarn.

```bash
yarn add @flmngr/flmngr-angular
```

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

### ImgPen Constructor

Source: https://flmngr.com/api/classes/imgpen.html

Creates a new instance of the ImgPen image editor. This is typically done once to preconfigure the editor. You can then use the instance to call methods like `editImage` without re-passing configuration.

```APIDOC
## constructor

### Description
Creates a new instance of the ImgPen image editor. Do this action once to preconfigure ImgPen, then you can call ImgPen.editImage method on the instance without passing these parameters every time.

### Signature
`new ImgPen(params: { colors?: string[]; cropRatios?: { h: number; w: number }[]; defaultText?: string; fonts?: { family: string; url: string }[]; forcePng?: boolean; isCustomCropEnabled?: boolean; jpegQuality?: number; removeDefaultColors?: boolean; removeDefaultCropRatios?: boolean; removeDefaultFonts?: boolean; removeDefaultShapes?: boolean; removeDefaultStickers?: boolean; shapes?: { freeScaling: boolean; path: string; title: string }[]; stickers?: string[]; tools?: string[]; urlBase: string }): ImgPen`

### Parameters
* **params** (object) - Configuration object for the ImgPen instance.
  * **colors** (string[]) - Optional. An array of color strings.
  * **cropRatios** ({ h: number; w: number }[]) - Optional. An array of crop ratio objects, each with `h` (height) and `w` (width).
  * **defaultText** (string) - Optional. Default text string.
  * **fonts** ({ family: string; url: string }[]) - Optional. An array of font objects, each with `family` and `url`.
  * **forcePng** (boolean) - Optional. If true, forces output to PNG format.
  * **isCustomCropEnabled** (boolean) - Optional. If true, enables custom cropping.
  * **jpegQuality** (number) - Optional. JPEG compression quality (0-100).
  * **removeDefaultColors** (boolean) - Optional. If true, removes default colors.
  * **removeDefaultCropRatios** (boolean) - Optional. If true, removes default crop ratios.
  * **removeDefaultFonts** (boolean) - Optional. If true, removes default fonts.
  * **removeDefaultShapes** (boolean) - Optional. If true, removes default shapes.
  * **removeDefaultStickers** (boolean) - Optional. If true, removes default stickers.
  * **shapes** ({ freeScaling: boolean; path: string; title: string }[]) - Optional. An array of shape objects.
  * **stickers** (string[]) - Optional. An array of sticker URLs or identifiers.
  * **tools** (string[]) - Optional. An array of tool identifiers to enable.
  * **urlBase** (string) - Required. Base URL for ImgPen resources.

### Example
```javascript
import {ImgPen} from "imgpen";

let imgPen = new ImgPen({
    urlBase: "https://cdn.example.com/imgpen/",
    tools: ["crop", "resize", "text"]
});
```
```

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

### Manually Download Flmngr and Dependency

Source: https://flmngr.com/doc/install-drupal8-module

Download the Flmngr module and its required 'n1ed' dependency module manually if not using Composer.

```text
flmngr-8.x-2.15.tar.gz
n1ed-8.x-2.80.tar.gz
```

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

### Restart Nginx Web Server

Source: https://flmngr.com/doc/enable-php-gd

After installing the GD extension, restart the Nginx web server to apply the changes.

```bash
sudo service nginx restart
```

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

### Open Flmngr with Child API Key (Script Tag)

Source: https://flmngr.com/doc/parent-and-child-api-keys

Integrate Flmngr directly into your HTML using a script tag. This method requires the `flmngr` script to be loaded and the `onFlmngrAPILoaded` callback to be defined.

```html
<script src="https://unpkg.com/flmngr"></script>
<script>
    window.onFlmngrAPILoaded = function() {
        window.Flmngr.open({
            apiKey: "child-flmngr-api-key",
            urlFileManager: 'https://child-website.com/flmngr/flmngr.php',
            urlFiles: 'https://child-website.com/files/',
            isMultiple: false,
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
</script>

```

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

### Configure Image Formats for Previews

Source: https://flmngr.com/doc/select-image-with-preview

Define custom image formats with specific resolutions for previews. This configuration is passed to `Flmngr.load` or `Flmngr.open` to enable preview generation.

```javascript
Flmngr.load({
  ...
  imageFormats: [
    { name: "preview", maxWidth: 100, maxHeight: 100 },
    { name: "medium", maxWidth: 300, maxHeight: 300 },
    { name: "large", maxWidth: 800, maxHeight: 800 }
  ]
});
```

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

### Install Vue File Manager with Yarn

Source: https://flmngr.com/doc/install-vue-component

Use this command to add the Vue file manager package to your project using Yarn.

```bash
yarn add @flmngr/flmngr-vue
```

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

### Install Vue File Manager with NPM

Source: https://flmngr.com/doc/install-vue-component

Use this command to add the Vue file manager package to your project using NPM.

```bash
npm i --save @flmngr/flmngr-vue
```

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

### Flmngr Constructor

Source: https://flmngr.com/api/classes/flmngr.html

Initializes a new instance of the Flmngr client, preconfiguring it for server interactions. This instance is then used to call various Flmngr API methods.

```APIDOC
## new Flmngr(params)

### Description
Creates new instance of Flmngr client. This action usually made just once to preconfigure Flmngr and do not pass all the options into Flmngr methods. Save returned object and use it as Flmngr API.

### Parameters
#### params: { defaultUploadDir?: string; imageFormats?: FlmngrImageFormat[]; imgPen?: any; uploadThreads?: number; urlFileManager: string; urlFiles: string }
  * ##### Optional defaultUploadDir?: string
    The directory where to place all quick uploads. Relative to the location of URL specified in `urlFiles`. This directory inside your storage will be used when you call some method without defining a directory where to save files.
  * ##### Optional imageFormats?: FlmngrImageFormat[]
    The list of custom image formats and proportions you need to resize images too. For example you plan to request images with generated previews by using the method pickFiles - you need to define preview format here just once. This will also affect for filtering images of these formats inside the file manager browser window.
  * ##### Optional imgPen?: any
    If you wish to use pass some specific settings into ImgPen image editor, use this field to create and pass whole image editor instance as value like: `new ImgPen({ cropRatios: [{w: 4, h: 3}, {w: 3, h: 2}] })`
  * ##### Optional uploadThreads?: number
    Maximum thread number for uploading files. Only this number of connections Flmngr will open at once interacting with the backend. Default: `5`
  * ##### urlFileManager: string
    URL on your server which will serve all requests from Flmgnr. This is the URL you bound Flmngr backend to.
  * ##### urlFiles: string
    Prefix to your files directory in URL notation. For example: `https://example.com/images/`

### Returns
* Flmngr - The initialized Flmngr client instance.
```
Tokens:
Raw