AWS S3 display file inline instead of force download

Question

For some reason files in my S3 bucket are being forced as downloads instead of displaying in-line so if I copy an image link and paste it into address bar and then navigate to it, it will promote my browser to download it. Instead I actually have to click on open image to go to the url.

Any ways to change the way files are served from S3

Answer 1

You need to define the content type, see below:

$client->putObject(array(
        'Bucket'     => 'buckname',
        'Key'        => $destination,
        'SourceFile' => $source,
        'ContentType' =>'image/jpeg', //<-- this is what you need!
        'ACL'          => 'public-read'//<-- this makes it public so people can see it
    ));

Answer 2

You need to change the Content-Type. From the S3 console, right click on the object and select Properties then it's under Metadata. You can also do it programmatically: http://docs.amazonwebservices.com/AWSSDKforPHP/latest/index.html#m=AmazonS3/change_content_type

Answer 3

You need to specify Content Disposition as well for inline instead attachment .

$client->putObject(array(
    'Bucket'     => 'buckname',
    'Key'        => $destination,
    'SourceFile' => $source,
    'ContentType' =>'image/jpeg', //<-- this is what you need!
    'ContentDisposition' => 'inline; filename=filename.jpg', //<-- and this !
    'ACL'          => 'public-read'//<-- this makes it public so people can see it
));

Answer 4

if you are using python, you can set ContentType as follows

s3 = boto3.client('s3')

mimetype = 'image/jpeg' # you can programmatically get mimetype using the `mimetypes` module
s3.upload_file(
    Filename=local_path,
    Bucket=bucket,
    Key=remote_path,
    ExtraArgs={
        "ContentType": mimetype
    }
)

You can also achieve the same in aws cli. Note *.jpeg Check s3 documentation

aws s3 cp \
      --exclude "*" \
      --include "*.jpeg" \
      --content-type="image/jpeg"  \
      --metadata-directive="REPLACE" \
      --recursive \
      --dryrun \
       s3://<bucket>/<path>/ \
       s3://<bucket>/<path>/

Alternatively if you'd want to do modify one object at a time you might want to use s3api copy-object

aws s3api copy-object \
    --content-type="image/jpeg" \
    --metadata-directive="REPLACE" \
    --copy-source "<bucket>/<key>" \
    --bucket "<bucket>" \
    --key "<key>" \
    --acl public-read

Answer 5

You can change the content type from the AWS S3 Console too.

Then you will get to see the side pop up, use that to change it manually.

Answer 6

You can try this one, this works for me.

const params = {
          Bucket: 'bucket-name',
          Body: file,
          ACL: 'public-read',
          ContentType: contentType,
          ContentEncoding: 'base64',
          ContentDisposition: 'attachment',
        };

Answer 7

You can try this one, ContentType is compulsory for open in a browser if you have already opened any URL on the browser then try in incognito.

var params = {
            Bucket: config.BUCKET_NAME,
            Key: fileName,
            ContentEncoding: 'base64',
            ContentDisposition: 'inline',
            ContentType: 'image/jpeg',
            Body: buf
        };

Answer 8

I found out that if we pass an empty value to ContentType it will open the file instead of downloading.

This is actually nice when uploading files of all kind of extensions.

$s3->putObject(
[
    'Bucket' => ..,
    'Key' => ..,
    'Body' => ..,
    'ContentType' => '', <---
    'ACL' => 'public-read',
]);

Answer 9

I had the same problem today. The problem was the Content-type property, when I was saving the file in s3. I am using Spring Boot, and content data in s3 was saving application/octet-stream in the value properties instead of image/jpeg, for example. Therefore, when I opened the file link, the browser downloaded the file.

The solution for this problem is to change the Content-type before saving the file in s3 !

Answer 10

In case someone who is using Java SDK is finding a solution for this, you need to set content type to ObjectMetaData.

ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentType("image/png");

s3client.putObject(new PutObjectRequest
    (bucketName, fileName + ".png", inputStream, 
     objectMetadata).withCannedAcl(CannedAccessControlList.PublicRead));

Answer 11

What really worked for me was to set the ContentType params to image/png before saving the S3 file.

Answer 12

If you open it in incognito it will work other than that it will not work for some reason.

Answer 13

Use these two properties to force browsers to inline the file from s3:

'ResponseContentType' & 'ResponseContentDisposition'

You can use them in the getCommand when generating a signed URL

$cmd = $s3Client->getCommand('GetObject', [
        'Bucket' => $bucket_name,
        'Key' => $filename,
        'ResponseContentType' =>  get_mime_type($filename),
        'ResponseContentDisposition' => 'inline; filename='.$user_filename
    ]);
   

get_mime_type is just my custom function to return mime type using the file name

This is what I used when I faced the same problem, I have millions of files in my s3 bucket and I couldn't change the mime type individually in console

Answer 14

After 2 days of fighting, this is the code I want.
Here is the code for anyone who uses "generate_presigned_post" in python

s3 = boto3.client('s3',
                  aws_access_key_id="<aws_access_key_id>",
                  aws_secret_access_key="<aws_secret_access_key>",
                  config=Config(
                      region_name="<region_name>",
                      signature_version="<signature_version>"
                  ))

key = 'bbb.png'

creds = s3.generate_presigned_post(
    Bucket="<Bucket>",
    Key=key,
    Fields={"Content-Type": "image/png"},
    Conditions=[{"Content-Type": "image/png"}],
    ExpiresIn=3600)

Answer 15

Though this is pretty old question but when i was googling a similar issue then I landed here so for them who lands here, just wanted to clarify that why files are being downloaded instead of displaying it - Because when you don't set the Content-Type explicitly, then by default S3 set the Content-Type to application/octet-stream

Answer 16

Below code worked for me but pdf not open in browser only jpeg or png file open in the browser.

$result = $s3->putObject(
            array(
                'Bucket'                =>  $bucketName,
                'Key'                   =>  $keyName,
                'SourceFile'            =>  $file,
                'StorageClass'          =>  'REDUCED_REDUNDANCY',
                'ContentEncoding'       =>  'base64',
                'ContentDisposition'    =>  'inline',
                'ContentType'           =>  'image/jpeg', //<-- this is what you need!
                'ACL'                   =>  'public-read'//<-- this makes it public so people can see it
            )
        );