How do I use FineUploader with Wasabi?

NOTE: Currently FineUploader does not work with Wasabi and throws the following error while uploading a file - Invalid according to Policy: Policy Condition failed: [“eq”, “$Content-Type”, “image\/png”]

This is because currently Wasabi does not handle CORS exactly as Amazon does. It is a future enhancement under consideration.

FineUploader is a JavaScript library for client-side uploads, supporting advanced features like concurrent chunking and direct uploads to S3.

This example uses the FineUploader's php-s3-server for handling signature, delete, etc endpoint requests from Fine Uploader S3. The package name is fineuploader/php-s3-server. There are various other ways to upload files to s3 using FineUploader so you can also choose other options.

Example code can be found at this location: fineuploader-example.zip. Download the source.

To use FineUploader with Wasabi Cloud you need to configure following the steps below (this example uses a MacBook Pro settings might differ on various Windows or Unix OS) :

  1. To run this you will need PHP which is already installed on OSX by default.
  2. To install node.js you will require npm - Run brew install npm.
  3. Please install composer as well. Just follow the instructions to install composer here https://getcomposer.org/download/.
  4. Now lets start building our application:
    1. To install Javascript version of FineUploader perform the following steps:
      1. mkdir fineuploader-example
      2. cd fineuploader-example
      3. echo "{}" > package.json
      4. npm install fine-uploader
    2. To install the php backend of fine-uploader perform the following steps:
      1. Edit the composer.json file - vim composer.json
      2. Add the following JSON - { "require": {"fineuploader/php-s3-server": "1.1.0"}}
      3. Now to install the FineUploader php backend run - ./composer.phar install
    3. Next Step is to get the UI running on your Browser - Edit the <body> section in index.php to look like this:Screen_Shot_2018-08-16_at_5.39.14_PM.png
    4. Now create a Start script to start a PHP server run.
      1. Edit the file - vim startServer.sh
      2. Add the following lines:
        1. #!/bin/bash
        2. export AWS_SERVER_PUBLIC_KEY=YOUR_PUBLIC_ACCESS_KEY
        3. export AWS_SERVER_PRIVATE_KEY=YOUR_SECRET_KEY
        4. export AWS_CLIENT_SECRET_KEY=$AWS_SERVER_PRIVATE_KEY
        5. export S3_BUCKET_NAME=YOUR_BUCKET_NAME
        6. php -S 0.0.0.0:8080
      3. Now make sure the file executable run - chmod +x startupServer.sh
      4. Now to run the PHP server run - ./startupServer.sh
    5. Now use your favorite browser to go to http://127.0.0.1:8080 or http://0.0.0.0:8080
    6. You should see the following image shown below:Screen_Shot_2018-08-16_at_5.53.48_PM.png

NOTE: Currently FineUploader does not work with Wasabi and throws the following error while uploading a file - Invalid according to Policy: Policy Condition failed: [“eq”, “$Content-Type”, “image\/png”]

This is because currently Wasabi does not handle CORS exactly as Amazon does. It is a future enhancement under consideration.

Have more questions? Submit a request