Skip to content

Commit 218f129

Browse files
author
Simon Korn
committed
iOS had problems with clickable div element so it's now a button
1 parent 4823c89 commit 218f129

6 files changed

+48
-17
lines changed

‎addon.css

+12
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
display: block;
33
}
44

5+
[base64-file-upload] {
6+
cursor: pointer;
7+
}
8+
59
.base64-file--drop-area {
10+
width:100%;
11+
background: transparent;
12+
color: inherit;
613
cursor: pointer;
714
border-radius: 5px;
815
padding: 0 40px;
@@ -17,6 +24,11 @@
1724
flex-wrap: wrap;
1825
align-items: center;
1926
border: 2px dashed rgba(0, 0, 0, 0.3);
27+
outline: none;
28+
}
29+
30+
.base64-file--drop-area:focus {
31+
outline: none;
2032
}
2133

2234
.base64-file--drop-area-description {

‎demo/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<html>
22
<head>
3+
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
34
<script src="../bower_components/angular/angular.min.js"></script>
45
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
56
<script src="../bower_components/tv4/tv4.js"></script>

‎dist/angular-schema-form-base64-file-upload.js

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module("templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("src/templates/angular-schema-form-base64-file-upload.html","<div class=\"angular-schema-form--base64-file\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess(), \'has-feedback\': form.feedback !== false}\">\n <label class=\"control-label\" ng-hide=\"form.notitle\">{{form.title}}</label>\n <div base64-file-upload=\"form\" sf-field-model schema-validate=\"form\">\n <label>\n <input type=\"file\" class=\"base64-file--input\" style=\"display:none;\" ng-disabled=\"hasFile\"/>\n <div class=\"base64-file--drop-area\" ng-class=\"{\'file-hovering\': dropAreaHover, \'has-file\': hasFile}\">\n\n <div class=\"base64-file--file\" ng-show=\"hasFile\">\n <div class=\"base64-file--file-preview\"\n ng-style=\"{\'background-image\': isImage(file) ? \'url(\' + file.src + \')\': \'\'}\">\n <span ng-show=\"!isImage(file)\">{{file.ext}}</span>\n </div>\n <div class=\"base64-file--file-name\">{{file.name}}</div>\n <div class=\"base64-file--file-size\">{{file.humanSize}}</div>\n <div class=\"base64-file--file-remove\" ng-click=\"removeFile($event)\">&#10005</div>\n </div>\n <span ng-hide=\"hasFile\" class=\"base64-file--drop-area-description\">{{form.placeholder || dropText}}</span>\n </div>\n </label>\n </div>\n\n <span class=\"help-block\" sf-message=\"form.description\"></span>\n</div>\n");}]);
1+
angular.module("templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("src/templates/angular-schema-form-base64-file-upload.html","<div class=\"angular-schema-form--base64-file\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess(), \'has-feedback\': form.feedback !== false}\">\n <label class=\"control-label\" ng-hide=\"form.notitle\">{{form.title}}</label>\n <div base64-file-upload=\"form\" sf-field-model schema-validate=\"form\">\n <input type=\"file\" class=\"base64-file--input\" style=\"visibility:hidden;position:absolute;top:0;left:0;\" ng-disabled=\"hasFile\"/>\n <button class=\"base64-file--drop-area\" ng-class=\"{\'file-hovering\': dropAreaHover, \'has-file\': hasFile}\">\n\n <div class=\"base64-file--file\" ng-show=\"hasFile\">\n <div class=\"base64-file--file-preview\"\n ng-style=\"{\'background-image\': isImage(file) ? \'url(\' + file.src + \')\': \'\'}\">\n <span ng-show=\"!isImage(file)\">{{file.ext}}</span>\n </div>\n <div class=\"base64-file--file-name\">{{file.name}}</div>\n <div class=\"base64-file--file-size\">{{file.humanSize}}</div>\n <div class=\"base64-file--file-remove\" ng-click=\"removeFile($event)\">&#10005</div>\n </div>\n <span ng-hide=\"hasFile\" class=\"base64-file--drop-area-description\">{{form.placeholder || dropText}}</span>\n </button>\n </div>\n\n <span class=\"help-block\" sf-message=\"form.description\"></span>\n</div>\n");}]);
22
angular.module('angularSchemaFormBase64FileUpload', [
33
'schemaForm',
44
'templates'
@@ -134,7 +134,13 @@ angular.module('angularSchemaFormBase64FileUpload').directive('base64FileUpload'
134134
getFile(e.target.files[0]);
135135
});
136136

137-
var dropArea = document.getElementsByClassName('base64-file--drop-area')[0];
137+
var dropArea = element.find('.base64-file--drop-area')[0];
138+
var inputField = element.find('.base64-file--input')[0];
139+
140+
var clickArea = function(e) {
141+
e.stopPropagation();
142+
inputField.click();
143+
}
138144

139145
var dragOver = function(e) {
140146
e.preventDefault();
@@ -157,12 +163,16 @@ angular.module('angularSchemaFormBase64FileUpload').directive('base64FileUpload'
157163
getFile(e.dataTransfer.files[0]);
158164
}
159165

166+
dropArea.addEventListener("click", clickArea, false);
167+
dropArea.addEventListener("touchstart", clickArea, false);
160168
dropArea.addEventListener("dragenter", dragOver, false);
161169
dropArea.addEventListener("dragleave", dragLeave, false);
162170
dropArea.addEventListener("dragover", dragOver, false);
163171
dropArea.addEventListener("drop", drop, false);
164172

165173
scope.$on('$destroy', function () {
174+
dropArea.removeEventListener("click", clickArea, false);
175+
dropArea.removeEventListener("touchstart", clickArea, false);
166176
dropArea.removeEventListener("dragenter", dragOver, false);
167177
dropArea.removeEventListener("dragleave", dragLeave, false);
168178
dropArea.removeEventListener("dragover", dragOver, false);

‎dist/angular-schema-form-base64-file-upload.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/directives/base64-file-upload.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,13 @@ angular.module('angularSchemaFormBase64FileUpload').directive('base64FileUpload'
9494
getFile(e.target.files[0]);
9595
});
9696

97-
var dropArea = document.getElementsByClassName('base64-file--drop-area')[0];
97+
var dropArea = element.find('.base64-file--drop-area')[0];
98+
var inputField = element.find('.base64-file--input')[0];
99+
100+
var clickArea = function(e) {
101+
e.stopPropagation();
102+
inputField.click();
103+
}
98104

99105
var dragOver = function(e) {
100106
e.preventDefault();
@@ -117,12 +123,16 @@ angular.module('angularSchemaFormBase64FileUpload').directive('base64FileUpload'
117123
getFile(e.dataTransfer.files[0]);
118124
}
119125

126+
dropArea.addEventListener("click", clickArea, false);
127+
dropArea.addEventListener("touchstart", clickArea, false);
120128
dropArea.addEventListener("dragenter", dragOver, false);
121129
dropArea.addEventListener("dragleave", dragLeave, false);
122130
dropArea.addEventListener("dragover", dragOver, false);
123131
dropArea.addEventListener("drop", drop, false);
124132

125133
scope.$on('$destroy', function () {
134+
dropArea.removeEventListener("click", clickArea, false);
135+
dropArea.removeEventListener("touchstart", clickArea, false);
126136
dropArea.removeEventListener("dragenter", dragOver, false);
127137
dropArea.removeEventListener("dragleave", dragLeave, false);
128138
dropArea.removeEventListener("dragover", dragOver, false);

‎src/templates/angular-schema-form-base64-file-upload.html

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
<div class="angular-schema-form--base64-file" ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false}">
22
<label class="control-label" ng-hide="form.notitle">{{form.title}}</label>
33
<div base64-file-upload="form" sf-field-model schema-validate="form">
4-
<label>
5-
<input type="file" class="base64-file--input" style="display:none;" ng-disabled="hasFile"/>
6-
<div class="base64-file--drop-area" ng-class="{'file-hovering': dropAreaHover, 'has-file': hasFile}">
4+
<input type="file" class="base64-file--input" style="visibility:hidden;position:absolute;top:0;left:0;" ng-disabled="hasFile"/>
5+
<button class="base64-file--drop-area" ng-class="{'file-hovering': dropAreaHover, 'has-file': hasFile}">
76

8-
<div class="base64-file--file" ng-show="hasFile">
9-
<div class="base64-file--file-preview"
10-
ng-style="{'background-image': isImage(file) ? 'url(' + file.src + ')': ''}">
11-
<span ng-show="!isImage(file)">{{file.ext}}</span>
12-
</div>
13-
<div class="base64-file--file-name">{{file.name}}</div>
14-
<div class="base64-file--file-size">{{file.humanSize}}</div>
15-
<div class="base64-file--file-remove" ng-click="removeFile($event)">&#10005</div>
7+
<div class="base64-file--file" ng-show="hasFile">
8+
<div class="base64-file--file-preview"
9+
ng-style="{'background-image': isImage(file) ? 'url(' + file.src + ')': ''}">
10+
<span ng-show="!isImage(file)">{{file.ext}}</span>
1611
</div>
17-
<span ng-hide="hasFile" class="base64-file--drop-area-description">{{form.placeholder || dropText}}</span>
12+
<div class="base64-file--file-name">{{file.name}}</div>
13+
<div class="base64-file--file-size">{{file.humanSize}}</div>
14+
<div class="base64-file--file-remove" ng-click="removeFile($event)">&#10005</div>
1815
</div>
19-
</label>
16+
<span ng-hide="hasFile" class="base64-file--drop-area-description">{{form.placeholder || dropText}}</span>
17+
</button>
2018
</div>
2119

2220
<span class="help-block" sf-message="form.description"></span>

0 commit comments

Comments
 (0)