Edit image, then upload to server
Flmngr.editAndUpload
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.
Code samples:
Parameters
-
...common parameters
:{ any parameters ofFlmngr.load()
method }All parameters that can be passed to the
Flmngr.load({params})
method are also available here. So you can override some values (exceptapiKey
) or pass parameters missing inFlmngr.load()
call but required for this method, i. e.urlFiles
andurlFileManager
. -
url
:stringAn 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!
-
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
(ordirFiles
option on the server).If you set it before, it will override the value
defaultUploadDir
when callingFlmngr.load({params})
separately.The default is
"/"
(the root directory of your storage) ifdefaultUploadDir
was not set.Optional -
filename
:stringIf 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) => voidA 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 intoonCancel
or successfully finish withonSave
.Default is
null
Optional