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
