title: Access denied to bucket in S3 - Error 403 Forbidden (Fine-Uploader)
body: <p>I have a problem getting access to the bucket in Amazon S3. I follow step-by-step the instructions in the Fineuploader in official blog (Fineuploader S3 Upload Directly to Amazon S3 from your Browser), I check similar questions but non of them make reference to this specific case.</p>
  
  <p>My intention is to replicate the fineuploader.com demo for S3, with the only difference that I'm not using advance features (chunking, drag &amp; drop, retry, and more), in other words make a "Simple Upload".</p>
  
  <p>Excuse me if I'm very redundant or very explicit, I only want to make clear the procedure I have done.</p>
  
  <p>I copied the code in client-side of <a href="http://fineuploader.com/demos.html#amazon-demo" rel="nofollow">http://fineuploader.com/demos.html#amazon-demo</a> and changed some lines:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="shortcut icon" href="favicon.ico" &gt;
  
      &lt;title&gt;&lt;/title&gt;
  
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- jQuery ====================================================================== --&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;!-- Fine Uploader JS ====================================================================== --&gt;
  &lt;script src="../../custom.fineuploader-5.0.8.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function () {
      $('#fineuploader-s3').fineUploaderS3({
          debug: true,
          request: {
              // REQUIRED: We are using a custom domain
              // for our S3 bucket, in this case.  You can
              // use any valid URL that points to your bucket.
              endpoint: "bucketname.s3.amazonaws.com",
  
              // REQUIRED: The AWS public key for the client-side user
              // we provisioned.
  
              // Access key - User create in IAM
              accessKey: "AKIAJUGFU2PN7PXXXXXX"
          },
  
          template: "simple-previews-template",
  
          // REQUIRED: Path to our local server where requests
          // can be signed.
          signature: {
              endpoint: "/fineuploader/html/templates/s3demo.php"
          },
  
          // OPTIONAL: An endopint for Fine Uploader to POST to
          // after the file has been successfully uploaded.
          // Server-side, we can declare this upload a failure
          // if something is wrong with the file.
          uploadSuccess: {
              endpoint: "/fineuploader/html/templates/s3demo.php?success"
          },
  
          // USUALLY REQUIRED: Blank file on the same domain
          // as this page, for IE9 and older support.
          // iframeSupport: {
          //     localBlankPagePath: "/server/success.html"
          // },
  
          // optional feature
          // chunking: {
          //     enabled: true
          // },
  
          // optional feature
          // resume: {
          //     enabled: true
          // },
  
          // optional feature
          // deleteFile: {
          //     enabled: true,
          //     method: "POST",
          //     endpoint: "/s3demo.php"
          // },
  
          // optional feature
          // validation: {
          //     itemLimit: 5,
          //     sizeLimit: 15000000
          // },
  
          // thumbnails: {
          //     placeholders: {
          //         notAvailablePath: "images/not_available-generic.png",
          //         waitingPath: "images/waiting-generic.png"
          //     }
          // }
      })
          // Enable the "view" link in the UI that allows the file to be downloaded/viewed
          .on('complete', function(event, id, name, response) {
              var $fileEl = $(this).fineUploaderS3("getItemByFileId", id),
                  $viewBtn = $fileEl.find(".view-btn");
  
              if (response.success) {
                  $viewBtn.show();
                  $viewBtn.attr("href", response.tempLink);
              }
          });
      });
  &lt;/script&gt;
  
  &lt;!-- Fine Uploader CSS ====================================================================== --&gt;
  &lt;link href="../../custom.fineuploader-5.0.8.css" rel="stylesheet"&gt;
  
  &lt;!-- Fine Uploader DOM Element ====================================================================== --&gt;
  &lt;div id="fineuploader-s3"&gt;&lt;/div&gt;
  
  &lt;!-- Fine Uploader template ====================================================================== --&gt;
  &lt;script type="text/template" id="simple-previews-template"&gt;
      &lt;div class="qq-uploader-selector qq-uploader"&gt;
      &lt;div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone&gt;
          &lt;span&gt;Drop files here to upload&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="qq-upload-button-selector qq-upload-button"&gt;
          &lt;div&gt;Upload a file&lt;/div&gt;
      &lt;/div&gt;
        &lt;span class="qq-drop-processing-selector qq-drop-processing"&gt;
            &lt;span&gt;Processing dropped files...&lt;/span&gt;
            &lt;span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"&gt;&lt;/span&gt;
        &lt;/span&gt;
      &lt;ul class="qq-upload-list-selector qq-upload-list"&gt;
          &lt;li&gt;
              &lt;div class="qq-progress-bar-container-selector"&gt;
                  &lt;div class="qq-progress-bar-selector qq-progress-bar"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;span class="qq-upload-spinner-selector qq-upload-spinner"&gt;&lt;/span&gt;
              &lt;img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale&gt;
              &lt;span class="qq-edit-filename-icon-selector qq-edit-filename-icon"&gt;&lt;/span&gt;
              &lt;span class="qq-upload-file-selector qq-upload-file"&gt;&lt;/span&gt;
              &lt;input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"&gt;
              &lt;span class="qq-upload-size-selector qq-upload-size"&gt;&lt;/span&gt;
              &lt;a class="qq-upload-cancel-selector btn-small btn-warning" href="#"&gt;Cancel&lt;/a&gt;
              &lt;a class="qq-upload-retry-selector btn-small btn-info" href="#"&gt;Retry&lt;/a&gt;
              &lt;a class="qq-upload-delete-selector btn-small btn-warning" href="#"&gt;Delete&lt;/a&gt;
              &lt;a class="qq-upload-pause-selector btn-small btn-info" href="#"&gt;Pause&lt;/a&gt;
              &lt;a class="qq-upload-continue-selector btn-small btn-info" href="#"&gt;Continue&lt;/a&gt;
              &lt;span class="qq-upload-status-text-selector qq-upload-status-text"&gt;&lt;/span&gt;
              &lt;a class="view-btn btn-small btn-info hide" target="_blank"&gt;View&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My code in the server-side was taken from <a href="https://github.com/FineUploader/server-examples/blob/master/php/s3/s3demo-thumbnails-cors.php" rel="nofollow">https://github.com/FineUploader/server-examples/blob/master/php/s3/s3demo-thumbnails-cors.php</a> only comment and changed comment  the following lines.</p>
  
  <p>Commented lines:</p>
  
  <pre><code>// require 'aws-autoloader.php';
  // use Aws\S3\S3Client;
  
  // $serverPublicKey = $_SERVER['PARAM1'];
  // $serverPrivateKey = $_SERVER['PARAM2'];
  
  // $expectedMaxSize = 15000000;
  </code></pre>
  
  <p>Changed lines:</p>
  
  <pre><code>// Secret key - User create in IAM
  $clientPrivateKey = $_SERVER['BIsYDPrOfWyWeUXueJaiaAem7he3R5THxx000Xxx'];
  $expectedBucketName = "bucketname";
  </code></pre>
  
  <p>Everything appears to be in order, but when I upload an image, I have an error in my Chrome console:</p>
  
  <pre><code>POST http://bucketname.s3.amazonaws.com/ 403 (Forbidden)
  </code></pre>
  
  <p>The access key and secret key contains characters X and 0 that were placed for illustrative purposes. The keys are not real.</p>
  
  <p>I will appreciate your help.</p>