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.urlFilesandurlFileManager. -
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
dirUploadsdirectory (if not specified,defaultUploadDirwill be used).When using Base64 image data, please also provide a
filenamefor 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(ordirFilesoption on the server).If you set it before, it will override the value
defaultUploadDirwhen callingFlmngr.load({params})separately.Optional Default is
"/"(the root directory of your storage) ifdefaultUploadDirwas not set. -
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.
Optional Default is
"image"(extension is set depending on the file format specified by the user in the save dialog). -
onSave:(urlNew: string) => voidA callback to handle the successful finish of editing and saving (uploading) an image. Get the full absolute URL from the
urlNewargument of the callback.Optional Default is
null -
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
onFailcallback. 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 intoonCancelor successfully finish withonSave.Optional Default is
null