Reputation: 1653

AWS S3 display file inline instead of force download

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

Upvotes: 137

Answers (18)

lohnsonok

Reputation: 517

const command = new GetObjectCommand({ Bucket: config.s3.mediaBucket, Key: key, ResponseContentDisposition: attachment; filename="${key}" });

it worked for me after all responses tried

Upvotes: -1

Hashim khan

Reputation: 29

only write proper contentType if pdf then it application/pdf and same goes for other formats

Upvotes: -1

Avnish Tiwary

Reputation: 2286

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

Upvotes: 2

Neo

Reputation: 11577

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
    ));

Upvotes: 107

Mohammad Nazim

Reputation: 47

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
            )
        );

Upvotes: -2

T H

Reputation: 568

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)

Upvotes: 0

Clau

Reputation: 136

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

Upvotes: 1

Mike T.

Reputation: 43

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

Upvotes: 0

Adriano Rabello

Reputation: 21

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 !

Upvotes: 2

kd12345

Reputation: 793

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

Upvotes: -1

Linesofcode

Reputation: 5903

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',
]);

Upvotes: 3

Nerdy Sid

Reputation: 332

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.

Upvotes: 6

Pushprajsinh Chudasama

Reputation: 7979

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',
        };

Upvotes: 3

vigamage

Reputation: 2125

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));

Upvotes: 1

Ankit Kumar Rajpoot

Reputation: 5610

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
        };

Upvotes: 3

Anthony Awuley

Reputation: 3953

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

Upvotes: 18

Alin Razvan

Reputation: 1523

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
));

Upvotes: 19

gregbeaty

Reputation: 689

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

Upvotes: 55

AWS S3 display file inline instead of force download

Answers (18)

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

Related Questions