logologo
Get Started
Guide
Development
Plugins
API
English
简体中文
Get Started
Guide
Development
Plugins
API
English
简体中文
logologo
File Manager
Overview

Storage Engines

Overview
Local Storage
AWS S3
Alibaba Cloud OSS
Tencent Cloud COS
S3 Pro
File Collection
Attachment Field
Development
Previous PageTencent Cloud COS
Next PageFile Collection

#Storage Engine: S3 (Pro)

#Introduction

Building on the File Manager plugin, this adds support for S3 protocol-compatible file storage types. Any object storage service that supports the S3 protocol can be easily integrated, such as Amazon S3, Aliyun OSS, Tencent COS, MinIO, Cloudflare R2, etc., further enhancing the compatibility and flexibility of storage services.

#Features

  1. Client-side upload: The file upload process does not go through the NocoBase server, but directly connects to the file storage service, providing a more efficient and faster upload experience.

  2. Private access: When accessing files, all URLs are signed temporary authorized addresses, ensuring the security and timeliness of file access.

#Use Cases

  1. File collection management: Centrally manage and store all uploaded files, supporting various file types and storage methods for easy classification and retrieval.

  2. Attachment field storage: Used for data storage of attachments uploaded in forms or records, supporting association with specific data records.

#Plugin Configuration

  1. Enable the plugin-file-storage-s3-pro plugin.

  2. Click "Setting -> FileManager" to enter the file manager settings.

  3. Click the "Add new" button and select "S3 Pro".

  1. After the pop-up appears, you will see a form with many fields to fill in. You can refer to the subsequent documentation to obtain the relevant parameter information for the corresponding file service and fill it into the form correctly.

#Service Provider Configuration

#Amazon S3

#Bucket Creation

  1. Open https://ap-southeast-1.console.aws.amazon.com/s3/home to enter the S3 console.

  2. Click the "Create bucket" button on the right.

  1. Fill in the Bucket Name. Other fields can be left at their default settings. Scroll down to the bottom of the page and click the "Create" button to complete the creation.

#CORS Configuration

  1. Go to the buckets list, find and click the bucket you just created to enter its details page.

  1. Click the "Permission" tab, then scroll down to find the CORS configuration section.

  1. Enter the following configuration (you can customize it further) and save.
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]

#Getting AccessKey and SecretAccessKey

  1. Click the "Security credentials" button in the upper right corner of the page.

  1. Scroll down to the "Access Keys" section and click the "Create Access Key" button.

  1. Click to agree (this is a demonstration with the root account; it is recommended to use IAM in a production environment).

  1. Save the Access key and Secret access key displayed on the page.

#Getting and Configuring Parameters

  1. The AccessKey ID and AccessKey Secret are the values you obtained in the previous step. Please fill them in accurately.

  2. Go to the properties panel of the bucket details page, where you can get the Bucket name and Region information.

#Public Access (Optional)

This is an optional configuration. Configure it when you need to make uploaded files completely public.

  1. Go to the Permissions panel, scroll down to Object Ownership, click edit, and enable ACLs.

  1. Scroll to Block public access, click edit, and set it to allow ACLs control.

  1. Check Public access in NocoBase.

#Thumbnail Configuration (Optional)

This configuration is optional and is used to optimize image preview size or effects. Please note that this deployment solution may incur additional costs. For specific fees, please refer to the relevant AWS terms.

  1. Visit Dynamic Image Transformation for Amazon CloudFront.

  2. Click the Launch in the AWS Console button at the bottom of the page to start deploying the solution.

  1. Follow the prompts to complete the configuration. Pay special attention to the following options:
    1. When creating the stack, you need to specify the name of an Amazon S3 bucket that contains the source images. Please enter the name of the bucket you created earlier.
    2. If you choose to deploy the demo UI, you can test the image processing features through this interface after deployment. In the AWS CloudFormation console, select your stack, go to the "Outputs" tab, find the value corresponding to the DemoUrl key, and click the link to open the demo interface.
    3. This solution uses the sharp Node.js library for efficient image processing. You can download the source code from the GitHub repository and customize it as needed.

  1. After the configuration is complete, wait for the deployment status to change to CREATE_COMPLETE.

  2. In the NocoBase configuration, there are several points to note:

    1. Thumbnail rule: Fill in image processing-related parameters, for example, ?width=100. For details, refer to the AWS documentation.
    2. Access endpoint: Fill in the value of Outputs -> ApiEndpoint after deployment.
    3. Full access URL style: You need to check Ignore (because the bucket name was already filled in during configuration, it is no longer needed for access).

#Configuration Example

#Aliyun OSS

#Bucket Creation

  1. Open the OSS console https://oss.console.aliyun.com/overview

  1. Click "Buckets" in the left menu, then click the "Create Bucket" button to start creating a bucket.

  1. Fill in the bucket-related information and finally click the Create button.

    1. The Bucket Name should suit your business needs; the name can be arbitrary.

    2. Choose the Region closest to your users.

    3. Other settings can be left as default or configured based on your requirements.

#CORS Configuration

  1. Go to the details page of the bucket created in the previous step.

  1. Click "Content Security -> CORS" in the middle menu.

  1. Click the "Create Rule" button, fill in the relevant content, scroll down, and click "OK". You can refer to the screenshot below or configure more detailed settings.

#Getting AccessKey and SecretAccessKey

  1. Click "AccessKey" under your profile picture in the upper right corner.

  1. For demonstration purposes, we are creating an AccessKey using the main account. In a production environment, it is recommended to use RAM to create it. You can refer to https://www.alibabacloud.com/help/en/ram/user-guide/create-an-accesskey-pair

  2. Click the "Create AccessKey" button.

  1. Perform account verification.

  1. Save the Access key and Secret access key displayed on the page.

#Getting and Configuring Parameters

  1. The AccessKey ID and AccessKey Secret are the values obtained in the previous step.

  2. Go to the bucket details page to get the Bucket name.

  1. Scroll down to get the Region (the trailing ".aliyuncs.com" is not needed).

  1. Get the endpoint address, and add the https:// prefix when filling it into NocoBase.

#Thumbnail Configuration (Optional)

This configuration is optional and should only be used when you need to optimize image preview size or effects.

  1. Fill in the Thumbnail rule related parameters. For specific parameter settings, refer to Image Processing Parameters.

  2. Full upload URL style and Full access URL style can be kept the same.

#Configuration Example

#MinIO

#Bucket Creation

  1. Click the Buckets menu on the left -> click Create Bucket to go to the creation page.
  2. Fill in the Bucket name and click the save button.

#Getting AccessKey and SecretAccessKey

  1. Go to Access Keys -> click the Create access key button to go to the creation page.

  1. Click the save button.

  1. Save the Access Key and Secret Key from the pop-up window for later configuration.

#Parameter Configuration

  1. Go to the NocoBase -> File manager page.

  2. Click the Add new button and select S3 Pro.

  3. Fill out the form:

    • AccessKey ID and AccessKey Secret are the values saved in the previous step.
    • Region: A self-hosted MinIO does not have the concept of a Region, so it can be configured as "auto".
    • Endpoint: Fill in the domain name or IP address of your deployment.
    • Full access URL style must be set to Path-Style.

#Configuration Example

#Tencent COS

You can refer to the configuration of the file services mentioned above, as the logic is similar.

#Configuration Example

#Cloudflare R2

You can refer to the configuration of the file services mentioned above, as the logic is similar.

#Configuration Example