Universe files
This package aims make file uploading easy by less configuration requirement but still be configurable. Universe Files package includes both S3-based and local filesystem-based backend.
Additionally:
- it includes handlers for uploading and access point for local storing,
- it offers also an image resizing.
- uploading access control
Everything works on top of uploadfs package, so you can easily implement more features.
Installation
$ meteor add universe:files
Storing files
As a default option this package stores files locally. Because of that this package is auto configured, storing of files should work out of the box in most cases.
Storing in Amazon S3
If you want to store files in amazon s3,
you should just attach configuration in Meteor Settings
under key universe:files
.
Just like following example:
1{ 2 "universe:files": { 3 "s3": { 4 "bucket": "my-bucket", 5 "region": "eu-west-1", 6 "key": "FAKEWJ62U26K6FAKE", 7 "secret": "Fake+4sdf/LZzBYWARg8O6LKS0XsRspwFake" 8 }, 9 //Optional 10 "uploadsUrl": "https://s3-eu-west-1.amazonaws.com/bizmaster-test" 11 } 12}
Changing default configuration:
- uploadsPath - the place at server, where are stored files
- tempPath - the place at server, where are stored temporary files
- uploadsUrl - name of handler or url where are localized files for www access.
- uploadingUrl - name of handler for uploading point
- acceptFileTypes - acceptable extensions separated by char
|
example:gif|jpe?g|png|pdf|doc?x|zip|rar|pages|abw|odt|ps|txt|md
- maxFileSizeKB - size of uploading file (default: 2048),
- imageSizes - array of available sizes of images, like following:
default sizes:
1[ 2 { 3 name: 'small', 4 width: 128, 5 height: 128 6 }, 7 { 8 name: 'medium', 9 width: 512, 10 height: 512 11 }, 12 { 13 name: 'large', 14 width: 1024, 15 height: 1024 16 } 17]
Uploading
Uploading is made on top of upload-file
package,
Url for handling file uploads over HTTP (multipart form data)
by method getUploadingUrl
(it's a reactive source of data)
import FileCollection from 'meteor/universe:files'; Tracker.autorun(function () { //log url for files console.log(FileCollection.getUploadingUrl()); //log url for images (will make sizes) console.log(FileCollection.getUploadingUrl(true)); });
Uploading example
with using jquery-simple-upload
package.
1<template name='imageForm'> 2 <input type="file" name="file"> 3</template>
1import FileCollection from 'meteor/universe:files'; 2import {Template} from 'meteor/templating'; 3import 'jquery-simple-upload'; 4 5Template.imageForm.events({ 6 'change input[type=file]' (e, tmpl) { 7 tmpl.$(e.target).simpleUpload(FileCollection.getUploadingUrl(), { 8 start: function (file) { 9 //upload started 10 console.log('upload started', file); 11 }, 12 progress (progress) { 13 //received progress 14 console.log('upload progress: ' + Math.round(progress) + '%'); 15 }, 16 success (data) { 17 //upload successful 18 console.log('upload successful!'); 19 console.log(data); 20 }, 21 error (error) { 22 //upload failed 23 console.log('upload error: ' + error.name + ': ' + error.message); 24 } 25 }); 26 } 27});
In response you will be have a json data
- on success:
{"file":{"_id":"vnSvFbGFWA7SYudmm","path":"file/vnSvFbGFWA7SYudmm.png"}}
- on error:
- if global error:
{"error":"uploading","reason":"File type not allowed","message":"File type not allowed [uploading]","errorType":"Meteor.Error"}
- if only for some file (in processing step):
{"file":"{\"error\":\"processing\",\"reason\":\"fs is not defined\",\"message\":\"fs is not defined [processing]\",\"errorType\":\"Meteor.Error\"}"}
Access control
As a default option, anyone can upload files but you can limit it by allow/deny functions.
You can do it with upload
key, just like you did for insert or update function.
1 2import FileCollection from 'meteor/universe:files'; 3 4FileCollection.allow({ 5 upload (userId, queries, request) { 6 return !!userId; 7 } 8}); 9
Getting url
As you can see successful uploading return id and path inside store. Path you can find also in file document in FileCollection
You can call getFullFileUrl(path)
or getFullImageUrl(path, size)
(for images)
with this path. As a return you will be get url to resource.
Both of functions (getFullFileUrl
or getFullImageUrl
) are
reactive data source.
example:
import FileCollection from 'meteor/universe:files'; FileCollection.getFullImageUrl('file/abdf533f67.jpg', 'small); //output (if s3): http://test.s3.amazonaws.com/file/abdf533f67.small.jpg
Removing files
To remove a file you need just remove document from file collection
import FileCollection from 'meteor/universe:files'; FileCollection.remove(idOrSelector);