Install file manager
Install on server
Debug manual
Changelog
Cloud storage
Amazon S3
Azure Blob
Multiple users
Stock images
API reference
open()
editAndUpload()
edit()
upload()
createImageFormats()
load()
isFlmngrLoaded()
isImgPenLoaded()
isLoaded()
getImageExtensions()
getNoCacheUrl()
selectUrls()
selectFiles()
Samples
Open file manager
Select image with a preview
Manage image gallery
Select multiple files
Browse a folder
Upload files
Upload images with rename hook
Open image editor
Custom image editing

Edit image, then return data

Premium feature

Flmngr.edit

( { params } )

Opens ImgPen image editor for the specified image and allows you to manually handle the moment when the user presses the "Save" button. So you can save it anywhere you want, upload it to a server or not, and also add your custom logic to manage file conflicts.

If you don't have any custom saving logic, you can call Flmngr.upload({params}) to upload an image to the Flmngr server. However, we recommend you using Flmngr.editAndUpload({params}) instead of a combination of Flmngr.edit() and Flmngr.upload() methods, because it is easier.

Specify an URL or Base64 image data in the url parameter and handle the saving process in the onSave() callback when users request to save the edited image.

Parameters

  • ...common parameters

    :
    { any parameters of Flmngr.load() method }

    All parameters that you can pass to the Flmngr.load({params}) method are also available here. So you can override some values (except apiKey) or pass parameters that were missing in the Flmngr.load() call but are required for this method, such as urlFiles and urlFileManager.

  • url

    :
    string

    A URL of an image or Base64 image data that you wish to edit.

    This parameter is fully equivalent to the url parameter of the Flmngr.editAndUpload({params}) method, so please refer to its detailed info to understand all the capabilities and potential issues.

  • onSave

    :
    ( onExport: ( name: string, ext: string, jpegQuality: number, onExported: (image: File) => void, onFail: () => void ) => void, onClose: () => void ) => void

    A callback to handle when the user presses the "Save" button in the Image Editor dialog.

    After performing any desired checks before saving, please call the onExport() method (which retrieves the image data as a File object) passed as an argument. Then handle the result inside the onExported() and onFail() callbacks.

    If your logic detects a failure (or you fall into onFail() callback), you may want to display an error message. Then just return from the onSave callback to allow the user to return to the edit image dialog.

    If your code has successfully exported and saved the image wherever you wanted, close the Image Editor dialog by calling the onClose() method (the 2nd argument of this callback).

  • onCancel

    :
    () => void;

    A callback to handle if the user cancelles editing (and saving) an image and closes the Image Editor dialog.

    As you can see, there is no onFail callback. This is because any errors encountered while saving an image will result in displaying an error dialog and will returning the user to the Image Editor. So the user can only cancel the entire editing process and and proceed to the onCancel callback, or successfully finish the onSave callback.

    Default is null Optional