CODEWITHSUNDEEP
amazon-web-servicesamazon-s3
Payton Burdette
Payton Burdette

Reputation: 126

S3 Images being downloaded automatically when linked

What permission am I missing or is this something else ?

We are using S3 for storage and to serve images to a site with moderate traffic. We built out a custom thumbnail slider that links a small thumbnail image to a larger slider image at different resolution.

Before S3 came into play the images would link to each other. Now once the thumbnail is clicked that image is downloaded automatically rather than just linking to the larger image. Any thoughts?

Here is the code, but this is just an S3 question really. Thanks!

<div class="thumbnails" itemscope itemtype="http://schema.org/ImageGallery">
    <ul id="easy-slide">
      <i id="prev" class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>
      {thumbnails}
      <li itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="{thumbnails:large}" itemprop="contentUrl" data-size="500x500">
          <img src="{thumbnails:thumb}" height="100px" width="100px" itemprop="thumbnail" alt="Image description" />
        </a>
      </li>
      {/thumbnails}
     <i id="next" class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
  </ul>
</div>

Upvotes: 0

Views: 2737

Answers (3)

Chinmaya Kumar Biswal
Chinmaya Kumar Biswal

Reputation: 1

here i use AWS SDK For PHP And my code like

$certificateImageName=$_FILES['uploadCertificate']['name'];
  $certificateImageTmp=$_FILES['uploadCertificate']['tmp_name'];
  $certificateImageType=$_FILES['uploadCertificate']['type']; 

  $certificateImageName=$engineerDetails['id'].date("Y-m-d-s",time()).$certificateImageName;
if($certificateImageType == "image/png" || $certificateImageType == "image/jpg" || $certificateImageType == "image/jpeg" || $certificateImageType == "image/gif" || $certificateImageType == "application/pdf"){
    try {
      // Upload data.
      $uploadResult = $s3->putObject([
        'Bucket' => $bucketforCertificate,
        'Key'    => $certificateImageName,
        'SourceFile' => $certificateImageTmp,
        'ContentType' => $certificateImageType, //You have to set contenttype else when you access it download the file  
        'ACL' => 'public-read'
      ]);
  
      // Print the URL to the object.
    } catch (S3Exception $e) {
      echo $e->getMessage() . PHP_EOL;
    }  
<your data insertion code >
}

Upvotes: 0

user3715882
user3715882

Reputation: 11

When uploading using the API, the default content type is attachment.

Sending a request using the content type parameter solves the problem. Include the "ContentType" parameter in the header request as below:

{
    Bucket: <BUCKET NAME>, 
    Key: "", // pass key
    Body: null, // pass file body,
    ContentType: "image/jpg, image/png, image/jpeg"
}

The URL generated after uploading this way would allow browser access instead of an automatic download.

Upvotes: 1

Rodrigo Murillo
Rodrigo Murillo

Reputation: 13642

Likely a Content-Type problem. The correct MIME type is not being set when you uploaded the images to S3.

Just to confirm, check the MIME type being returned:

curl -I -v http://www.example.com/image.jpg

Then you will need to set the correct content type in the S3 metadata. To update the the metadata on the S3 object, you can copy the object to itself, and specify the content type on the command line.

From StackOverflow: How can I change the content-type of an object using aws cli?:

$ aws s3api copy-object --bucket archive --content-type "image/jpg" \
    --copy-source archive/test/image.jpg--key test/image.jpg \
    --metadata-directive "REPLACE"

To answer your question:

Is there a way to set that for an entire folder or a bucket policy?

S3 does not actually have folder/directories. You need to touch each object via CLI to change its content type. See What is the difference between Buckets and Folders in Amazon S3?. But the command I referenced below will do that operation on an entire bucket.

So you will need to use the S3 CLI to update the content type metadata. Here is another answer showing the a variety of command line methods, that will change all the content type for all files of a given type (E.g. png), recursively:

aws s3 cp \
      --exclude "*" \
      --include "*.png" \
      --content-type="image/png"  \
      --metadata-directive="REPLACE" \
      --recursive \
      --dryrun \
       s3://mybucket/static/ \
       s3://mybucket/static/

See https://serverfault.com/questions/725562/recursively-changing-the-content-type-for-files-of-a-given-extension-on-amazon-s

Upvotes: 2

Related Questions