Cloud Service Integration Feature Documentation

What is the Cloud Service Integration Feature?

The Cloud Service Integration feature in InnoExport allows users to automatically upload their exported images to a specified HTTP endpoint using the POST method. This feature is particularly beneficial for users who need to streamline their workflow by directly integrating image exports into their cloud storage or processing pipelines. By utilizing this advanced feature, users can save time and automate the handling of their exported assets, making it ideal for professional environments where efficiency and automation are crucial.

Optional Advanced Feature

This is an advanced feature of InnoExport. If you simply wish to export and download images directly to your device, you can completely ignore this feature. It’s designed for users who need additional automation and cloud integration capabilities.

Setting Up the Cloud Service Integration

1. Configure the HTTP Endpoint:

• To use this feature, you must first enter a valid HTTP endpoint in the configuration panel of the plugin. This endpoint will receive the exported images via a POST request.

2. CORS Configuration:

• Ensure your endpoint is configured to handle Cross-Origin Resource Sharing (CORS). The plugin will send HTTP POST requests from the origin https://innotech.work, so the endpoint must accept requests from this origin.

3. Server-Side Processing:

• The server receiving the images can process them in any way required, such as saving them locally or uploading them to an AWS S3 bucket.
• Once the server finishes processing, it must return a status code of 200 to the plugin to indicate successful completion.

4. Data Format:

• The plugin will send images in a multipart/form-data format. Each key will be the filepath defined by the user, and the value will be the file representing the image.

5. Response Format:

• The server should respond with a JSON object in the following format:

  {
    "format": "default", // Required, currently only accepts 'default'. This is for future expandability.
    "result": [
      // Required, must be an array with the exact number of images uploaded.
      {
        "key": "icon-1.png", // Required, must match the key of the form data sent by the plugin, which is the filepath of the image.
        // Optional, a string to fetch this image if it has been uploaded to a cloud storage. If present, a 'Copy URL' button will appear in the plugin.
        "url": "https://example-bucket.s3.amazonaws.com/icon-1.png",
        // Optional, a string of a code snippet for importing this image, for example in a React project. If present, a 'Copy Code' button will appear in the plugin.
        "code": "<code snippet example>",
        "success": true // Required, a boolean indicating whether the image was processed successfully.
      }
    ]
  }

Example: Saving Images to AWS S3 with Node.js

Here’s an example of how to set up a Node.js server to save images to an AWS S3 bucket. This example uses the @aws-sdk/client-s3 package for interacting with S3 and multer for handling file uploads.

const { fromEnv } = require('@aws-sdk/credential-providers')
const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3')
const express = require('express')
const multer = require('multer')
const cors = require('cors')
 
const app = express()
app.use(
  cors({
    origin: 'http://localhost:8888',
    methods: 'POST'
  })
)
const port = 9000
 
const region = 'ap-southeast-1'
const bucket = 'carv-public-dev'
const subFolder = 'test-icon1'
 
const storage = multer.memoryStorage()
 
const s3Client = new S3Client({
  region,
  credentials: fromEnv()
})
 
const upload = multer({ storage })
 
app.post('/upload', upload.any(), (req, res) => {
  Promise.all(
    req.files.map(async file => {
      const command = new PutObjectCommand({
        Body: file.buffer,
        Bucket: bucket,
        Key: `${subFolder}/${file.fieldname}`,
        ContentType: file.mimetype,
        CacheControl: 'public,max-age=86400'
      })
      await s3Client.send(command)
      return {
        key: file.fieldname,
        url: `https://${bucket}.s3-${region}.amazonaws.com/${subFolder}/${file.fieldname}`
      }
    })
  )
    .then(result => {
      res.send(result)
    })
    .catch(err => {
      res.status(500)
      res.send(err.message)
    })
})
 
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Privacy and Security Considerations

• Trusted Endpoint:
  • It is essential to enter an endpoint that you trust. The plugin will send your images to this endpoint, and these images might contain sensitive or private data.
• Responsibility:
  • The InnoExport plugin does not control the server at the specified endpoint. It is the user’s responsibility to ensure that the server is secure and that privacy is maintained.

By following these instructions, users can effectively utilize the Cloud Service Integration feature to enhance their workflow and automate the export and upload process seamlessly.