filepond config

filepond.coffee

#= require filepond/dist/filepond
#= require filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type
#= require filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size
#= require filepond-plugin-image-validate-size/dist/filepond-plugin-image-validate-size
#= require filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation
#= require filepond-plugin-image-transform/dist/filepond-plugin-image-transform
#= require filepond-plugin-image-preview/dist/filepond-plugin-image-preview
#= require filepond-plugin-image-resize/dist/filepond-plugin-image-resize
document.addEventListener 'FilePond:loaded', (e) ->
  console.log 'FilePond ready for use', e.detail
FilePond.registerPlugin FilePondPluginFileValidateType, FilePondPluginFileValidateSize, FilePondPluginImageValidateSize, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageTransform

'use strict'
FilePond.setOptions server: process: (fieldName, file, metadata, load, error, progress, _abort, transfer, options) ->
  # fieldName is the name of the input field
  # file is the actual file object to send
  formData = new FormData
  formData.append fieldName, file, file.name
  request = new XMLHttpRequest
  request.open 'POST', 'url-to-api'
  # Should call the progress method to update the progress to 100% before calling load
  # Setting computable to false switches the loading indicator to infinite mode

  request.upload.onprogress = (e) ->
    progress e.lengthComputable, e.loaded, e.total
    return

  # Should call the load method when done and pass the returned server file id
  # this server file id is then used later on when reverting or restoring a file
  # so your server knows which file to return without exposing that info to the client

  request.onload = ->
    if request.status >= 200 and request.status < 300
      # the load method accepts either a string (id) or an object
      load request.responseText
    else
      # Can call the error method if something is wrong, should exit after
      error 'oh no'
    return

  request.send formData
  # Should expose an abort method so the request can be cancelled
  { abort: ->
    # This function is entered if the user has tapped the cancel button
    request.abort()
    # Let FilePond know the request has been cancelled
    _abort()
    return
 }

# ---
# generated by js2coffee 2.2.0

pond = FilePond.create document.querySelector('input'),
  labelIdle: 'Drag & Drop your picture or <span class="filepond--label-action">Browse</span>'
  allowImagePreview: true
  imagePreviewHeight: 170
  imageCropAspectRatio: '1:1'
  allowImageResize: true
  imageResizeMode: 'contain'
  imageResizeUpscale: false
  imageResizeTargetWidth: 640
  imageResizeTargetHeight: 640
  stylePanelLayout: 'compact'
  stylePanelAspectRatio: '1:1'
  styleItemPanelAspectRatio: '1:1'
  styleLoadIndicatorPosition: 'center bottom'
  styleProgressIndicatorPosition: 'right bottom'
  styleButtonRemoveItemPosition: 'left bottom'
  styleButtonProcessItemPosition: 'right bottom'
  allowFileSizeValidation: true
  maxTotalFileSize: '10MB'
  acceptedFileTypes: [ 'image/*' ]
  allowImageExifOrientation: true
  allowImageValidateSize: true
  imageValidateSizeMinWidth: 640
  imageValidateSizeMaxWidth: 5000
  imageValidateSizeMinHeight: 640
  imageValidateSizeMaxHeight: 5000
  allowImageTransform: true
  imageTransformOutputMimeType: 'image/jpeg'
  imageTransformOutputQuality: 95
  imageTransformOutputQualityMode: 'always'
  imageCropAspectRatio: 1
  maxFiles: 1
  required: true
  imageTransformVariants: 'default': (transforms) ->
    transforms.resize.size.width = 640
    transforms

console.log pond.name
# 'filepond'
console.log pond.maxFiles
# 10
console.log pond.required
# true
console.log pond.allowMultiple
# true
pond.addEventListener 'FilePond:addfile', (e) ->
  console.log 'File added', e.detail

# ---
# generated by js2coffee 2.2.0