├── app ├── .gitkeep └── components │ └── image-drop.js ├── addon ├── .gitkeep ├── templates │ └── components │ │ └── image-drop.hbs ├── styles │ └── addon.css └── components │ └── image-drop.js ├── vendor └── .gitkeep ├── tests ├── unit │ └── .gitkeep ├── dummy │ ├── app │ │ ├── helpers │ │ │ └── .gitkeep │ │ ├── models │ │ │ └── .gitkeep │ │ ├── routes │ │ │ └── .gitkeep │ │ ├── components │ │ │ └── .gitkeep │ │ ├── controllers │ │ │ ├── .gitkeep │ │ │ └── application.js │ │ ├── templates │ │ │ ├── components │ │ │ │ └── .gitkeep │ │ │ └── application.hbs │ │ ├── styles │ │ │ └── app.css │ │ ├── router.js │ │ ├── app.js │ │ └── index.html │ ├── public │ │ ├── robots.txt │ │ └── crossdomain.xml │ └── config │ │ └── environment.js ├── test-helper.js ├── helpers │ ├── resolver.js │ └── start-app.js ├── .jshintrc ├── index.html └── integration │ └── components │ └── image-drop-test.js ├── .watchmanconfig ├── .bowerrc ├── index.js ├── config ├── environment.js └── ember-try.js ├── .npmignore ├── testem.json ├── .ember-cli ├── .gitignore ├── ember-cli-build.js ├── bower.json ├── .jshintrc ├── .editorconfig ├── LICENSE.md ├── .travis.yml ├── package.json └── README.md /app/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /addon/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vendor/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/unit/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/helpers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/models/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": ["tmp"] 3 | } 4 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components", 3 | "analytics": false 4 | } 5 | -------------------------------------------------------------------------------- /app/components/image-drop.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-image-drop/components/image-drop'; -------------------------------------------------------------------------------- /tests/dummy/public/robots.txt: -------------------------------------------------------------------------------- 1 | # http://www.robotstxt.org 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /tests/dummy/app/styles/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: Helvetica Neue; 3 | margin: 40px; 4 | } 5 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/application.hbs: -------------------------------------------------------------------------------- 1 | {{image-drop file=file image=image placeholder="Company Logo"}} 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* jshint node: true */ 2 | 'use strict'; 3 | 4 | module.exports = { 5 | name: 'ember-image-drop' 6 | }; 7 | -------------------------------------------------------------------------------- /config/environment.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(/* environment, appConfig */) { 4 | return { }; 5 | }; 6 | -------------------------------------------------------------------------------- /tests/test-helper.js: -------------------------------------------------------------------------------- 1 | import resolver from './helpers/resolver'; 2 | import { 3 | setResolver 4 | } from 'ember-qunit'; 5 | 6 | setResolver(resolver); 7 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/application.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Controller.extend({ 4 | image: null, 5 | file: null 6 | }); 7 | -------------------------------------------------------------------------------- /addon/templates/components/image-drop.hbs: -------------------------------------------------------------------------------- 1 | {{yield}} 2 |
3 |

{{placeholder}}

4 |

{{helpText}}

5 |
6 | 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | tests/ 3 | tmp/ 4 | dist/ 5 | 6 | .bowerrc 7 | .editorconfig 8 | .ember-cli 9 | .travis.yml 10 | .npmignore 11 | **/.gitkeep 12 | bower.json 13 | ember-cli-build.js 14 | Brocfile.js 15 | testem.json 16 | -------------------------------------------------------------------------------- /testem.json: -------------------------------------------------------------------------------- 1 | { 2 | "framework": "qunit", 3 | "test_page": "tests/index.html?hidepassed", 4 | "disable_watching": true, 5 | "launch_in_ci": [ 6 | "PhantomJS" 7 | ], 8 | "launch_in_dev": [ 9 | "PhantomJS", 10 | "Chrome" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /tests/dummy/app/router.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import config from './config/environment'; 3 | 4 | var Router = Ember.Router.extend({ 5 | location: config.locationType 6 | }); 7 | 8 | Router.map(function() { 9 | }); 10 | 11 | export default Router; 12 | -------------------------------------------------------------------------------- /.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false 9 | } 10 | -------------------------------------------------------------------------------- /tests/helpers/resolver.js: -------------------------------------------------------------------------------- 1 | import Resolver from 'ember/resolver'; 2 | import config from '../../config/environment'; 3 | 4 | var resolver = Resolver.create(); 5 | 6 | resolver.namespace = { 7 | modulePrefix: config.modulePrefix, 8 | podModulePrefix: config.podModulePrefix 9 | }; 10 | 11 | export default resolver; 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | /bower_components 10 | 11 | # misc 12 | /.sass-cache 13 | /connect.lock 14 | /coverage/* 15 | /libpeerconnection.log 16 | npm-debug.log 17 | testem.log 18 | -------------------------------------------------------------------------------- /tests/dummy/app/app.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import Resolver from 'ember/resolver'; 3 | import loadInitializers from 'ember/load-initializers'; 4 | import config from './config/environment'; 5 | 6 | var App; 7 | 8 | Ember.MODEL_FACTORY_INJECTIONS = true; 9 | 10 | App = Ember.Application.extend({ 11 | modulePrefix: config.modulePrefix, 12 | podModulePrefix: config.podModulePrefix, 13 | Resolver: Resolver 14 | }); 15 | 16 | loadInitializers(App, config.modulePrefix); 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /ember-cli-build.js: -------------------------------------------------------------------------------- 1 | /* global require, module */ 2 | var EmberApp = require('ember-cli/lib/broccoli/ember-addon'); 3 | 4 | module.exports = function(defaults) { 5 | var app = new EmberApp(defaults, { 6 | // Add options here 7 | }); 8 | 9 | /* 10 | This build file specifes the options for the dummy test app of this 11 | addon, located in `/tests/dummy` 12 | This build file does *not* influence how the addon or the app using it 13 | behave. You most likely want to be modifying `./index.js` or app's build file 14 | */ 15 | 16 | return app.toTree(); 17 | }; 18 | -------------------------------------------------------------------------------- /tests/helpers/start-app.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import Application from '../../app'; 3 | import config from '../../config/environment'; 4 | 5 | export default function startApp(attrs) { 6 | var application; 7 | 8 | var attributes = Ember.merge({}, config.APP); 9 | attributes = Ember.merge(attributes, attrs); // use defaults, but you can override; 10 | 11 | Ember.run(function() { 12 | application = Application.create(attributes); 13 | application.setupForTesting(); 14 | application.injectTestHelpers(); 15 | }); 16 | 17 | return application; 18 | } 19 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-image-drop", 3 | "dependencies": { 4 | "ember": "2.3.0", 5 | "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", 6 | "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", 7 | "ember-data": "2.3.0", 8 | "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5", 9 | "ember-qunit": "0.4.2", 10 | "ember-qunit-notifications": "0.0.7", 11 | "ember-resolver": "~0.1.18", 12 | "jquery": "^1.11.1", 13 | "loader.js": "ember-cli/loader.js#3.2.0", 14 | "qunit": "~1.18.0" 15 | }, 16 | "resolutions": { 17 | "ember": "2.3.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "document", 4 | "window", 5 | "-Promise" 6 | ], 7 | "browser": true, 8 | "boss": true, 9 | "curly": true, 10 | "debug": false, 11 | "devel": true, 12 | "eqeqeq": true, 13 | "evil": true, 14 | "forin": false, 15 | "immed": false, 16 | "laxbreak": false, 17 | "newcap": true, 18 | "noarg": true, 19 | "noempty": false, 20 | "nonew": false, 21 | "nomen": false, 22 | "onevar": false, 23 | "plusplus": false, 24 | "regexp": false, 25 | "undef": true, 26 | "sub": true, 27 | "strict": false, 28 | "white": false, 29 | "eqnull": true, 30 | "esnext": true, 31 | "unused": true 32 | } 33 | -------------------------------------------------------------------------------- /tests/dummy/public/crossdomain.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | indent_style = space 14 | indent_size = 2 15 | 16 | [*.js] 17 | indent_style = space 18 | indent_size = 2 19 | 20 | [*.hbs] 21 | insert_final_newline = false 22 | indent_style = space 23 | indent_size = 2 24 | 25 | [*.css] 26 | indent_style = space 27 | indent_size = 2 28 | 29 | [*.html] 30 | indent_style = space 31 | indent_size = 2 32 | 33 | [*.{diff,md}] 34 | trim_trailing_whitespace = false 35 | -------------------------------------------------------------------------------- /tests/dummy/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dummy 7 | 8 | 9 | 10 | {{content-for 'head'}} 11 | 12 | 13 | 14 | 15 | {{content-for 'head-footer'}} 16 | 17 | 18 | {{content-for 'body'}} 19 | 20 | 21 | 22 | 23 | {{content-for 'body-footer'}} 24 | 25 | 26 | -------------------------------------------------------------------------------- /config/ember-try.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | scenarios: [ 3 | { 4 | name: 'default', 5 | dependencies: { } 6 | }, 7 | { 8 | name: 'ember-release', 9 | dependencies: { 10 | 'ember': 'components/ember#release' 11 | }, 12 | resolutions: { 13 | 'ember': 'release' 14 | } 15 | }, 16 | { 17 | name: 'ember-beta', 18 | dependencies: { 19 | 'ember': 'components/ember#beta' 20 | }, 21 | resolutions: { 22 | 'ember': 'beta' 23 | } 24 | }, 25 | { 26 | name: 'ember-canary', 27 | dependencies: { 28 | 'ember': 'components/ember#canary' 29 | }, 30 | resolutions: { 31 | 'ember': 'canary' 32 | } 33 | } 34 | ] 35 | }; 36 | -------------------------------------------------------------------------------- /addon/styles/addon.css: -------------------------------------------------------------------------------- 1 | .ember-image-drop { 2 | height: 300px; 3 | width: 300px; 4 | background: transparent; 5 | background-size: cover; 6 | border: 5px dashed #ECF0F1; 7 | position: relative; 8 | } 9 | 10 | .ember-image-drop p { 11 | color: #a9a9a9; 12 | display: block; 13 | width: 100%; 14 | text-align: center; 15 | } 16 | 17 | .ember-image-drop p.placeholder { 18 | font-size: 2em; 19 | } 20 | 21 | .ember-image-drop p.help-text { 22 | font-size: 0.9em; 23 | } 24 | 25 | .ember-image-drop .text { 26 | width: 100%; 27 | position: absolute; 28 | top: 50%; 29 | 30 | -webkit-transform: translateY(-50%); 31 | -moz-transform: translateY(-50%); 32 | -ms-transform: translateY(-50%); 33 | transform: translateY(-50%); 34 | 35 | } 36 | 37 | .ember-image-drop input[type=file] { 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | width: 100%; 42 | height: 100%; 43 | opacity: 0; 44 | filter: alpha(opacity=0); 45 | cursor: pointer; 46 | } 47 | -------------------------------------------------------------------------------- /tests/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "document", 4 | "window", 5 | "location", 6 | "setTimeout", 7 | "$", 8 | "-Promise", 9 | "define", 10 | "console", 11 | "visit", 12 | "exists", 13 | "fillIn", 14 | "click", 15 | "keyEvent", 16 | "triggerEvent", 17 | "find", 18 | "findWithAssert", 19 | "wait", 20 | "DS", 21 | "andThen", 22 | "currentURL", 23 | "currentPath", 24 | "currentRouteName" 25 | ], 26 | "node": false, 27 | "browser": false, 28 | "boss": true, 29 | "curly": true, 30 | "debug": false, 31 | "devel": false, 32 | "eqeqeq": true, 33 | "evil": true, 34 | "forin": false, 35 | "immed": false, 36 | "laxbreak": false, 37 | "newcap": true, 38 | "noarg": true, 39 | "noempty": false, 40 | "nonew": false, 41 | "nomen": false, 42 | "onevar": false, 43 | "plusplus": false, 44 | "regexp": false, 45 | "undef": true, 46 | "sub": true, 47 | "strict": false, 48 | "white": false, 49 | "eqnull": true, 50 | "esnext": true, 51 | "unused": true 52 | } 53 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dummy Tests 7 | 8 | 9 | 10 | {{content-for 'head'}} 11 | {{content-for 'test-head'}} 12 | 13 | 14 | 15 | 16 | 17 | {{content-for 'head-footer'}} 18 | {{content-for 'test-head-footer'}} 19 | 20 | 21 | 22 | {{content-for 'body'}} 23 | {{content-for 'test-body'}} 24 | 25 | 26 | 27 | 28 | 29 | 30 | {{content-for 'body-footer'}} 31 | {{content-for 'test-body-footer'}} 32 | 33 | 34 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.12' 4 | sudo: false 5 | cache: 6 | directories: 7 | - node_modules 8 | env: 9 | - EMBER_TRY_SCENARIO=default 10 | - EMBER_TRY_SCENARIO=ember-release 11 | - EMBER_TRY_SCENARIO=ember-beta 12 | - EMBER_TRY_SCENARIO=ember-canary 13 | matrix: 14 | fast_finish: true 15 | allow_failures: 16 | - env: EMBER_TRY_SCENARIO=ember-canary 17 | before_install: 18 | - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH 19 | - npm config set spin false 20 | - npm install -g npm@^2 21 | install: 22 | - npm install -g bower 23 | - npm install 24 | - bower install 25 | script: 26 | - ember try $EMBER_TRY_SCENARIO test 27 | notifications: 28 | slack: 29 | secure: JL1+WF/xOaVDvvQ1dEM8g/Bu4LS7f7pKe7mp9FfIBJvPPcZFAZ+D1QgFH+W9V/U7vKk8ecL68IrRP9K8baZeEaYXH+Zn5AupOXeQaJ5J9SCWfJ87B0ysYiDV2HN8ZPrdxHIqvSKzTzDqBL7j4+okwNMIXnqOH3+dwGAAIKdL57emiVViaYtD1xfpMWDylB27866gysVxjucInu5h7P4Hj2gNfVU1zUH87YRESKsoZhjjTsGG4gOZPIznj8y7NwcQrueB/nu97L14c+i+DhViZqVLwDbE7PDuKemJS0GJoT46bZ+BmJioVh7/Peyaup9lo6A1m8BKFLGSILKj2l6+KWEL8QUOZ9+xOn2ElK5y6MyDqKWiwj0foiDh2oNw3zgNNceTosGPiQFaoCug0s9z+fvdX7jnMgXAFvJbl0bG8QFtkxDiUbgXYQjfq0ZNSvPo5lhMHHN2ncerAmBInCE+GB3+2jLlB/AWAxk/Wc9EFjqcpYm39OYs/DLjQZnn/oVPuYzgWipuH988fQ4VnL9qAZtkPwMfd0bY+mrI4bagsbhn0KsAIID+Q/Eno7CieISQxvE1aeCY+P7gFIUvJMoBHBSDRa6ZhuO3qA2zN5xJvy+Z3sMIQkgwwuKS5l9FzlG6OMuRx3KMV6tzd1nOGeGj04dSdMJdmOlnXBxoxAd9h1Y= 30 | -------------------------------------------------------------------------------- /tests/dummy/config/environment.js: -------------------------------------------------------------------------------- 1 | /* jshint node: true */ 2 | 3 | module.exports = function(environment) { 4 | var ENV = { 5 | modulePrefix: 'dummy', 6 | environment: environment, 7 | baseURL: '/', 8 | locationType: 'auto', 9 | EmberENV: { 10 | FEATURES: { 11 | // Here you can enable experimental features on an ember canary build 12 | // e.g. 'with-controller': true 13 | } 14 | }, 15 | 16 | APP: { 17 | // Here you can pass flags/options to your application instance 18 | // when it is created 19 | } 20 | }; 21 | 22 | if (environment === 'development') { 23 | // ENV.APP.LOG_RESOLVER = true; 24 | // ENV.APP.LOG_ACTIVE_GENERATION = true; 25 | // ENV.APP.LOG_TRANSITIONS = true; 26 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; 27 | // ENV.APP.LOG_VIEW_LOOKUPS = true; 28 | } 29 | 30 | if (environment === 'test') { 31 | // Testem prefers this... 32 | ENV.baseURL = '/'; 33 | ENV.locationType = 'none'; 34 | 35 | // keep test console output quieter 36 | ENV.APP.LOG_ACTIVE_GENERATION = false; 37 | ENV.APP.LOG_VIEW_LOOKUPS = false; 38 | 39 | ENV.APP.rootElement = '#ember-testing'; 40 | } 41 | 42 | if (environment === 'production') { 43 | 44 | } 45 | 46 | ENV.contentSecurityPolicy = { 47 | 'style-src': "'self' * 'unsafe-inline'", 48 | 'img-src': "'self' data:" 49 | } 50 | 51 | return ENV; 52 | }; 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-image-drop", 3 | "version": "0.2.3", 4 | "description": "A place to drop images, with immediate preview. You get base64 data back.", 5 | "directories": { 6 | "doc": "doc", 7 | "test": "tests" 8 | }, 9 | "scripts": { 10 | "start": "ember server", 11 | "build": "ember build", 12 | "test": "ember try:testall" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/AddJam/ember-image-drop" 17 | }, 18 | "engines": { 19 | "node": ">= 0.10.0" 20 | }, 21 | "author": "Add Jam", 22 | "license": "MIT", 23 | "devDependencies": { 24 | "broccoli-asset-rev": "^2.0.2", 25 | "ember-cli": "1.13.1", 26 | "ember-cli-app-version": "0.4.0", 27 | "ember-cli-content-security-policy": "0.4.0", 28 | "ember-cli-dependency-checker": "^1.0.0", 29 | "ember-cli-htmlbars-inline-precompile": "^0.1.1", 30 | "ember-cli-ic-ajax": "0.2.1", 31 | "ember-cli-inject-live-reload": "^1.3.0", 32 | "ember-cli-qunit": "1.2.4", 33 | "ember-cli-release": "0.2.3", 34 | "ember-cli-uglify": "^1.0.1", 35 | "ember-data": "1.13.5", 36 | "ember-disable-proxy-controllers": "^1.0.0", 37 | "ember-export-application-global": "^1.0.2", 38 | "ember-disable-prototype-extensions": "^1.0.0", 39 | "ember-try": "0.0.6" 40 | }, 41 | "keywords": [ 42 | "ember-addon", 43 | "ember", 44 | "ember-cli", 45 | "image", 46 | "drag", 47 | "drop" 48 | ], 49 | "dependencies": { 50 | "ember-cli-babel": "^5.0.0", 51 | "ember-cli-htmlbars": "1.1.1" 52 | }, 53 | "ember-addon": { 54 | "configPath": "tests/dummy/config" 55 | }, 56 | "homepage": "https://github.com/AddJam/ember-image-drop" 57 | } -------------------------------------------------------------------------------- /tests/integration/components/image-drop-test.js: -------------------------------------------------------------------------------- 1 | import { moduleForComponent, test } from 'ember-qunit'; 2 | import hbs from 'htmlbars-inline-precompile'; 3 | 4 | 5 | moduleForComponent('image-drop', 'Integration | Component | image drop', { 6 | integration: true 7 | }); 8 | 9 | test('it renders', function(assert) { 10 | assert.expect(5); 11 | 12 | // Set any properties with this.set('myProperty', 'value'); 13 | // Handle any actions with this.on('myAction', function(val) { ... }); 14 | 15 | this.render(hbs`{{image-drop}}`); 16 | 17 | assert.equal(this.$('.ember-image-drop').length, 1); 18 | assert.equal(this.$('.ember-image-drop input').length, 1); 19 | assert.equal(this.$('.ember-image-drop .text').length, 1); 20 | assert.equal(this.$('.ember-image-drop .placeholder').length, 1); 21 | assert.equal(this.$('.ember-image-drop .help-text').length, 1); 22 | }); 23 | 24 | test('text data is set correctly', function(assert) { 25 | assert.expect(2); 26 | 27 | this.render(hbs`{{image-drop placeholder="banana" helpText="help!"}}`); 28 | 29 | assert.equal(this.$('.ember-image-drop .placeholder').text(), "banana"); 30 | assert.equal(this.$('.ember-image-drop .help-text').text(), "help!"); 31 | }); 32 | 33 | test('background image updates with image', function(assert) { 34 | assert.expect(2); 35 | this.set('image', 'data:fakeimagedata'); 36 | this.render(hbs`{{image-drop image=image}}`); 37 | 38 | let backgroundImage = this.$('.ember-image-drop').css('background-image'); 39 | assert.equal(backgroundImage, "url(data:fakeimagedata)"); 40 | 41 | this.set('image', 'data:pancakes'); 42 | backgroundImage = this.$('.ember-image-drop').css('background-image'); 43 | assert.equal(backgroundImage, "url(data:pancakes)"); 44 | }); 45 | -------------------------------------------------------------------------------- /addon/components/image-drop.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import layout from '../templates/components/image-drop'; 3 | 4 | export default Ember.Component.extend({ 5 | layout: layout, 6 | classNames: ['ember-image-drop'], 7 | attributeBindings: ['style'], 8 | placeholder: "", 9 | helpText: "Drop your image here, or click to select", 10 | hideTextOnImage: true, 11 | 12 | image: null, 13 | file: null, 14 | 15 | textStyle: Ember.computed('image', function() { 16 | let textStyle = ""; 17 | if (this.get('hideTextOnImage') && this.get('image')) { 18 | textStyle = "display: none;"; 19 | } 20 | return Ember.String.htmlSafe(textStyle); 21 | }), 22 | 23 | style: Ember.computed('image', function() { 24 | let backgroundStyle = ""; 25 | if (this.get('image')) { 26 | backgroundStyle = `background-image: url(${this.get('image')});`; 27 | } 28 | 29 | return Ember.String.htmlSafe(backgroundStyle); 30 | }), 31 | 32 | setup: Ember.on('willInsertElement', function() { 33 | const $input = this.$('input'); 34 | $input.on('change', (event) => { 35 | this.handleFileDrop(event.target.files[0]); 36 | this.resetInputElement($input); 37 | }); 38 | }), 39 | 40 | resetInputElement(inputElement) { 41 | inputElement.wrap('
').closest('form').get(0).reset(); 42 | inputElement.unwrap(); 43 | }, 44 | 45 | handleFileDrop(file) { 46 | if (file == null) { 47 | return; 48 | } 49 | 50 | this.set('file', file); 51 | var reader = new FileReader(); 52 | reader.onload = (e) => { 53 | var fileToUpload = e.target.result; 54 | Ember.run(() => { 55 | this.set('image', fileToUpload); 56 | }); 57 | }; 58 | reader.readAsDataURL(file); 59 | }, 60 | 61 | drop(event) { 62 | event.preventDefault(); 63 | if (event.dataTransfer.files && event.dataTransfer.files.length > 0) { 64 | return this.handleFileDrop(event.dataTransfer.files[0]); 65 | } 66 | 67 | let imageUrl = event.dataTransfer.getData('URL'); 68 | 69 | if (!imageUrl) { 70 | return; 71 | } 72 | 73 | this.convertImgToBase64URL(imageUrl, (base64) => { 74 | this.set('image', base64); 75 | }); 76 | }, 77 | 78 | convertImgToBase64URL(url, callback, outputFormat) { 79 | var img = new Image(); 80 | img.crossOrigin = 'Anonymous'; 81 | img.onload = function(){ 82 | var canvas = document.createElement('CANVAS'), 83 | ctx = canvas.getContext('2d'), dataURL; 84 | canvas.height = this.height; 85 | canvas.width = this.width; 86 | ctx.drawImage(this, 0, 0); 87 | dataURL = canvas.toDataURL(outputFormat); 88 | callback(dataURL); 89 | canvas = null; 90 | }; 91 | img.src = url; 92 | } 93 | }); 94 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/ember-image-drop.svg)](http://badge.fury.io/js/ember-image-drop) 2 | [![Travis CI](https://travis-ci.org/AddJam/ember-image-drop.svg)](https://travis-ci.org/AddJam/ember-image-drop) 3 | 4 | # ember-image-drop 5 | 6 | A place to drop images. Gives you the image data as base64. You can also 7 | click to open the file picker as normal. 8 | 9 | ![ember-image-drop preview](https://s3.amazonaws.com/f.cl.ly/items/2L2j0h1a0s3p3D3n3W2X/Screen%20Recording%202015-08-07%20at%2010.55%20am.gif) 10 | 11 | ## Installation 12 | 13 | `ember install ember-image-drop` 14 | 15 | ## Usage 16 | 17 | ``` 18 | {{image-drop image=companyLogo 19 | placeholder="Company Logo" 20 | helpText="Drop your image here, or click to select"}} 21 | ``` 22 | 23 | In this example, `companyLogo` will be updated with the base64 image data when 24 | an image is selected. 25 | 26 | You should also update your Content Security Policy (usually in 27 | `config/environment.js`) to allow base64 image data to be the displayed. 28 | 29 | ``` 30 | ENV.contentSecurityPolicy = { 31 | 'img-src': "'self' data:" 32 | }; 33 | ``` 34 | 35 | ### Options 36 | 37 | Option Name | Description | Default Value 38 | -----------------|-----------------------------------------------------|--------------- 39 | image | Where we should bind the base64 data. | `null` 40 | file | Where we should bind the file object. | `null` 41 | placeholder | The large text shown in the drop area. | `""` 42 | helpText | The smaller text shown below the placeholder. | `"Drop your image here, or click to select"` 43 | hideTextOnImage | Should we hide the text when an image is present? | `true` 44 | 45 | 46 | ## License 47 | 48 | The MIT License (MIT) 49 | 50 | Copyright (c) 2015 51 | 52 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 53 | 54 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 55 | 56 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 57 | --------------------------------------------------------------------------------