1.2.4 • Published 8 years ago
ampersand-file-drop-view v1.2.4
ampersand-file-drop-view
Drag-and-drop file view based on ampersand-view, and for use in ampersand-form-view.
Example
Use with ampersand-form-view
:
var FormView = require('ampersand-form-view');
var FileDropView = require('ampersand-file-drop-view');
new FormView({
fields: function() {
return [
new FileDropView({
holderClass: "file-drop-holder",
name: "files",
multiple: true,
accept: "image/*,video/*",
parent: this
})
];
}
});
For a live demo, git clone
this repo, run npm install
to install the dependencies, and npm run demo
to start a small local server that hosts the demo html page.
Constructor Options
name
String. Required. Name to use. Used byampersand-form-view
label
String. Label to use for the view. Can be falsy to hide label. Defaults to"Drag and drop a file"
.required
Boolean. Whether or not this view needs to have files. Defaults tofalse
value
Array. If present, the starting value must be an array ofFile
orBlob
objects.multiple
Boolean. Whether to allow one or multiple files. Defaults tofalse
accept
String/Array. Which mime types to allow. Comma separated if string. Defaults to"*/*"
holderClass
String. Class to use for the main container. Defaults to"file-holder"
.holderHoverClass
String. Class to use for the main container when hovering with a selection over the main container. Defaults to"file-holder-hover"
.documentHoverClass
String. Class to use for the main container when hovering with a selection over the document body element. Defaults to"document-hover"
.hasFilesClass
String. Class to use for the field has files. Defaults to"has-files"
.itemViewOptions
Object. Options object to pass to individual item views (see below)mainIndex
String. Which property of the file to use to index. Indexing by a property such asname
can prevent duplicates being added. See ampersand-collection for more information.
Item View Constructor Options (itemViewOptions
)
displayPreview
Boolean. Whether or not to display an image preview, if available. Defaults tofalse
.fileSizeUnit
String. Which file size unit to use. E.g.: "kb", "mb", "gb", etc. Defaults to"kb"
.
Methods
setValue(files)
files
is an array ofFile
orBlob
objects. - sets thevalue
of the view tofiles
addFiles(files)
files
is an array ofFile
orBlob
objects. - appends thevalue
of the view withfiles
clear()
- empties the view'svalue
of all filesreset()
- sets the view'svalue
to thevalue
passed in through the view's constructor options
Tests
Run tests with npm test
Changelog
v1.0.0
- ampersand-view-conventions compliance - supports setting a value (an array of File or Blob-like objects) programatically, including as an initial value
- more reliable triggering of classes when hovering over the body or the file-holder element
- addition of
hasFilesClass
- addition of
addFiles
method (previoushandleFiles
)
License
MIT
1.2.4
8 years ago
1.2.3
8 years ago
1.2.2
8 years ago
1.2.0
8 years ago
1.1.1
8 years ago
1.1.0
8 years ago
1.0.0
8 years ago
0.1.4
8 years ago
0.1.3
9 years ago
0.1.2
9 years ago
0.1.1
9 years ago
0.1.0
9 years ago
0.0.8
9 years ago
0.0.7
9 years ago
0.0.6
9 years ago
0.0.5
9 years ago
0.0.4
9 years ago
0.0.3
9 years ago
0.0.2
9 years ago
0.0.1
9 years ago
0.0.0
9 years ago