Resize all images in an S3 bucket

🤖/s3/import allows you to resize entire folders in an S3 bucket of files from your Amazon S3 account with very easy syntax. After the processing is done, you can see which files were imported in the result JSON at the bottom.

Step 1:

Import files from Amazon S3

We are happy to import from whatever storage solution suits you best.Learn more

2d51d260709046a8a002626f22ca516a.jpg

Image – 19 KB

400 × 400

28e5b939308345d2961b3b81af169a63.jpg

Image – 111 KB

1000 × 1000

d7bbf6c19b404887a01d5758c1c6f1d8.jpg

Image – 85 KB

1000 × 1000

c13d658c19474aaeb91c2ce1593fc580.jpg

Image – 131 KB

1152 × 768

c671582eaf9a4c299312237e9062ddf1.jpg

Image – 1.5 MB

2560 × 2048

d857f6e2c255402a9f286500cf9f8cb3.jpg

Image – 1.4 MB

4096 × 2301

"imported": {
  "robot": "/s3/import",
  "result": true,
  "credentials": "demo_s3_credentials",
  "path": "my_folder/"
}

/s3/import

This bot imports whole directories of files from your S3 bucket

Step 2:

Convert, resize, or watermark images

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more.Learn more

BRUNTSFIELD.jpg

Image – 5.2 KB

130 × 130

STOCKBRIDGE.jpg

Image – 5.1 KB

130 × 130

jpg

Image – 5.1 KB

130 × 130

desert.jpg

Image – 4.5 KB

130 × 104

ravi-roshan-383162.jpg

Image – 4.1 KB

130 × 73

snowflake.jpg

Image – 30 KB

130 × 87

"resized": {
  "use": "imported",
  "robot": "/image/resize",
  "result": true,
  "height": 130,
  "width": 130,
  "zoom": false
}

/image/resize

This bot resizes, crops, changes colorization, rotation, and applies text and watermarks to images

Step 3:

Export files to Amazon S3

We export to the storage platform of your choice.Learn more

imported

resized

"exported": {
  "use": [
    "resized"
  ],
  "robot": "/s3/store",
  "result": true,
  "credentials": "demo_s3_credentials",
  "path": "my_resized/",
  "url_prefix": "https://demos.transloadit.com/"
}

/s3/store

This bot exports encoding results to Amazon S3

Live Demo. See for yourself

Loading Uppy demo…

Build this in your own language

<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i --save @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
  rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // It's often better store encoding instructions in your account
          // and use a `template_id` instead of adding these steps inline
          steps: {
            imported: {
              robot: '/s3/import',
              result: true,
              credentials: 'demo_s3_credentials',
              path: 'my_folder/',
            },
            resized: {
              use: 'imported',
              robot: '/image/resize',
              result: true,
              height: 130,
              width: 130,
              zoom: false,
            },
            exported: {
              use: ['resized'],
              robot: '/s3/store',
              result: true,
              credentials: 'demo_s3_credentials',
              path: 'my_resized/',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to `waitForEncoding:true` this is fired after encoding is done.
      // Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`
      console.log(transloadit) // Array of Assembly Statuses
      for (const assembly of transloadit) {
        console.log(assembly.results) // Array of all encoding results
      }
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

Read docs: Browsers

So many ways to integrate

Transloadit is a service for companies with developers. And there are many ways developers can put Transloadit to good use inside your company to automate media processing.