The following example using fineuploader is mostly based on the documentation available at https://docs.fineuploader.com/.
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 fineuploader-example.zip
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 https://brew.sh/.
brew install npm
To install ‘Composer’, follow the instructions on https://getcomposer.org/download/.
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
‘Vim’ is used as text editor in the command above and other commands ahead. Please replace this command by your editor of choice.
Add:
{
"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
Add:
<!DOCTYPE html>
<html>
<head>
<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>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</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>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<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>
</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
</button>
<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>
</div>
<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>
<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>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<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>
</div>
</dialog>
<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>
</div>
</dialog>
<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>
</div>
</dialog>
</script>
<title>Fine Uploader Gallery UI</title>
</head>
<body>
<div id="uploader"></div>
<script type="text/javascript">
var uploader = new qq.s3.FineUploader({
element: document.getElementById("uploader"),
debug: true,
request: {
endpoint: "http://s3-eu-west-1.amazonaws.com/YOUR_BUCKET_NAME",
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" }
});
</script>
</body>
</html>The upload key should always start with “upload/”, otherwise the item will not be uploaded unto the platform.
The request endpoint needs to be http://s3-eu-west-1.amazonaws.com/YOUR_BUCKET_NAME (you can find your bucket name in the URL: mm.YOUR_BUCKET_NAME.bbvms.com)
Create a startup script to start a development server:
vim startServer.sh
Add to the script:
#!/bin/bash export AWS_SERVER_PUBLIC_KEY=YOUR_PUBLIC_ACCESS_KEY export AWS_SERVER_PRIVATE_KEY=YOUR_SECRET_KEY export AWS_CLIENT_SECRET_KEY=$AWS_SERVER_PRIVATE_KEY export S3_BUCKET_NAME=YOUR_BUCKET_NAME php -d variables_order=EGPCS -d error_reporting=E_ERROR -S 0.0.0.0:8080
Make sure the file is executable:
chmod +x startupServer.sh
Now to run the development server:
./startupServer.sh
In your browser go to http://127.0.0.1:8080
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’.
<?php
require_once( 'bootstrap.php' );
$token = 'TOKEN_PROVIDED_BY_SUPPORT';
$vms = new VMSRpc('https://<PUBLICATION_NAME>.bbvms.com', 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 );
?>