title: Can' read images uploaded to AWS S3
body: <p>I'm uploading images to <code>AWS S3</code> as Buffer (as it's required by <code>aws-sdk</code>), but then this image just can't be read as a normal image - it looks in the browser just like a small white square. What I'm missing here?</p>
  <p>On Next.js API</p>
  <pre><code>const s3 = new AWS.S3({
        accessKeyId: &quot;key&quot;,
        secretAccessKey: &quot;key&quot;,
      });
      const params = {
        Bucket: &quot;bucket&quot;,
        Key: `${Date.now().toString()}.jpg`,
        Body: Buffer.from(req.body),
        ContentType: &quot;image/png&quot;,
      };
      s3.upload(params, (err, data) =&gt; {
        if (err) {
          throw err;
        }
        console.log(`File uploaded successfully. ${data}`);
      });
  </code></pre>
  <p>Client side:</p>
  <pre><code>const handleImageUpload = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      const { files } = e.target;
      const formData = new FormData();
      if (files &amp;&amp; files[0]) {
        formData.append(&quot;image&quot;, files[0]);
        fetch(&quot;/api/upload.image&quot;, {
          method: &quot;POST&quot;,
          body: formData,
        });
      }
    };
  </code></pre>
  <p>Here is an example of the answer from server:</p>
  <pre><code>&lt;ref *2&gt; ManagedUpload {
    _events: {},
    body: &lt;Buffer 2d 2d 2d 2d 2d 2d 57 65 62 4b 69 74 46 6f 72 6d 42 6f 75 6e 64 61 72 79 51 41 62 63 59 76 32 45 4e 6c 34 77 77 79 70 57 0d 0a 43 6f 6e 74 65 6e 74 2d ... 93798 more bytes&gt;,
    sliceFn: [Function: slice],
    callback: [Function (anonymous)],
    parts: {},
    completeInfo: [],
    fillQueue: [Function: fillBuffer],
    partSize: 5242880,
    service: Service {
      config: Config {
        credentials: [Credentials],
        credentialProvider: [CredentialProviderChain],
        region: 'us-east-1',
        logger: null,
        apiVersions: {},
        apiVersion: null,
        endpoint: 's3.amazonaws.com',
        httpOptions: [Object],
        maxRetries: undefined,
        maxRedirects: 10,
        paramValidation: true,
        sslEnabled: true,
        s3ForcePathStyle: false,
        s3BucketEndpoint: false,
        s3DisableBodySigning: true,
        s3UsEast1RegionalEndpoint: undefined,
        s3UseArnRegion: undefined,
        computeChecksums: true,
        convertResponseTypes: true,
        correctClockSkew: false,
        customUserAgent: null,
        dynamoDbCrc32: true,
        systemClockOffset: 0,
        signatureVersion: 'v4',
        signatureCache: true,
        retryDelayOptions: {},
        useAccelerateEndpoint: false,
        clientSideMonitoring: false,
        endpointDiscoveryEnabled: undefined,
        endpointCacheSize: 1000,
        hostPrefixEnabled: true,
        stsRegionalEndpoints: 'legacy',
        accessKeyId: 'xxx',
        secretAccessKey: 'xxx',
        params: [Object]
      },
      isGlobalEndpoint: false,
      endpoint: Endpoint {
        protocol: 'https:',
        host: 's3.amazonaws.com',
        port: 443,
        hostname: 's3.amazonaws.com',
        pathname: '/',
        path: '/',
        href: 'https://s3.amazonaws.com/'
      },
      _events: { apiCallAttempt: [Array], apiCall: [Array] },
      MONITOR_EVENTS_BUBBLE: [Function: EVENTS_BUBBLE],
      CALL_EVENTS_BUBBLE: [Function: CALL_EVENTS_BUBBLE],
      _clientId: 2
    },
    totalBytes: 93848,
    failed: false,
    partPos: 5242880,
    isDoneChunking: true,
    numParts: 1,
    totalPartNumbers: 1,
    singlePart: &lt;ref *1&gt; Request {
      domain: null,
      service: Service {
        config: [Config],
        isGlobalEndpoint: false,
        endpoint: [Endpoint],
        _events: [Object],
        MONITOR_EVENTS_BUBBLE: [Function: EVENTS_BUBBLE],
        CALL_EVENTS_BUBBLE: [Function: CALL_EVENTS_BUBBLE],
        _clientId: 2
      },
      operation: 'putObject',
      params: {
        Body: &lt;Buffer 2d 2d 2d 2d 2d 2d 57 65 62 4b 69 74 46 6f 72 6d 42 6f 75 6e 64 61 72 79 51 41 62 63 59 76 32 45 4e 6c 34 77 77 79 70 57 0d 0a 43 6f 6e 74 65 6e 74 2d ... 93798 more bytes&gt;,
        Bucket: 'codest-images',
        Key: '1613572736403.jpg',
        ContentType: 'image/png',
        ACL: 'public-read'
      },
      httpRequest: HttpRequest {
        method: 'PUT',
        path: '/1613572736403.jpg',
        headers: [Object],
        body: &lt;Buffer 2d 2d 2d 2d 2d 2d 57 65 62 4b 69 74 46 6f 72 6d 42 6f 75 6e 64 61 72 79 51 41 62 63 59 76 32 45 4e 6c 34 77 77 79 70 57 0d 0a 43 6f 6e 74 65 6e 74 2d ... 93798 more bytes&gt;,
        endpoint: [Object],
        region: 'us-east-1',
        _userAgent: 'aws-sdk-nodejs/2.840.0 darwin/v14.15.4 callback',
        virtualHostedBucket: 'codest-images',
        stream: [ClientRequest]
      },
      startTime: 2021-02-17T14:38:56.406Z,
      response: Response {
        request: [Circular *1],
        data: null,
        error: null,
        retryCount: 0,
        redirectCount: 0,
        httpResponse: [HttpResponse],
        maxRetries: 3,
        maxRedirects: 10
      },
      _asm: AcceptorStateMachine { currentState: 'send', states: [Object] },
      _haltHandlersOnError: false,
      _events: {
        validate: [Array],
        afterBuild: [Array],
        restart: [Array],
        sign: [Array],
        validateResponse: [Array],
        send: [Array],
        httpHeaders: [Array],
        httpData: [Array],
        httpDone: [Array],
        retry: [Array],
        afterRetry: [Array],
        build: [Array],
        extractData: [Array],
        extractError: [Array],
        httpError: [Array],
        beforePresign: [Array],
        success: [Array],
        complete: [Array],
        httpUploadProgress: [Array]
      },
      emit: [Function: emit],
      API_CALL_ATTEMPT: [Function: API_CALL_ATTEMPT],
      API_CALL_ATTEMPT_RETRY: [Function: API_CALL_ATTEMPT_RETRY],
      API_CALL: [Function: API_CALL],
      _managedUpload: [Circular *2],
      signedAt: 2021-02-17T14:38:56.415Z
    }
  }
  </code></pre>