Ember-cli-file-picker

An addon for ember-cli that provides a component to easily add a filepicker to your ember-cli app.

It supports:

• A preview of the uploaded file
• A dropzone to drag and drop your file
• Currently it only support single file uploads but multiples will come soon

Installation

• ember install ember-cli-file-picker

Changelog

0.0.10

• [BUGFIX] Set input to null after select to fix webkit caching. @nicford-gojimo

0.0.9

• [BUGFIX] Restore preview after selecting 'cancel' from the browser file dialog. @quiaro

0.0.8

• [ENHANCEMENT] Add hideFileInput option to configure the file input visibility.

0.0.7

• [BUGFIX] filesAreValid was never called. @green-arrow

0.0.6

• removes "Binding style attributes..." warning

0.0.5

• ember-cli-file-picker now depends on ember >= 1.11.1

Usage

{{#file-picker fileLoaded="fileLoaded"}}
    Drag here or click to upload a file
{{/file-picker}}

Options

• accept default *
• multiple default false
• selectOnClick default true
• dropzone default true
• preview default true
• progress default true
• hideFileInput default true
• readAs default readAsFile
  • readAsFile
  • readAsArrayBuffer
  • readAsBinaryString
  • readAsDataURL
  • readAsText

Actions

• fileLoaded Implement fileLoaded in your controller to handle the file.

Example:

// app/controllers/image.js
import Ember from 'ember';
 
export default Ember.ObjectController.extend({
    actions: {
        fileLoaded: function(file) {
            // readAs="readAsFile"
            console.log(file.name, file.type, file.size);
            // readAs="readAsArrayBuffer|readAsBinaryString|readAsDataURL|readAsText"
            console.log(file.name, file.type, file.data, file.size);
            // There is also file.filename for backward compatibility
        }
    }
});

Bindings

• errors
• removePreview

Validations

If you need to validate the files you can subclass the component and add a filesAreValid method. The method should return a falsy value to stop file handling.

// app/components/file-picker.js
 
import Ember from 'ember';
import FilePicker from 'ember-cli-file-picker/components/file-picker';
 
export default FilePicker.extend({
  filesAreValid: function(files) {
    // do something with the files and add errors:
    this.get('errors').addObject('wrong file type');
    return false;
  }
});

CSS

The addon provides the following classes to style the file-picker:

• .file-picker(.single|multiple &.over)
  • .file-picker__preview
    • .file-picker__preview__image.single
    • .file-picker__preview__image.multiple
  • .file-picker__progress
    • .file-picker__preview__value
  • .file-picker__dropzone
  • .file-picker__input

Test helpers

ember-cli-file-picker exports a test helper for acceptance tests.

// tests/helpers/start-app.js
import './ember-cli-file-picker';
 
// tests/.jshintrc
{
  "predef": [
    "uploadFile"
  ]
}
 
// tests/acceptance/file-upload.js
import { test } from 'qunit';
import moduleForAcceptance from '../helpers/module-for-acceptance';
 
moduleForAcceptance('Acceptance | file upload');
 
test('visiting /file-upload', function(assert) {
  visit('/file-upload');
 
  // content is passed to [Blob() constructor](https://developer.mozilla.org/de/docs/Web/API/Blob/Blob)
  const content = [
    '"var";"value"\n',
    '"foo";"10"\n',
    '"bar";"20"'
  ];
  const filename = 'example.csv';
  const lastModifiedDate = new Date();
 
  // all arguments are optional
  uploadFile(content, filename, lastModifiedDate);
});

Use with CarrierWave

// app/models/post.js
import DS from 'ember-data';
 
var attr = DS.attr;
 
export default DS.Model.extend({
    image: attr('raw')
});

// app/transforms/raw.js
import DS from 'ember-data';
import Ember from 'ember';
 
export default DS.Transform.extend({
    deserialize: function(serialized) {
        return Ember.isNone(serialized) ? {} : serialized;
    },
 
    serialize: function(deserialized) {
        return Ember.isNone(deserialized) ? {} : deserialized;
    }
});

// app/templates/application.hbs
 
{{#file-picker
  accept=".jpg,.jpeg,.gif,.png"
  fileLoaded="fileLoaded"
  readAs="readAsDataURL"
}}

// app/controllers/application.js
import Ember from 'ember';
 
export default Ember.Controller.extend({
    actions: {
        fileLoaded: function(file) {
            var post = this.get('store').createRecord('post', {
                image: file
            });
            post.save();
        }
    }
});

class PostsController < ApplicationController
    def create
        params[:post][:image] = convert_to_upload(params[:post][:image])
        @post = Post.create(params)
    end
 
    protected
 
    def convert_to_upload(image)
        image_data = split_base64(image[:data])
 
        temp_img_file = Tempfile.new("data_uri-upload")
        temp_img_file.binmode
        temp_img_file << Base64.decode64(image_data[:data])
        temp_img_file.rewind
 
        ActionDispatch::Http::UploadedFile.new({ 
          filename: image[:name],
          type: image[:type],
          tempfile: temp_img_file
        })
    end
 
    def split_base64(uri_str)
        if uri_str.match(%r{^data:(.*?);(.*?),(.*)$})
            uri = Hash.new
            uri[:type] = $1 # "image/gif" 
            uri[:encoder] = $2 # "base64" 
            uri[:data] = $3 # data string 
            uri[:extension] = $1.split('/')[1] # "gif" 
            return uri
        end
    end
end

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Publishing

ember release
npm publish