Name: Meteor-cfs-ui
Owner: CollectionFS
Description: Provides additional UI helpers for CollectionFS
Created: 2014-04-18 00:29:24.0
Updated: 2016-10-10 03:44:46.0
Pushed: 2016-02-13 06:02:39.0
Homepage: https://atmospherejs.com/cfs/ui
Size: 204
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Provides additional UI helpers for CollectionFS. Requires Meteor 0.8.0 or higher.
Install using Meteorite. When in a Meteor app directory, enter:
teor add cfs:ui
The following components and helpers are available.
Allows you to get an FS.File
instance by knowing its _id
and the name of the collection it's in.
ith FS.GetFile collectionName id}}
here, we can use the FS.File instance methods that work as helpers, such as {{url}} or {{isImage}}
ith}}
Example:
ith FS.GetFile "images" selectedImageId}}
mg src="{{this.url store='thumbnails'}}" alt="">
ith}}
Renders a delete button. Must be used where the current context is the FS.File
instance that you want to delete.
ach images}}
lete {{this.name}}: {{> FS.DeleteButton class="btn btn-danger btn-xs"}}
ach}}
By default, the button says “Delete”. If you want to use different text or HTML within the button element, simply use the component as a block helper, like this:
ach images}}
lete {{this.name}}: {{#FS.DeleteButton class="btn btn-danger btn-xs"}}Delete Me{{/FS.DeleteButton}}
ach}}
Renders a reactive progress bar, showing either the upload progress for a single file or the upload progress for all files currently being uploaded.
Use where the current context is the FS.File
instance for which you want progress:
ach images}}
#unless this.isUploaded}}
> FS.UploadProgressBar}}
/unless}}
ach}}
You can optionally add attributes such as class
.
By default, an HTML5 progress element is rendered. To render a bootstrap3 progress bar instead:
FS.UploadProgressBar bootstrap=true}}
Any HTML attributes you add, such as class, are added to the div.progress-bar
, so you could add the progress-bar-success
class. With the most recent version of bootstrap, it is valid to add progress-striped
or active
classes to div.progress-bar
, so these attributes would also be acceptable. An additional option to show the percantage text on top of the progress bar is toggled using the showPercent
attribute. An example of a green, striped, animated progress bar with the percantage text overlayed is shown below.
FS.UploadProgressBar bootstrap=true class='progress-bar-success progress-bar-striped active' showPercent=true}}
To render a semantic-ui progress bar instead:
FS.UploadProgressBar semantic=true}}
Any HTML attributes you add, such as class, are added to the outer div.
If you want the progress bar to reflect the combined progress of all files currently being uploaded, don't use it
with an FS.File
instance as the context.
This package also provides one event handler creator.
Simplifies some of the repetitive code for making an event handler that does a file insert.
FS.Collection
instance.FS.File
instance as its argument and returns an object containing the metadata to be added to the file object.FS.Collection.insert
call.Example:
late.files.events({
'dropped .imageArea': FS.EventHandlers.insertFiles(Images, {
metadata: function (fileObj) {
return {
owner: Meteor.userId(),
foo: "bar"
};
},
after: function (error, fileObj) {
console.log("Inserted", fileObj.name);
}
}),
'change #imageInput': FS.EventHandlers.insertFiles(Images, {
metadata: function (fileObj) {
return {
owner: Meteor.userId(),
foo: "bar"
};
},
after: function (error, fileObj) {
console.log("Inserted", fileObj.name);
}
}),
By using this function to create your event handlers for input change events and the dropped
event (provided by the raix:ui-dropped-event
package), you don't have to write any of the code to loop over files, convert File
to FS.File
, attach metadata, or perform the insert.