Uploadcare library wrapped into a Meteor package.
Uploadcare handles uploads, so you donβt have to! Beautiful upload widget, API to manage files in cloud storage, smart and fast CDN to deliver them to your end users. Crop, resize and transform uploaded images using URL commands.
Real life Meteor app example:
Look at the beautiful Uploadcare integration in Alpheratz β personal gallery service on Meteor.
meteor add maximdubrovin:uploadcare
Set your public key. This can go to the <head>
of your Meteor app:
<head>
...
<script>
UPLOADCARE_PUBLIC_KEY = 'demopublickey';
</script>
...
<head/>
demopublickey
will work for testing purpose.
Place this input
element somewhere in your templates:
<input type="hidden" name="picture" role="uploadcare-uploader" data-crop />
The library looks for an input with special role
attribute, and places a widget there.
As soon as the file is uploaded, this input
will receive file UUID or CDN link.
To get file URL and other info after upload is finished, you need to get the widget instance for a given input element.
var widget = uploadcare.Widget('[role=uploadcare-uploader]');
And listen widget.onUploadComplete()
widget.onUploadComplete(function(fileInfo) {
console.log('fileInfo,' fileInfo);
console.log('file UUID', fileInfo.uuid);
console.log('fileInfo.originalUrl', fileInfo.originalUrl); // Public CDN URL of the uploaded file, without any operations.
});
Now you can save file URL
and UUID
to the database for further usage.
You can apply various image operations on uploaded images, such as resize, crop, blur, rotate, return progressive jpeg image, set image quality and much more, by appending CDN commands on the original URL.
Examples of URL image operations:
http://www.ucarecdn.com/c5b7dd84-c0e2-48ff-babc-d23939f2c6b4/-/preview/480x480/-/quality/lightest/
http://www.ucarecdn.com/9eaf4b7b-6688-43e9-a6e5-9690142d765a/-/preview/-/blur/10/
http://www.ucarecdn.com/13448644-f240-4171-bad7-8e079eee491a/-/preview/-/grayscale/
The widget starts uploading immediately after user chooses a file. It speeds up interaction with your app, and makes UI async, allowing users to do other stuff while the file is still uploading. This can be a real time saver.
By default uploaded files will be available in Uploadcare storage for 24 hours from URL or UUID (via REST API).
Why? To prevent overwhelming your project with unneeded files, to avoid exceeding your plan limits, and to protect you from risk of abusing your public key by malicious users. You may store each uploaded file permanently, or delete it, using REST API on your Meteor back-end.
Since REST API manipulations must be secure, they require both your public and secret keys.
Easiest and the most secure way to provide your Uploadcare keys to Meteor back-end code is placing them to Meteor.settings by creating a settings.json
file:
{
"uploadcare": {
"public_key": "xxx...",
"secret_key": "yyy..."
}
}
Use the command to run local Meteor app with these settings:
meteor --config /path/to/settings.json
See notes on deploying Meteor app with settings.json
at Meteor Up tool.
To use Uploadcare REST API within Meteor back-end code, you have to make HTTP requests to Uplodacare infrastructure using HTTP package:
meteor add http
Client-side call to your back-end:
Meteor.call('storeOnUplodcare', uuid, function(err, res) {});
Meteor.call('deleteFromUploadcare', uuid, function(err, res) {});
Server-side method:
Future = Npm && Npm.require('fibers/future');
Meteor.methods({
storeOnUplodcare: function(uuid)
{
check(uuid, String);
this.unblock();
var future = new Future();
HTTP.call(
'PUT',
'https://api.uploadcare.com/files/' + uuid + '/storage/',
{
headers: {
Accept: 'application/vnd.uploadcare-v0.3+json',
Date: new Date().toJSON(),
Authorization: 'Uploadcare.Simple ' + Meteor.settings.uploadcare.public_key + ':' + Meteor.settings.uploadcare.secret_key
}
},
function(err)
{
if (err)
{
future.return(err, null)
}
else
{
future.return(null, true)
}
}
);
return future.wait();
},
deleteFromUploadcare: function(uuid)
{
check(uuid, String);
this.unblock();
var future = new Future();
HTTP.call(
'DELETE',
'https://api.uploadcare.com/files/' + uuid + '/',
{
headers: {
Accept: 'application/vnd.uploadcare-v0.3+json',
Date: new Date().toJSON(),
Authorization: 'Uploadcare.Simple ' + Meteor.settings.uploadcare.public_key + ':' + Meteor.settings.uploadcare.secret_key
}
},
function(err)
{
if (err)
{
future.return(err, null)
}
else
{
future.return(null, true)
}
}
);
return future.wait();
}
});
Notes:
Place back-end code in the following directory of your Meteor project: meteor-app/server/methods_server.js
. It will prevent serving this code to client.
I use fibers/future
to get async callbacks on client.
You may need to make sure that file identifier exists in your database before making API calls to store the file permanently.