How do I use FineUploader with Wasabi?

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

To run this you will need PHP which is already installed on OSX by default.
To install node.js you will require npm - Run brew install npm.
Please install composer as well. Just follow the instructions to install composer here https://getcomposer.org/download/.
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:
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.

Articles in this section