Skip to content

Drag-and-drop file view build on ampersand-view, and for use in ampersand-form-view

License

Notifications You must be signed in to change notification settings

dhritzkiv/ampersand-file-drop-view

Repository files navigation

ampersand-file-drop-view

Build Status Monthly npm downloads Greenkeeper badge

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 by ampersand-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 to false
  • value Array. If present, the starting value must be an array of File or Blob objects.
  • multiple Boolean. Whether to allow one or multiple files. Defaults to false
  • 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 as name 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 to false.
  • fileSizeUnit String. Which file size unit to use. E.g.: "kb", "mb", "gb", etc. Defaults to "kb".

Methods

  • setValue(files) files is an array of File or Blob objects.
    • sets the value of the view to files
  • addFiles(files) files is an array of File or Blob objects.
    • appends the value of the view with files
  • clear()
    • empties the view's value of all files
  • reset()
    • sets the view's value to the value 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 (previous handleFiles)

License

MIT

About

Drag-and-drop file view build on ampersand-view, and for use in ampersand-form-view

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •