FineUploader With Wasabi

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 section in index.php to look like this:

   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:

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.