Direct AWS S3 Upload

The following example using fineuploader is mostly based on the documentation available at


The following is merely an example for how to upload files to S3. There might be implementations that are better suited for your specific workflow.

Example code can be found here

CL commands mentioned in this article might differ when using linux/unix or Windows.

To run this code you will need php (pre-installed on OS X).

Please make sure php.ini contains the correct settings: [variables_order = “EGPCS” and error_reporting = E_ERROR] These settings make sure that environment variables can be used in php and errors will not show up in the json that’s returned from the fineuploader endpoint.

If you’re reluctant to install npm and Composer on your mac, there’s example code with all of the requirements to start working right away.

The easiest way to install node.js is using homebrew

brew install npm

To install ‘Composer’, follow the instructions on

Now we can build our application.

Create a new directory called ‘fineuploader-example’:

mkdir fineuploader-example
cd fineuploader-example

To install the javascript version of fine-uploader:

echo "{}" > package.json
npm install fine-uploader

(Warnings from npm can be ignored)

To install the php backend of fine-uploader:

vim composer.json
Text editor

‘Vim’ is used as text editor in the command above and other commands ahead. Please replace this command by your editor of choice.


  "require": {
    "fineuploader/php-s3-server": "1.1.0"

Install the fineuploader php backend:

./composer.phar install

To display basic content in the browser:

vim index.php


<!DOCTYPE html>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="node_modules/fine-uploader/s3.fine-uploader/fine-uploader-gallery.min.css" rel="stylesheet">
        <script src="node_modules/fine-uploader/s3.fine-uploader/s3.fine-uploader.min.js""></script>
        <script type="text/template"id="qq-template">
            <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
                <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
                <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                    <span class="qq-upload-drop-area-text-selector"></span>
                <div class="qq-upload-button-selector qq-upload-button">
                    <div>Upload a file</div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                    <div class="qq-progress-bar-container-selector qq-progress-bar-container">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <div class="qq-thumbnail-wrapper"> <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale></div>
                    <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
                    <button type="button" class="qq-upload-retry-selector qq-upload-retry">
                        <span class="qq-btn qq-retry-icon" aria-label="Retry"></span> Retry
                    <div class="qq-file-info">
                        <div class="qq-file-name">
                            <span class="qq-upload-file-selector qq-upload-file"></span>
                            <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
                        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                        <span class="qq-upload-size-selector qq-upload-size"></span>
                        <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
                            <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
                        <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
                            <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
                        <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
                            <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
        <title>Fine Uploader Gallery UI</title>
        <div id="uploader"></div>
        <script type="text/javascript">
            var uploader = new qq.s3.FineUploader({
                element: document.getElementById("uploader"),
                debug: true,
                request: {
                    endpoint: "",
                    accessKey: "YOUR_PUBLIC_ACCESS_KEY" },
                    objectProperties: {
                        acl: "public-read-write",
                        key: function (id) {
                            var date = new Date();
                            var year = date.getUTCFullYear();
                            var month = date.getMonth() < 10 ? '0' + date.getMonth() : date.getMonth();
                            var day = date.getDay() < 10 ? '0' + date.getDay() : date.getDay(); // In order to process the file it should be placed in the upload "folder" on S3
                            var filename = 'upload/' + '<publication_name>' + '/' + year + '/' + month + '/' + day + '/' + this.getName(id); return filename;
                    signature: { endpoint: "/vendor/fineuploader/php-s3-server/endpoint.php" },
                    uploadSuccess: { endpoint: "/vendor/fineuploader/php-s3-server/endpoint.php?success" },
                    iframeSupport: { localBlankPagePath: "success.html" },
                    chunking: { enabled: true, concurrent: { enabled: true }
                resume: { enabled: true },
                retry: { enableAuto: true, showButton: true },
                deleteFile: { enabled: true, endpoint: "/vendor/fineuploader/php-s3-server/endpoint.php" } 
Upload key

The upload key should always start with “upload/”, otherwise the item will not be uploaded unto the platform.

Bucket name

The request endpoint needs to be (you can find your bucket name in the URL:

Create a startup script to start a development server:


Add to the script:

php -d variables_order=EGPCS -d error_reporting=E_ERROR -S

Make sure the file is executable:

chmod +x

Now to run the development server:


In your browser go to

This should display the image below:

Now you should be able to upload images to S3.

Add metadata to a file that’s uploaded

To upload metadata to the VMS we recommend using the VMS Rpc for php or java.

To add metadata to a file that has been uploaded using fineuploader, we’re using the filename. Uploading a file with filename ‘test-2313425536.mxf’ will translate to a sourceid value of ‘test-2313425536.mxf’.

require_once( 'bootstrap.php' );

$vms = new VMSRpc('https://<PUBLICATION_NAME>', null, null, $token);

$properties = array('srcid'=>'test-2313425536.mxf,'xml' => '<media-clip title="New mediaclip" status="published" sourceid="test-2313425536.mxf"></media-clip>');
$result = $vms->doAction('mediaclip', 'put', $properties);

print_r( $result );


Was this article helpful?

Related Articles

Contact Support
Can't find the answer you're looking for?
Contact Support