File Upload Component

CLone it, Fork it:


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


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
  • 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