dropify-rails 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +11 -0
- data/.rspec +3 -0
- data/.travis.yml +5 -0
- data/CODE_OF_CONDUCT.md +74 -0
- data/Gemfile +6 -0
- data/LICENSE.txt +21 -0
- data/README.md +43 -0
- data/Rakefile +6 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/dropify-rails.gemspec +25 -0
- data/lib/dropify/rails.rb +8 -0
- data/lib/dropify/rails/version.rb +5 -0
- data/vendor/assets/fonts/dropify.eot +0 -0
- data/vendor/assets/fonts/dropify.svg +13 -0
- data/vendor/assets/fonts/dropify.ttf +0 -0
- data/vendor/assets/fonts/dropify.woff +0 -0
- data/vendor/assets/javascripts/dropify.js +611 -0
- data/vendor/assets/stylesheets/_dropify-font.scss.erb +34 -0
- data/vendor/assets/stylesheets/dropify.scss +483 -0
- metadata +106 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: facd9660842db1ba48e1caf126aec87652e47fcd
|
4
|
+
data.tar.gz: ce425658ab8c92ba3512e5a9249bbc233a514987
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: db0ea190e564c4bd3986041bfa3e7f0a0bee4ada4d55bbd637423ef52bbc326e8d1d1b0110cf54348d5b9ffd273d019d38ef24554a8bbbfe9476ba2863a94d8e
|
7
|
+
data.tar.gz: eaad2c431409fb6b633927e7702647a2b04286392b8e23c7d3119975a9ea04b6b3aa322df43d8fba034e003e1130a76f0c06847e484adc8845682b7bba1b3109
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/.travis.yml
ADDED
data/CODE_OF_CONDUCT.md
ADDED
@@ -0,0 +1,74 @@
|
|
1
|
+
# Contributor Covenant Code of Conduct
|
2
|
+
|
3
|
+
## Our Pledge
|
4
|
+
|
5
|
+
In the interest of fostering an open and welcoming environment, we as
|
6
|
+
contributors and maintainers pledge to making participation in our project and
|
7
|
+
our community a harassment-free experience for everyone, regardless of age, body
|
8
|
+
size, disability, ethnicity, gender identity and expression, level of experience,
|
9
|
+
nationality, personal appearance, race, religion, or sexual identity and
|
10
|
+
orientation.
|
11
|
+
|
12
|
+
## Our Standards
|
13
|
+
|
14
|
+
Examples of behavior that contributes to creating a positive environment
|
15
|
+
include:
|
16
|
+
|
17
|
+
* Using welcoming and inclusive language
|
18
|
+
* Being respectful of differing viewpoints and experiences
|
19
|
+
* Gracefully accepting constructive criticism
|
20
|
+
* Focusing on what is best for the community
|
21
|
+
* Showing empathy towards other community members
|
22
|
+
|
23
|
+
Examples of unacceptable behavior by participants include:
|
24
|
+
|
25
|
+
* The use of sexualized language or imagery and unwelcome sexual attention or
|
26
|
+
advances
|
27
|
+
* Trolling, insulting/derogatory comments, and personal or political attacks
|
28
|
+
* Public or private harassment
|
29
|
+
* Publishing others' private information, such as a physical or electronic
|
30
|
+
address, without explicit permission
|
31
|
+
* Other conduct which could reasonably be considered inappropriate in a
|
32
|
+
professional setting
|
33
|
+
|
34
|
+
## Our Responsibilities
|
35
|
+
|
36
|
+
Project maintainers are responsible for clarifying the standards of acceptable
|
37
|
+
behavior and are expected to take appropriate and fair corrective action in
|
38
|
+
response to any instances of unacceptable behavior.
|
39
|
+
|
40
|
+
Project maintainers have the right and responsibility to remove, edit, or
|
41
|
+
reject comments, commits, code, wiki edits, issues, and other contributions
|
42
|
+
that are not aligned to this Code of Conduct, or to ban temporarily or
|
43
|
+
permanently any contributor for other behaviors that they deem inappropriate,
|
44
|
+
threatening, offensive, or harmful.
|
45
|
+
|
46
|
+
## Scope
|
47
|
+
|
48
|
+
This Code of Conduct applies both within project spaces and in public spaces
|
49
|
+
when an individual is representing the project or its community. Examples of
|
50
|
+
representing a project or community include using an official project e-mail
|
51
|
+
address, posting via an official social media account, or acting as an appointed
|
52
|
+
representative at an online or offline event. Representation of a project may be
|
53
|
+
further defined and clarified by project maintainers.
|
54
|
+
|
55
|
+
## Enforcement
|
56
|
+
|
57
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
58
|
+
reported by contacting the project team at mlvilela@gmail.com. All
|
59
|
+
complaints will be reviewed and investigated and will result in a response that
|
60
|
+
is deemed necessary and appropriate to the circumstances. The project team is
|
61
|
+
obligated to maintain confidentiality with regard to the reporter of an incident.
|
62
|
+
Further details of specific enforcement policies may be posted separately.
|
63
|
+
|
64
|
+
Project maintainers who do not follow or enforce the Code of Conduct in good
|
65
|
+
faith may face temporary or permanent repercussions as determined by other
|
66
|
+
members of the project's leadership.
|
67
|
+
|
68
|
+
## Attribution
|
69
|
+
|
70
|
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
71
|
+
available at [http://contributor-covenant.org/version/1/4][version]
|
72
|
+
|
73
|
+
[homepage]: http://contributor-covenant.org
|
74
|
+
[version]: http://contributor-covenant.org/version/1/4/
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2018 Marcelo Vilela
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,43 @@
|
|
1
|
+
# Dropify::Rails
|
2
|
+
|
3
|
+
Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/dropify/rails`. To experiment with that code, run `bin/console` for an interactive prompt.
|
4
|
+
|
5
|
+
TODO: Delete this and the text above, and describe your gem
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add this line to your application's Gemfile:
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
gem 'dropify-rails'
|
13
|
+
```
|
14
|
+
|
15
|
+
And then execute:
|
16
|
+
|
17
|
+
$ bundle
|
18
|
+
|
19
|
+
Or install it yourself as:
|
20
|
+
|
21
|
+
$ gem install dropify-rails
|
22
|
+
|
23
|
+
## Usage
|
24
|
+
|
25
|
+
TODO: Write usage instructions here
|
26
|
+
|
27
|
+
## Development
|
28
|
+
|
29
|
+
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
30
|
+
|
31
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
32
|
+
|
33
|
+
## Contributing
|
34
|
+
|
35
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/dropify-rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
36
|
+
|
37
|
+
## License
|
38
|
+
|
39
|
+
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
40
|
+
|
41
|
+
## Code of Conduct
|
42
|
+
|
43
|
+
Everyone interacting in the Dropify::Rails project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/dropify-rails/blob/master/CODE_OF_CONDUCT.md).
|
data/Rakefile
ADDED
data/bin/console
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
#!/usr/bin/env ruby
|
2
|
+
|
3
|
+
require "bundler/setup"
|
4
|
+
require "dropify/rails"
|
5
|
+
|
6
|
+
# You can add fixtures and/or initialization code here to make experimenting
|
7
|
+
# with your gem easier. You can also use a different console, if you like.
|
8
|
+
|
9
|
+
# (If you use this, don't forget to add pry to your Gemfile!)
|
10
|
+
# require "pry"
|
11
|
+
# Pry.start
|
12
|
+
|
13
|
+
require "irb"
|
14
|
+
IRB.start(__FILE__)
|
data/bin/setup
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
lib = File.expand_path("../lib", __FILE__)
|
2
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
3
|
+
require "dropify/rails/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |spec|
|
6
|
+
spec.name = "dropify-rails"
|
7
|
+
spec.version = Dropify::Rails::VERSION
|
8
|
+
spec.authors = ["Marcelo Vilela"]
|
9
|
+
spec.email = ["mlvilela@gmail.com"]
|
10
|
+
|
11
|
+
spec.summary = %q{Dropify gem (https://github.com/JeremyFagis/dropify)}
|
12
|
+
spec.homepage = "https://github.com/vilelaml/dropify-rails"
|
13
|
+
spec.license = "MIT"
|
14
|
+
|
15
|
+
spec.files = `git ls-files -z`.split("\x0").reject do |f|
|
16
|
+
f.match(%r{^(test|spec|features)/})
|
17
|
+
end
|
18
|
+
spec.bindir = "exe"
|
19
|
+
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
20
|
+
spec.require_paths = ["lib"]
|
21
|
+
|
22
|
+
spec.add_development_dependency "bundler", "~> 1.16"
|
23
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
24
|
+
spec.add_development_dependency "rspec", "~> 3.0"
|
25
|
+
end
|
Binary file
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<?xml version="1.0" standalone="no"?>
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
3
|
+
<svg xmlns="http://www.w3.org/2000/svg">
|
4
|
+
<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
|
5
|
+
<defs>
|
6
|
+
<font id="dropify" horiz-adv-x="1000" >
|
7
|
+
<font-face font-family="dropify" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
8
|
+
<missing-glyph horiz-adv-x="1000" />
|
9
|
+
<glyph glyph-name="upload" unicode="" d="m654 189c3-3 8-4 12-4 4 0 8 1 11 4 6 7 6 17 0 23l-167 166c0 0 0 0 0 0l-11 12-11-12c0 0 0 0 0 0l-167-166c-6-6-6-16 0-23 7-6 17-6 23 0l139 140v-281c0-9 7-16 16-16s16 7 16 16v281l139-140z m158 292c-39 110-143 184-261 184-111 0-211-67-254-169-21 10-43 15-65 15-86 0-156-70-156-156-45-34-71-87-71-143 0-99 81-180 183-180 1 0 3 0 4 0 1 0 2 0 2 0h168c9 0 16 7 16 16 0 9-7 16-16 16h-168c-2 0-4 0-5 0l-3 0c-82 0-149 66-149 148 0 49 24 95 64 122l8 8-1 13c0 68 55 124 124 124 23 0 45-7 65-19l17-10 6 19c34 98 127 164 231 164 107 0 201-69 234-171l3-9 9-2c95-15 164-96 164-192 0-108-87-195-195-195h-130c-9 0-16-8-16-16 0-9 7-16 16-16h130c125 0 227 101 227 227 0 108-75 200-181 222z" horiz-adv-x="1000" />
|
10
|
+
<glyph glyph-name="file" unicode="" d="m853 507c0 3 0 6-1 8-1 14-3 16-4 18-2 4-24 27-65 68l-167 166c-41 41-64 63-68 66-4 2-8 5-103 5h-165c-26 0-88 0-93-1-8-1-21-9-26-14-4-4-10-12-12-18-2-5-2-39-2-100v-710c0-3 0-86 1-93 1-8 8-20 13-25 4-4 12-10 19-13 6-2 58-2 100-2h440c4 0 87 0 93 1 9 1 21 9 26 14 4 4 10 12 12 18 2 5 2 39 2 100v435c0 34 0 57-1 72 1 1 1 3 1 5z m-313 287c11-10 29-28 52-51l166-167c24-23 41-41 52-52h-202c-38 0-68 31-68 69v201l0 0z m279-799c0-50-1-87 0-89-1-1-2-3-4-5-1-1-6-4-5-4-4 0-38-1-90-1h-440c-43 0-76 1-86 1-2 0-3 0-3 0-1 0-4 2-6 4-1 1-3 5-3 5h-1c0 4 0 37 0 89v710c0 52 1 87 0 89 1 1 3 4 4 5 1 1 6 4 6 4 4 1 39 1 89 1h165c24 0 45 0 61-1v-210c0-57 46-103 102-103h211c0-15 0-36 0-60l0-435 0 0z" horiz-adv-x="1000" />
|
11
|
+
</font>
|
12
|
+
</defs>
|
13
|
+
</svg>
|
Binary file
|
Binary file
|
@@ -0,0 +1,611 @@
|
|
1
|
+
var pluginName = "dropify";
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Dropify plugin
|
5
|
+
*
|
6
|
+
* @param {Object} element
|
7
|
+
* @param {Array} options
|
8
|
+
*/
|
9
|
+
function Dropify(element, options) {
|
10
|
+
if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
|
11
|
+
return;
|
12
|
+
}
|
13
|
+
|
14
|
+
var defaults = {
|
15
|
+
defaultFile: '',
|
16
|
+
maxFileSize: 0,
|
17
|
+
minWidth: 0,
|
18
|
+
maxWidth: 0,
|
19
|
+
minHeight: 0,
|
20
|
+
maxHeight: 0,
|
21
|
+
showRemove: true,
|
22
|
+
showLoader: true,
|
23
|
+
showErrors: true,
|
24
|
+
errorsPosition: 'overlay',
|
25
|
+
allowedFormats: ['portrait', 'square', 'landscape'],
|
26
|
+
messages: {
|
27
|
+
'default': 'Drag and drop a file here or click',
|
28
|
+
'replace': 'Drag and drop or click to replace',
|
29
|
+
'remove': 'Remove',
|
30
|
+
'error': 'Ooops, something wrong appended.'
|
31
|
+
},
|
32
|
+
error: {
|
33
|
+
'fileSize': 'The file size is too big ({{ value }} max).',
|
34
|
+
'minWidth': 'The image width is too small ({{ value }}}px min).',
|
35
|
+
'maxWidth': 'The image width is too big ({{ value }}}px max).',
|
36
|
+
'minHeight': 'The image height is too small ({{ value }}}px min).',
|
37
|
+
'maxHeight': 'The image height is too big ({{ value }}px max).',
|
38
|
+
'imageFormat': 'The image format is not allowed ({{ value }} only).'
|
39
|
+
},
|
40
|
+
tpl: {
|
41
|
+
wrap: '<div class="dropify-wrapper"></div>',
|
42
|
+
loader: '<div class="dropify-loader"></div>',
|
43
|
+
message: '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
|
44
|
+
preview: '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
|
45
|
+
filename: '<p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>',
|
46
|
+
clearButton: '<button type="button" class="dropify-clear">{{ remove }}</button>',
|
47
|
+
errorLine: '<p class="dropify-error">{{ error }}</p>',
|
48
|
+
errorsContainer: '<div class="dropify-errors-container"><ul></ul></div>'
|
49
|
+
}
|
50
|
+
};
|
51
|
+
|
52
|
+
this.element = element;
|
53
|
+
this.input = $(this.element);
|
54
|
+
this.wrapper = null;
|
55
|
+
this.preview = null;
|
56
|
+
this.filenameWrapper = null;
|
57
|
+
this.settings = $.extend(true, defaults, options, this.input.data());
|
58
|
+
this.imgFileExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
|
59
|
+
this.errorsEvent = $.Event('dropify.errors');
|
60
|
+
this.isDisabled = false;
|
61
|
+
this.isInit = false;
|
62
|
+
this.file = {
|
63
|
+
object: null,
|
64
|
+
name: null,
|
65
|
+
size: null,
|
66
|
+
width: null,
|
67
|
+
height: null,
|
68
|
+
type: null
|
69
|
+
};
|
70
|
+
|
71
|
+
if (!Array.isArray(this.settings.allowedFormats)) {
|
72
|
+
this.settings.allowedFormats = this.settings.allowedFormats.split(' ');
|
73
|
+
}
|
74
|
+
|
75
|
+
this.onChange = this.onChange.bind(this);
|
76
|
+
this.clearElement = this.clearElement.bind(this);
|
77
|
+
this.onFileReady = this.onFileReady.bind(this);
|
78
|
+
|
79
|
+
this.translateMessages();
|
80
|
+
this.createElements();
|
81
|
+
this.setContainerSize();
|
82
|
+
|
83
|
+
this.errorsEvent.errors = [];
|
84
|
+
|
85
|
+
this.input.on('change', this.onChange);
|
86
|
+
}
|
87
|
+
|
88
|
+
/**
|
89
|
+
* On change event
|
90
|
+
*/
|
91
|
+
Dropify.prototype.onChange = function()
|
92
|
+
{
|
93
|
+
this.resetPreview();
|
94
|
+
this.readFile(this.element);
|
95
|
+
};
|
96
|
+
|
97
|
+
/**
|
98
|
+
* Create dom elements
|
99
|
+
*/
|
100
|
+
Dropify.prototype.createElements = function()
|
101
|
+
{
|
102
|
+
this.isInit = true;
|
103
|
+
this.input.wrap($(this.settings.tpl.wrap));
|
104
|
+
this.wrapper = this.input.parent();
|
105
|
+
|
106
|
+
var messageWrapper = $(this.settings.tpl.message).insertBefore(this.input);
|
107
|
+
$(this.settings.tpl.errorLine).appendTo(messageWrapper);
|
108
|
+
|
109
|
+
if (this.isTouchDevice() === true) {
|
110
|
+
this.wrapper.addClass('touch-fallback');
|
111
|
+
}
|
112
|
+
|
113
|
+
if (this.input.attr('disabled')) {
|
114
|
+
this.isDisabled = true;
|
115
|
+
this.wrapper.addClass('disabled');
|
116
|
+
}
|
117
|
+
|
118
|
+
if (this.settings.showLoader === true) {
|
119
|
+
this.loader = $(this.settings.tpl.loader);
|
120
|
+
this.loader.insertBefore(this.input);
|
121
|
+
}
|
122
|
+
|
123
|
+
this.preview = $(this.settings.tpl.preview);
|
124
|
+
this.preview.insertAfter(this.input);
|
125
|
+
|
126
|
+
if (this.isDisabled === false && this.settings.showRemove === true) {
|
127
|
+
this.clearButton = $(this.settings.tpl.clearButton);
|
128
|
+
this.clearButton.insertAfter(this.input);
|
129
|
+
this.clearButton.on('click', this.clearElement);
|
130
|
+
}
|
131
|
+
|
132
|
+
this.filenameWrapper = $(this.settings.tpl.filename);
|
133
|
+
this.filenameWrapper.prependTo(this.preview.find('.dropify-infos-inner'));
|
134
|
+
|
135
|
+
if (this.settings.showErrors === true) {
|
136
|
+
this.errorsContainer = $(this.settings.tpl.errorsContainer);
|
137
|
+
|
138
|
+
if (this.settings.errorsPosition === 'outside') {
|
139
|
+
this.errorsContainer.insertAfter(this.wrapper);
|
140
|
+
} else {
|
141
|
+
this.errorsContainer.insertBefore(this.input);
|
142
|
+
}
|
143
|
+
}
|
144
|
+
|
145
|
+
var defaultFile = this.settings.defaultFile || '';
|
146
|
+
|
147
|
+
if (defaultFile.trim() != '') {
|
148
|
+
this.file.name = this.cleanFilename(defaultFile);
|
149
|
+
this.setPreview(defaultFile);
|
150
|
+
}
|
151
|
+
};
|
152
|
+
|
153
|
+
/**
|
154
|
+
* Read the file using FileReader
|
155
|
+
*
|
156
|
+
* @param {Object} input
|
157
|
+
*/
|
158
|
+
Dropify.prototype.readFile = function(input)
|
159
|
+
{
|
160
|
+
if (input.files && input.files[0]) {
|
161
|
+
var reader = new FileReader();
|
162
|
+
var image = new Image();
|
163
|
+
var file = input.files[0];
|
164
|
+
var srcBase64 = null;
|
165
|
+
var _this = this;
|
166
|
+
var eventFileReady = $.Event("dropify.fileReady");
|
167
|
+
|
168
|
+
this.clearErrors();
|
169
|
+
this.showLoader();
|
170
|
+
|
171
|
+
this.setFileInformations(file);
|
172
|
+
reader.readAsDataURL(file);
|
173
|
+
|
174
|
+
this.errorsEvent.errors = [];
|
175
|
+
|
176
|
+
this.checkFileSize();
|
177
|
+
|
178
|
+
reader.onload = function(_file) {
|
179
|
+
srcBase64 = _file.target.result;
|
180
|
+
if (this.isImage()) {
|
181
|
+
image.src = _file.target.result;
|
182
|
+
image.onload = function() {
|
183
|
+
_this.setFileDimensions(this.width, this.height);
|
184
|
+
_this.validateImage();
|
185
|
+
_this.input.trigger(eventFileReady, [srcBase64]);
|
186
|
+
};
|
187
|
+
} else {
|
188
|
+
this.input.trigger(eventFileReady, [srcBase64]);
|
189
|
+
}
|
190
|
+
}.bind(this);
|
191
|
+
|
192
|
+
this.input.on('dropify.fileReady', this.onFileReady);
|
193
|
+
}
|
194
|
+
};
|
195
|
+
|
196
|
+
/**
|
197
|
+
* On file ready to show
|
198
|
+
*
|
199
|
+
* @param {Event} event
|
200
|
+
* @param {String} src
|
201
|
+
*/
|
202
|
+
Dropify.prototype.onFileReady = function(event, src)
|
203
|
+
{
|
204
|
+
this.input.off('dropify.fileReady', this.onFileReady);
|
205
|
+
|
206
|
+
if (this.errorsEvent.errors.length === 0) {
|
207
|
+
this.setPreview(src, this.file.name);
|
208
|
+
} else {
|
209
|
+
this.input.trigger(this.errorsEvent, [this]);
|
210
|
+
for (var i = this.errorsEvent.errors.length - 1; i >= 0; i--) {
|
211
|
+
var errorNamespace = this.errorsEvent.errors[i].namespace;
|
212
|
+
var errorKey = errorNamespace.split('.').pop();
|
213
|
+
this.showError(errorKey);
|
214
|
+
}
|
215
|
+
|
216
|
+
if (typeof this.errorsContainer !== "undefined") {
|
217
|
+
this.errorsContainer.addClass('visible');
|
218
|
+
|
219
|
+
var errorsContainer = this.errorsContainer;
|
220
|
+
setTimeout(function(){ errorsContainer.removeClass('visible'); }, 1000);
|
221
|
+
}
|
222
|
+
|
223
|
+
this.wrapper.addClass('has-error');
|
224
|
+
this.resetPreview();
|
225
|
+
this.clearElement();
|
226
|
+
}
|
227
|
+
};
|
228
|
+
|
229
|
+
/**
|
230
|
+
* Set file informations
|
231
|
+
*
|
232
|
+
* @param {File} file
|
233
|
+
*/
|
234
|
+
Dropify.prototype.setFileInformations = function(file)
|
235
|
+
{
|
236
|
+
this.file.object = file;
|
237
|
+
this.file.name = file.name;
|
238
|
+
this.file.size = file.size;
|
239
|
+
this.file.type = file.type;
|
240
|
+
this.file.width = null;
|
241
|
+
this.file.height = null;
|
242
|
+
};
|
243
|
+
|
244
|
+
/**
|
245
|
+
* Set file dimensions
|
246
|
+
*
|
247
|
+
* @param {Int} width
|
248
|
+
* @param {Int} height
|
249
|
+
*/
|
250
|
+
Dropify.prototype.setFileDimensions = function(width, height)
|
251
|
+
{
|
252
|
+
this.file.width = width;
|
253
|
+
this.file.height = height;
|
254
|
+
};
|
255
|
+
|
256
|
+
/**
|
257
|
+
* Set the preview and animate it
|
258
|
+
*
|
259
|
+
* @param {String} src
|
260
|
+
*/
|
261
|
+
Dropify.prototype.setPreview = function(src)
|
262
|
+
{
|
263
|
+
this.wrapper.removeClass('has-error').addClass('has-preview');
|
264
|
+
this.filenameWrapper.children('.dropify-filename-inner').html(this.file.name);
|
265
|
+
var render = this.preview.children('.dropify-render');
|
266
|
+
|
267
|
+
this.hideLoader();
|
268
|
+
|
269
|
+
if (this.isImage() === true) {
|
270
|
+
var imgTag = $('<img />').attr('src', src);
|
271
|
+
|
272
|
+
if (this.settings.height) {
|
273
|
+
imgTag.css("max-height", this.settings.height);
|
274
|
+
}
|
275
|
+
|
276
|
+
imgTag.appendTo(render);
|
277
|
+
} else {
|
278
|
+
$('<i />').attr('class', 'dropify-font-file').appendTo(render);
|
279
|
+
$('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
|
280
|
+
}
|
281
|
+
this.preview.fadeIn();
|
282
|
+
};
|
283
|
+
|
284
|
+
/**
|
285
|
+
* Reset the preview
|
286
|
+
*/
|
287
|
+
Dropify.prototype.resetPreview = function()
|
288
|
+
{
|
289
|
+
this.wrapper.removeClass('has-preview');
|
290
|
+
var render = this.preview.children('.dropify-render');
|
291
|
+
render.find('.dropify-extension').remove();
|
292
|
+
render.find('i').remove();
|
293
|
+
render.find('img').remove();
|
294
|
+
this.preview.hide();
|
295
|
+
this.hideLoader();
|
296
|
+
};
|
297
|
+
|
298
|
+
/**
|
299
|
+
* Clean the src and get the filename
|
300
|
+
*
|
301
|
+
* @param {String} src
|
302
|
+
*
|
303
|
+
* @return {String} filename
|
304
|
+
*/
|
305
|
+
Dropify.prototype.cleanFilename = function(src)
|
306
|
+
{
|
307
|
+
var filename = src.split('\\').pop();
|
308
|
+
if (filename == src) {
|
309
|
+
filename = src.split('/').pop();
|
310
|
+
}
|
311
|
+
|
312
|
+
return src != "" ? filename : '';
|
313
|
+
};
|
314
|
+
|
315
|
+
/**
|
316
|
+
* Clear the element, events are available
|
317
|
+
*/
|
318
|
+
Dropify.prototype.clearElement = function()
|
319
|
+
{
|
320
|
+
if (this.errorsEvent.errors.length === 0) {
|
321
|
+
var eventBefore = $.Event("dropify.beforeClear");
|
322
|
+
this.input.trigger(eventBefore, [this]);
|
323
|
+
|
324
|
+
if (eventBefore.result !== false) {
|
325
|
+
this.resetFile();
|
326
|
+
this.input.val('');
|
327
|
+
this.resetPreview();
|
328
|
+
|
329
|
+
this.input.trigger($.Event("dropify.afterClear"), [this]);
|
330
|
+
}
|
331
|
+
} else {
|
332
|
+
this.resetFile();
|
333
|
+
this.input.val('');
|
334
|
+
this.resetPreview();
|
335
|
+
}
|
336
|
+
};
|
337
|
+
|
338
|
+
/**
|
339
|
+
* Reset file informations
|
340
|
+
*/
|
341
|
+
Dropify.prototype.resetFile = function()
|
342
|
+
{
|
343
|
+
this.file.object = null;
|
344
|
+
this.file.name = null;
|
345
|
+
this.file.size = null;
|
346
|
+
this.file.type = null;
|
347
|
+
this.file.width = null;
|
348
|
+
this.file.height = null;
|
349
|
+
};
|
350
|
+
|
351
|
+
/**
|
352
|
+
* Set the container height
|
353
|
+
*/
|
354
|
+
Dropify.prototype.setContainerSize = function()
|
355
|
+
{
|
356
|
+
if (this.settings.height) {
|
357
|
+
this.wrapper.height(this.settings.height);
|
358
|
+
}
|
359
|
+
};
|
360
|
+
|
361
|
+
/**
|
362
|
+
* Test if it's touch screen
|
363
|
+
*
|
364
|
+
* @return {Boolean}
|
365
|
+
*/
|
366
|
+
Dropify.prototype.isTouchDevice = function()
|
367
|
+
{
|
368
|
+
return (('ontouchstart' in window)
|
369
|
+
|| (navigator.MaxTouchPoints > 0)
|
370
|
+
|| (navigator.msMaxTouchPoints > 0));
|
371
|
+
};
|
372
|
+
|
373
|
+
/**
|
374
|
+
* Get the file type.
|
375
|
+
*
|
376
|
+
* @return {String}
|
377
|
+
*/
|
378
|
+
Dropify.prototype.getFileType = function()
|
379
|
+
{
|
380
|
+
return this.file.name.split('.').pop().toLowerCase();
|
381
|
+
};
|
382
|
+
|
383
|
+
/**
|
384
|
+
* Test if the file is an image
|
385
|
+
*
|
386
|
+
* @return {Boolean}
|
387
|
+
*/
|
388
|
+
Dropify.prototype.isImage = function()
|
389
|
+
{
|
390
|
+
if (this.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
|
391
|
+
return true;
|
392
|
+
}
|
393
|
+
|
394
|
+
return false;
|
395
|
+
};
|
396
|
+
|
397
|
+
/**
|
398
|
+
* Translate messages if needed.
|
399
|
+
*/
|
400
|
+
Dropify.prototype.translateMessages = function()
|
401
|
+
{
|
402
|
+
for (var name in this.settings.tpl) {
|
403
|
+
for (var key in this.settings.messages) {
|
404
|
+
this.settings.tpl[name] = this.settings.tpl[name].replace('{{ ' + key + ' }}', this.settings.messages[key]);
|
405
|
+
}
|
406
|
+
}
|
407
|
+
};
|
408
|
+
|
409
|
+
/**
|
410
|
+
* Check the limit filesize.
|
411
|
+
*/
|
412
|
+
Dropify.prototype.checkFileSize = function()
|
413
|
+
{
|
414
|
+
if (this.maxFileSizeToByte() !== 0 && this.file.size > this.maxFileSizeToByte()) {
|
415
|
+
this.pushError("fileSize");
|
416
|
+
}
|
417
|
+
};
|
418
|
+
|
419
|
+
/**
|
420
|
+
* Convert filesize to byte.
|
421
|
+
*
|
422
|
+
* @return {Int} value
|
423
|
+
*/
|
424
|
+
Dropify.prototype.maxFileSizeToByte = function()
|
425
|
+
{
|
426
|
+
var value = 0;
|
427
|
+
|
428
|
+
if (this.settings.maxFileSize !== 0) {
|
429
|
+
var unit = this.settings.maxFileSize.slice(-1).toUpperCase(),
|
430
|
+
kb = 1024,
|
431
|
+
mb = kb * 1024,
|
432
|
+
gb = mb * 1024;
|
433
|
+
|
434
|
+
if (unit === 'K') {
|
435
|
+
value = parseFloat(this.settings.maxFileSize) * kb;
|
436
|
+
} else if (unit === 'M') {
|
437
|
+
value = parseFloat(this.settings.maxFileSize) * mb;
|
438
|
+
} else if (unit === 'G') {
|
439
|
+
value = parseFloat(this.settings.maxFileSize) * gb;
|
440
|
+
}
|
441
|
+
}
|
442
|
+
|
443
|
+
return value;
|
444
|
+
};
|
445
|
+
|
446
|
+
/**
|
447
|
+
* Validate image dimensions and format
|
448
|
+
*/
|
449
|
+
Dropify.prototype.validateImage = function()
|
450
|
+
{
|
451
|
+
if (this.settings.minWidth !== 0 && this.settings.minWidth >= this.file.width) {
|
452
|
+
this.pushError("minWidth");
|
453
|
+
}
|
454
|
+
|
455
|
+
if (this.settings.maxWidth !== 0 && this.settings.maxWidth <= this.file.width) {
|
456
|
+
this.pushError("maxWidth");
|
457
|
+
}
|
458
|
+
|
459
|
+
if (this.settings.minHeight !== 0 && this.settings.minHeight >= this.file.height) {
|
460
|
+
this.pushError("minHeight");
|
461
|
+
}
|
462
|
+
|
463
|
+
if (this.settings.maxHeight !== 0 && this.settings.maxHeight <= this.file.height) {
|
464
|
+
this.pushError("maxHeight");
|
465
|
+
}
|
466
|
+
|
467
|
+
if (this.settings.allowedFormats.indexOf(this.getImageFormat()) == "-1") {
|
468
|
+
this.pushError("imageFormat");
|
469
|
+
}
|
470
|
+
};
|
471
|
+
|
472
|
+
/**
|
473
|
+
* Get image format.
|
474
|
+
*
|
475
|
+
* @return {String}
|
476
|
+
*/
|
477
|
+
Dropify.prototype.getImageFormat = function()
|
478
|
+
{
|
479
|
+
if (this.file.width == this.file.height) {
|
480
|
+
return "square";
|
481
|
+
}
|
482
|
+
|
483
|
+
if (this.file.width < this.file.height) {
|
484
|
+
return "portrait";
|
485
|
+
}
|
486
|
+
|
487
|
+
if (this.file.width > this.file.height) {
|
488
|
+
return "landscape";
|
489
|
+
}
|
490
|
+
};
|
491
|
+
|
492
|
+
/**
|
493
|
+
* Push error
|
494
|
+
*
|
495
|
+
* @param {String} errorKey
|
496
|
+
*/
|
497
|
+
Dropify.prototype.pushError = function(errorKey) {
|
498
|
+
var e = $.Event("dropify.error." + errorKey);
|
499
|
+
this.errorsEvent.errors.push(e);
|
500
|
+
this.input.trigger(e, [this]);
|
501
|
+
};
|
502
|
+
|
503
|
+
/**
|
504
|
+
* Clear errors
|
505
|
+
*/
|
506
|
+
Dropify.prototype.clearErrors = function()
|
507
|
+
{
|
508
|
+
if (typeof this.errorsContainer !== "undefined") {
|
509
|
+
this.errorsContainer.children('ul').html('');
|
510
|
+
}
|
511
|
+
};
|
512
|
+
|
513
|
+
/**
|
514
|
+
* Show error in DOM
|
515
|
+
*
|
516
|
+
* @param {String} errorKey
|
517
|
+
*/
|
518
|
+
Dropify.prototype.showError = function(errorKey)
|
519
|
+
{
|
520
|
+
if (typeof this.errorsContainer !== "undefined") {
|
521
|
+
this.errorsContainer.children('ul').append('<li>' + this.getError(errorKey) + '</li>');
|
522
|
+
}
|
523
|
+
};
|
524
|
+
|
525
|
+
/**
|
526
|
+
* Get error message
|
527
|
+
*
|
528
|
+
* @return {String} message
|
529
|
+
*/
|
530
|
+
Dropify.prototype.getError = function(errorKey)
|
531
|
+
{
|
532
|
+
var error = this.settings.error[errorKey],
|
533
|
+
value = '';
|
534
|
+
|
535
|
+
if (errorKey === 'fileSize') {
|
536
|
+
value = this.settings.maxFileSize;
|
537
|
+
} else if (errorKey === 'minWidth') {
|
538
|
+
value = this.settings.minWidth;
|
539
|
+
} else if (errorKey === 'maxWidth') {
|
540
|
+
value = this.settings.maxWidth;
|
541
|
+
} else if (errorKey === 'minHeight') {
|
542
|
+
value = this.settings.minHeight;
|
543
|
+
} else if (errorKey === 'maxHeight') {
|
544
|
+
value = this.settings.maxHeight;
|
545
|
+
} else if (errorKey === 'imageFormat') {
|
546
|
+
value = this.settings.allowedFormats.join(' ');
|
547
|
+
}
|
548
|
+
|
549
|
+
if (value !== '') {
|
550
|
+
return error.replace('{{ value }}', value);
|
551
|
+
}
|
552
|
+
|
553
|
+
return error;
|
554
|
+
};
|
555
|
+
|
556
|
+
/**
|
557
|
+
* Show the loader
|
558
|
+
*/
|
559
|
+
Dropify.prototype.showLoader = function()
|
560
|
+
{
|
561
|
+
if (typeof this.loader !== "undefined") {
|
562
|
+
this.loader.show();
|
563
|
+
}
|
564
|
+
};
|
565
|
+
|
566
|
+
/**
|
567
|
+
* Hide the loader
|
568
|
+
*/
|
569
|
+
Dropify.prototype.hideLoader = function()
|
570
|
+
{
|
571
|
+
if (typeof this.loader !== "undefined") {
|
572
|
+
this.loader.hide();
|
573
|
+
}
|
574
|
+
};
|
575
|
+
|
576
|
+
/**
|
577
|
+
* Destroy dropify
|
578
|
+
*/
|
579
|
+
Dropify.prototype.destroy = function()
|
580
|
+
{
|
581
|
+
this.input.siblings().remove();
|
582
|
+
this.input.unwrap();
|
583
|
+
this.isInit = false;
|
584
|
+
};
|
585
|
+
|
586
|
+
/**
|
587
|
+
* Init dropify
|
588
|
+
*/
|
589
|
+
Dropify.prototype.init = function()
|
590
|
+
{
|
591
|
+
this.createElements();
|
592
|
+
};
|
593
|
+
|
594
|
+
/**
|
595
|
+
* Test if element is init
|
596
|
+
*/
|
597
|
+
Dropify.prototype.isDropified = function()
|
598
|
+
{
|
599
|
+
return this.isInit;
|
600
|
+
};
|
601
|
+
|
602
|
+
$.fn[pluginName] = function(options) {
|
603
|
+
this.each(function() {
|
604
|
+
if (!$.data(this, pluginName)) {
|
605
|
+
$.data(this, pluginName, new Dropify(this, options));
|
606
|
+
}
|
607
|
+
});
|
608
|
+
|
609
|
+
return this;
|
610
|
+
};
|
611
|
+
|