Class: ImageUploaderView

ImageUploaderView()

A view that allows a person to upload an image to the repository

Constructor

new ImageUploaderView()

Source:

Extends

  • Backbone.View

Members

className :string

The HTML classes to use for this view's element
Type:
  • string
Source:

events :Object

The events this view will listen to and the associated function to call.
Type:
  • Object
Source:

height :number

The maximum display height of the image preview. This is only used for the css height propery, and doesn't influence the size of the saved image. If set to false, no css height property is set.
Type:
  • number
Source:

imageTagName :string

The HTML tag name to insert the uploaded image into. Options are "img", in which case the image is inserted as an HTML , or "div", in which case the image is inserted as the background of a div.
Type:
  • string
Source:

maxHeight :number

The maximum height for uploaded files. If a file is taller than this, it will be resized without warning before being uploaded. If set to null, the image won't be resized based on height (but might be depending on maxWidth).
Type:
  • number
Source:

maxWidth :number

The maximum width for uploaded files. If a file is wider than this, it will be resized without warning before being uploaded. If set to null, the image won't be resized based on width (but might be depending on maxHeight).
Type:
  • number
Source:

minHeight :number

The minimum required height of the image file. If set, the uploader will reject images that are shorter than this. If null, any image height is accepted.
Type:
  • number
Source:

minWidth :number

The minimum required height of the image file. If set, the uploader will reject images that are shorter than this. If null, any image height is accepted.
Type:
  • number
Source:

model :DataONEObject|PortalImage

The DataONEObject or PortalImage that is being edited
Type:
Source:

tagName :string

The HTML tag name to use for this view's element
Type:
  • string
Source:

template

References to templates for this view. HTML files are converted to Underscore.js templates
Source:

type :string

The type of View this is
Type:
  • string
Source:

uploadInstructions :Array.<string>

Text to instruct the user how to upload an image
Type:
  • Array.<string>
Source:

url :string

The URL for the image. If a DataONEObject model is provided to the view instead, the url is automatically set to the output of DataONEObject.url()
Type:
  • string
Source:

width :number

The display width of the image preview. This is only used for the css width propery, and doesn't influence the size of the saved image. If set to false, no css width property is set.
Type:
  • number
Source:

Methods

checkMinDimensions(width, height) → {string|boolean}

checkMinDimensions - called from dropzone's thumbnail function before the image is displayed. Checks that the image meets at least the minimum height and width requirements provided to view.minHeight and view.minWidth.
Parameters:
Name Type Description
width number the image's height.
height number the image's width.
Source:
Returns:
returns true if the image is at least as wide as and as tall as the given height and width. Otherwise returns an error message to display to the user.
Type
string | boolean

initialize(options)

Creates a new ImageUploaderView
Parameters:
Name Type Description
options Object A literal object with options to pass to the view
Properties:
Name Type Description
options.model DataONEObject Gets set as ImageUploaderView.model
options.uploadInstructions Array.<string> Gets set as ImageUploaderView.uploadInstructions
options.url string Gets set as ImageUploaderView.url
options.imageTagName string Gets set as ImageUploaderView.imageTagName
options.height number Gets set as ImageUploaderView.height
options.width number Gets set as ImageUploaderView.width
options.minWidth number Gets set as ImageUploaderView.minWidth
options.minHeight number Gets set as ImageUploaderView.minHeight
options.maxWidth number Gets set as ImageUploaderView.maxWidth
options.maxHeight number Gets set as ImageUploaderView.maxHeight
Source:

limitFileInput()

limitFileInput - Ensures only the most recently added image is shown in the upload zone, as we limit each zone to 1 image but dropzone is designed to accept multiple files. Called whenever a file is added to a dropzone element.
Source:

prepareD1Model(object, filename, filetype, callback)

prepareD1Model - Called once an image file is resized or once it's determined the the image does not need to be resized. This function adds data about the image added by the user to a new DataOne model, then calculates the checksum. When the checksum is finished being calculated, calls the callback function (i.e. dropzone's done()).
Parameters:
Name Type Description
object Blob | File Either the Blob or File to be saved to the server
filename string the name of the file
filetype string the filetype
callback function a function to call once the checksum is calculated.
Source:

previewImageRemove()

previewImageRemove - When the user hovers over the remove button, indicates to the user that the button will remove the image by 1) changing the upload instruction text to a message about removing the image, and 2) adding a warning class to the message div.
Source:

render()

Renders this view
Source:

showError(dropzoneEl)

showError - Indicates to the user that the image uploader may not work due to browser issues.
Parameters:
Name Type Description
dropzoneEl jQuery The dropzone element to show the error for.
Source:

showImage(file, dataURL)

showImage - General function for displaying an image file in the upload zone, whether just added or already uploaded. This is the function that we use to override dropzone's thumbnail() function. It displays the image as the background of a div if this view's imageTagName attribute is set to "div", or as an image element if imageTagName is set to "img".
Parameters:
Name Type Description
file object Information about the image file
dataURL string A URL for the image to be displayed
Source:

showSavedImage()

Display an image in the upload zone that's already saved. This gets called when an image url is provided to this view.
Source: