Edit image, then upload to server


( { params } )

Opens the ImgPen image editor for the specified image and uploads the saved image to your server using the File Manager backend.

This method combines two other methods from this API: Flmngr.edit({params}) and Flmngr.upload({params}).

Specify a URL or Base64 image data in the url parameter and receive a new URL of the uploaded image in the onSave() callback after the user saves the image.


  • ...common parameters

    { any parameters of Flmngr.load() method }

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

  • url


    An URL of an image you wish to edit and save.

    You can specify an image from your storage in Flmngr, an external URL (outside of the Flmngr storage specified in urlFiles), or Base64 image data.

    If you specify an external URL or Base64 image data, you should also provide the dirUploads directory (if not specified, defaultUploadDir will be used).

    When using Base64 image data, please also provide a filename for the default filename. For external images, it will be the part of the URL between the last / symbol and the ? symbol or the end of the URL.

    Note: If the domain of the page where the user edits an image is not the same as the domain where the image to be edited is located (including cases where subdomains are considered different domains), you must configure the CORS header on the HTTP server (such as NGinx, Apache, etc.) hosting the image. This configuration allows access from the domain from which you load the Image Editor. Failing to do so will result in the Image Editor displaying a blank image!

  • dirUploads


    This parameter sets the directory into which you wish to upload.

    It is used for external URLs and Base64 images only. It will not be used for images located inside Flmngr storage because their directory is already defined. In such cases, the Image Editor will prompt to either overwrite or rename the image upon saving.

    The path of this directory is relative to urlFiles (or dirFiles option on the server).

    If you set it before, it will override the value defaultUploadDir when calling Flmngr.load({params}) separately.

    The default is "/" (the root directory of your storage) if defaultUploadDir was not set.Optional

  • filename


    If you passed an external URL and the filename was not detected or you passed a Base64 image, you should set this parameter to define a default filename for an image to save.

    The default is "image" (extension is set depending on the file format specified by the user in the save dialog). Optional

  • onSave

    (urlNew: string) => void

    A callback to handle the successful finish of editing and saving (uploading) an image. Get the full absolute URL from the urlNew argument of the callback.

    Default is null Optional

  • onCancel

    () => void;

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

    As you can see, there is no onFail callback. This is because any errors that occur while saving an image will result in showing an error dialog and returning the user to the save image dialog. So they can only cancel the entire editing process and go into onCancel or successfully finish with onSave.

    Default is null Optional