--- url: https://plugin.stripo.email/editor-configuration/image-storage.md --- # Image Storage With the Stripo Plugin, you have the flexibility to choose where all your images should be stored, and this feature is available for all pricing plans. While Stripo provides its own storage as the default option, you may prefer to use your own storage solutions for better control and management. ::: image-wrap ![](/img/plugin/new/image26.webp){width=1999 height=962} ::: ## Default Stripo Storage :::success Please be advised that there might be a limitation to the use of the Stripo storage depending on the selected Plugin subscription plan. In order to have full control over the images used by your users in newsletters, we do recommend keeping them on your own file storage servers. ::: ## Custom Storage Options If you prefer not to use Stripo's storage, you can configure the Plugin to use any other preferred storage option. Below are the configurations for the AWS S3 bucket, Azure Blob storage, Cloudinary, and your own server. ### AWS S3 Bucket AWS S3 bucket is a Plugin application configuration feature that allows you to easily connect your own Amazon Web Services S3 bucket to our Plugin for storing images. ::: image-wrap ![](/img/plugin/new/image27.webp){width=1266 height=942} ::: If you choose this option, you’ll have to fill out a form to establish a connection with your storage. Please take a look at the image above to see the description of the form fields with specifications regarding the information required for each of them. | Parameter | Required | Description | | ----------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | S3 bucket name | Yes | The name you assigned to the bucket when creating it. | | Access key | Yes | You can provide AWS Root Account Credentials or IAM User Credentials (we recommend the second option for security reasons). The provided account must have the “Read” and “Write” access to the given bucket. [More about AWS credentials](http://docs.aws.amazon.com/general/latest/gr/aws-security-credentials.html). | | Secret access key | Yes | You can provide AWS Root Account Credentials or IAM User Credentials (we recommend the second option for security reasons). The provided account must have the “Read” and “Write” access to the given bucket. [More about AWS credentials](http://docs.aws.amazon.com/general/latest/gr/aws-security-credentials.html). | | Region | Yes | AWS region where you created the bucket. | | Base download url | Yes | Define the path that will be specified at the beginning of each URL to the images hosted in your S3 bucket. For example, it may be your CDN domain name or any other address, depending on your server configuration. | :::success Please make sure that the provided account has the Read and Write access to the given bucket. ::: #### Configuration of AWS S3 Storage To create custom AWS S3 storage, you need to: ```json { "Version": "2012-10-17", "Statement": [ { "Sid": "VisualEditor0", "Effect": "Allow", "Action": [ "s3:GetObject", "s3:PutObject", "s3:GetBucketCORS", "s3:DeleteObject", "s3:ListBucket" ], "Resource": [ "arn:aws:s3:::bucketname", "arn:aws:s3:::bucketname/*" ] } ] } ``` ```json { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::bucketname/*" } ] } ``` ```json location /content { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://{{ S3_BUCKET_URI }}/; proxy_redirect off; } ``` ### Adobe AEM To set up the integration, you need to create an API connection in Adobe and then add the credentials in Stripo. Create a new project; Click **Add API** and select **AEM Assets Author API;** Choose **OAuth Server-to-Server authentication;** Assign a product profile with access to your AEM environment; Make sure the technical account has permission to write to:\ `/content/dam/stripo` Collect required credentials:\ After setup, copy the following values from Adobe: * Client ID; * Client Secret; * Organization ID (ends with @AdobeOrg); * Author host (AEM Author domain); * Delivery URL (AEM Publish domain). Find your AEM URLs:\ You can get them in **Adobe Cloud Manager** → **Environments**: **Author URL** ``` https://author-p-e.adobeaemcloud.com ``` **Publish URL** ``` https://publish-p-e.adobeaemcloud.com ``` **Connect AEM in Stripo:** ::: image-wrap ![](/img/plugin/new/image24.webp){width=1432 height=1092} ::: 1. Go to **Settings → Plugin → Image Gallery** 2. Select **Adobe Experience Manager** 3. Fill in the required fields: * Client ID; * Client Secret; * Organization ID; * Author host; * Delivery URL. 4. Click **Save.** #### How does it work after setup? Once connected: * Images uploaded to emails are stored in AEM automatically; * Files are saved under: `/content/dam/stripo//` * Images are automatically published; * Assets are delivered via your Adobe CDN. :::success **Important notes** * Client Secret is stored securely and hidden after saving * If uploads stop working, check AEM permissions for `/content/dam/stripo` * If you regenerate Client Secret in Adobe, update it in Stripo immediately ::: ### Azure Blob Storage Azure Blob storage is a Plugin application configuration feature that allows you to easily connect your own Azure storage account to our Plugin for storing images. ::: image-wrap ![](/img/plugin/new/image28.webp){width=1270 height=622} ::: To do so, you need to generate a connection string in your Azure portal account: ::: image-wrap ![](/img/plugin/new/image29.webp){width= height=} ::: If you choose the “Azure Blob Storage” option, you will have to fill out the form to establish a connection with your storage. Please take a look at the image above to see the description of the form field with specification regarding the information that you will need to enter there: | Parameter | Required | Description | | ------------------------- | -------- | ------------------------------------------------- | | `Azure connection string` | Yes | Connection string from your azure portal account. | ### Cloudinary Cloudinary allows you to manage, optimize, and deliver images seamlessly across different platforms. To store your images using Cloudinary, follow these steps: ### Google Cloud We are now also integrated with Google Cloud so you can connect it with Stripo and store your images here. Let's now check how to set it up and find the credentials needed to connect it. ### Connecting Your Own Server This option may be the best choice for you if you’re using another storage type or want to build a more custom and flexible solution to host your images. We created a way to connect the Plugin to a custom file system provider (via HTTPS protocol), allowing you to use the Stripo editor with your own file storage, no matter which technology you use. It is required to support the set of the methods described below to provide successful communication between the two systems: the Stripo server and yours. The Basic Authentication is used to send these requests, so please make sure that you have specified the correct Login, Password, and Base API URL on the Stripo Plugin details page of your Stripo account (if you don’t have an account, please [sign up](https://stripo.email/plugin/)). ::: image-wrap ![](/img/plugin/new/image30.webp){width=1270 height=936} ::: Note, that your storage must support chunked-encoding mode if you want to get logs about any request. See more [here](https://github.com/ardas/stripo-plugin-samples/blob/master/server-side-api-file-uploader/bin/application.properties) #### OpenAPI Specification ```yaml openapi: 3.0.1 info: title: Stripo Plugin Storage API description: | It is required to support the set of the methods described below to provide successful communication between the two systems: the Stripo server and yours. The Basic Authentication is used to send these requests. Note, that your storage must support chunked-encoding mode if you want to get logs about any request. See more [here](https://github.com/ardas/stripo-plugin-samples/blob/master/server-side-api-file-uploader/bin/application.properties). version: 1.0.0 servers: - url: https://{YOUR_BASE_URL} description: Base URL for API requests variables: YOUR_BASE_URL: default: '' components: securitySchemes: basicAuth: type: http scheme: basic schemas: Document: type: object properties: url: type: string description: Absolute URL to the document. originalName: type: string description: Document name. uploadTime: type: integer description: Document upload time in milliseconds. size: type: integer description: Document size in bytes. height: type: integer description: Document height in pixels (px). width: type: integer description: Document width in pixels (px). thumbnailUrl: type: string description: Absolute URL of document preview thumbnail. aiGenerated: type: boolean description: | Optional. `true` if the image was generated with AI. Return the flag your storage persisted at upload time; for regular images the field can be omitted entirely. Folder: type: object properties: key: type: string description: Generated key for the folder. documents: type: array items: $ref: '#/components/schemas/Document' paths: /: get: tags: - Methods summary: Get list of files description: Allows you to retrieve a list of files within specified folders. This method helps you manage and access your file directory efficiently by providing a comprehensive list of available files in the targeted folders, streamlining your workflow and file management within the Stripo platform. security: - basicAuth: [] parameters: - name: keys in: query required: true description: Repeated query parameter, one occurrence per folder key. schema: type: string responses: '200': description: A list of documents grouped by folder keys. content: application/json: schema: type: array items: $ref: '#/components/schemas/Folder' post: tags: - Methods summary: Upload file to storage description: | Enables you to upload an image to a specified folder in your storage. This method facilitates the organization and management of your images by allowing you to easily add new files to designated locations within your Stripo storage, ensuring your media assets are well-organized and readily accessible. > [!WARNING] > **Filename uniqueness is your responsibility.** Stripo does not rename files for Other storage. If a file with the same name already exists in the folder, your server must save the new file under a modified name and return both the modified `originalName` and the corresponding `url` pointing to the newly saved file. If you return the same `originalName` and `url` as an already existing file — Stripo will use them as-is, which may cause the new image to overwrite the existing one or conflict with images previously hidden from the gallery. > [!NOTE] > When a user inserts an image created with the editor's AI image generation, the upload request to your storage includes the `aiGenerated: "true"` attribute. Persist this flag together with the image and return it as a boolean in the `aiGenerated` field of the `Document` object — in this upload response, in `GET /` listings and in `GET /info`. Your platform may need it to distinguish AI-generated visuals, for example to meet the EU AI Act transparency requirements. Visible disclosure of AI-generated content is the responsibility of the platform that displays the image to end users. security: - basicAuth: [] requestBody: content: multipart/form-data: schema: type: object properties: key: type: string description: Folder key where the file will be uploaded. file: type: string format: binary description: Multipart file to be uploaded. aiGenerated: type: string description: | Optional. Sent with the value `"true"` only for images created with the editor's built-in AI image generator; for regular uploads this part is not sent at all. Multipart form parts are always textual, so the value arrives as the string `"true"`. Your storage is expected to persist this flag together with the image. responses: '200': description: Uploaded file details. content: application/json: schema: $ref: '#/components/schemas/Document' /delete: post: tags: - Methods summary: Remove file from storage description: Marks a file as removed, so it is no longer displayed within the folder for the customer. Physically, the file is not deleted from storage, ensuring data integrity and the possibility of recovery if needed. This method helps maintain an organized and clutter-free storage view for users. security: - basicAuth: [] requestBody: content: application/json: schema: type: object properties: url: type: string description: Absolute URL to the document. responses: '200': description: Successful deletion response. content: application/json: schema: type: object properties: message: type: string /info: get: tags: - Methods summary: Get file info description: Allows you to retrieve detailed information about a specific file. This information helps your customers see useful details in the editor once the image is selected on the UI, enhancing their file management and editing experience within the Stripo platform. security: - basicAuth: [] parameters: - name: src in: query required: true description: Absolute URL of the document. schema: type: string responses: '200': description: Specific file information. content: application/json: schema: type: object properties: originalName: type: string description: Document original name. size: type: integer description: Document size in bytes. aiGenerated: type: boolean description: | Optional. `true` if the image was generated with AI. Return the flag your storage persisted at upload time; for regular images the field can be omitted entirely. security: - basicAuth: [] ``` :::custom-warning **Note:** If a file with the same name already exists in the folder, your server must save the new file under a modified name and return both the updated `originalName` and the correct `url` pointing to the newly saved file in the response (e.g., `originalName: "image_a1b2.png"` and `url: "https://your-storage.com/folder/image_a1b2.png"`). ::: #### Parameters | Parameter | Description | | ----- | ----- | | **`key`** | Generated automatically from the Plugin ID and the value specified in the [Folder path](/editor-configuration/image-gallery#folders-configuration) field. For example, `key=0000000_99999`, where `0000000` is the Plugin ID and `99999` is the value set to the Folder path. | | `documents` | An array of the uploaded documents grouped by Key. | | `url` | Absolute URL to the document. | | `originalName` | Document name. | | `uploadTime` | Document upload time in milliseconds. | | `size` | Document size in bytes. | | `height` | Document height in pixels (px). | | `width` | Document width in pixels (px). | | `thumbnailUrl` | The absolute URL of the document preview thumbnail. | :::success Please be advised that the keys for system images (used for a banner block, a video block, and module thumbnails) have different types than those described above. The keys for system images are as follows: * Video block: `pluginId_[application_id]_video` * Banner block: `pluginId_[application_id]_banner` * Module thumbnail: `pluginId_[application_id]_modules` Where `[application_id]` is the Plugin ID of your application. :::