To a Remote URL

PhotoEditor SDK supports saving photos to a remote URL.

Import Expo file system#

To use the device's file system, we need to install and import the expo-file-system module. For further reference on how to set this up, please take a look at the official documentation.

Set an accessible export path#

Since we are using the expo-file-system module for deleting the exported photo after processing it, we need to save the photo in one of the directories that are supported by this module. Otherwise, the module will not be able to delete the files. For further reference on this, please have a look at the official documentation. Please note that you need to specify the file extension for Android, while it is automatically added for iOS.

Open the editor and upload the photo#

Open the photo editor and handle the export result. After retrieving the exported photo, use the expo-media-library to save the PhotoditorResult.image. In this example, the upload will fail, since no valid remote URL is specified.

Delete the temporary photo#

Delete the temporary export file after processing it.


import * as FileSystem from "expo-file-system";
import { Platform } from "react-native";
import { Configuration, ImageFormat, PESDK } from "react-native-photoeditorsdk";

export const savePhotoRemoteURLExample = async (): Promise<void> => {
  // Add a photo from the assets directory.
  const photo = require("../../../../assets/pesdk/LA.jpg");

  try {
    // Create a `Configuration` object.
    // Since this example is using `expo-file-system` to remove the exported photo later,
    // we need to export the photo in one of the two directories that are supported by this module.
    // For further reference, please have a look at the official documentation here:
    // https://docs.expo.dev/versions/latest/sdk/filesystem/#directories
    const configuration: Configuration = {
      export: {
        filename:
          FileSystem.cacheDirectory +
          `export${Platform.OS == "android" ? ".png" : ""}`,
        image: {
          format: ImageFormat.PNG,
        },
      },
    };

    // Open the photo editor and handle the export as well as any occuring errors.
    const result = await PESDK.openEditor(photo, configuration);

    if (result != null) {
      // The user exported a new photo successfully and the newly generated photo is located at `result.image`.
      // For this example, the photo is uploaded to a remote URL.
      const uploadResult = await FileSystem.uploadAsync(
        "YOUR-VALID-DESTINATION-URL",
        result.image
      );

      if (uploadResult.status != 200) {
        throw "There was an error uploading the photo.";
      }

      // Delete the temporary export file only after the saving process has finished,
      // to be able to access it again in case anything went wrong while uploading
      // the photo.
      return FileSystem.deleteAsync(result.image);
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error generating the photo.
    console.log(error);
  }
};