ember.js


File Upload Component



CLone it, Fork it:


https://github.com/kylecoberly/ember-file-upload



The Problem:



How do you handle user file uploads?


WHat I Needed:


  • ┬áThumbnails for images
  • Handles single files
  • Easy configuration
  • Server-agnostic
  • Not too hacky
  • Not butt-ugly

What It Looks Like:



HOw To Use It:




  • label is what it will say on the control
  • uploadEndpoint is where it will upload new files
  • allowedMimeTypes is what MIME types are allowed
  • fileUrlBinding is the property on your controller to bind to




How To BUild It



  • Built with Ember-CLI
  • Files We'll Need:
    • Component Javascript
    • Component Template
    • Box View
    • Stylesheet

Building The Template





"If there's a thumbnail, show it. Otherwise, show me the upload box- unless there's already a file, then show me nothing."

Building The Template





"If the URL input field should be showing, display it. Otherwise, display a button that will toggle this- unless there's already a file, then show me nothing."

Building The Template




  • Namespace the container
  • Hide the file input
  • Have containers for progress/success/error messages

Building The VIew



Events to handle:
  • Click
  • DragEnter
  • DragOver
  • Drop

Don't forget tagName and classNames!

Building The Stylesheet




  • Use Namespacing
  • Try to stay framework-agnostic
  • Update your Brocfile

Building The Component Script


3 Functions:
  • validateFileType
  • updateImageThumbnail
  • watchFileUrl

2 Computed Properties:
  • isValidFileType
  • uploadPercentageComplete

BUILDING THE COMPONENT SCRIPT


7 Actions:
  • uploadFile
  • removeFile
  • clearMessages
  • openFileDialog
  • updateFile
  • toggleUrlVisible
  • processDroppedFile

Building The COmponent Script




  • The FileReader API
  • Not every property needs to be listed
  • Observers Rule
  • AJAXing a binary

Building an API Endpoint IN PHP



  • Slim REST Framework
  • CORS
  • OPTION
  • Uniqueness
  • Success and Error Handling

Stuff To Think About




  • Auth (Ember-Simple-Auth)
  • Retrieving files via a REST service
  • Validation

ember.jsFile Upload Component

By Kyle Coberly

ember.jsFile Upload Component

  • 504
Loading comments...

More from Kyle Coberly