Skip to content
This repository has been archived by the owner on Nov 19, 2018. It is now read-only.

Commit

Permalink
chore(cleanup): tidy up the code
Browse files Browse the repository at this point in the history
  • Loading branch information
Ray Nicholus committed Oct 25, 2014
1 parent 463a66f commit 43240b4
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 51 deletions.
4 changes: 2 additions & 2 deletions file-input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
position: relative;
}

#fileInputInput {
#fileInput {
bottom: 0;
height: 100%;
left: 0;
Expand All @@ -49,7 +49,7 @@

<input
accept="{{accept}}"
id="fileInputInput"
id="fileInput"
on-change="{{changeHandler}}"
type="file"
>
Expand Down
89 changes: 50 additions & 39 deletions file-input.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
(function() {
var getLowerCaseExtension = function(filename) {
var arrayOf = function(pseudoArray) {
return Array.prototype.slice.call(pseudoArray);
},

getLowerCaseExtension = function(filename) {
var extIdx = filename.lastIndexOf(".") + 1;

if (extIdx > 0) {
Expand Down Expand Up @@ -74,7 +78,7 @@
// This is the only way (I am aware of) to reset an `<input type="file">`
// without removing it from the DOM. Removing it disconnects it
// from the CE/Polymer.
resetInput = function() {
resetInput = function(customEl) {
// create a form with a hidden reset button
var tempForm = document.createElement("form"),
tempResetButton = document.createElement("button");
Expand All @@ -84,41 +88,41 @@
tempForm.appendChild(tempResetButton);

// temporarily move the `<input type="file">` into the form & add form to DOM
this.$.fileInputInput.parentNode.insertBefore(tempForm, this.$.fileInputInput);
tempForm.appendChild(this.$.fileInputInput);
customEl.$.fileInput.parentNode.insertBefore(tempForm, customEl.$.fileInput);
tempForm.appendChild(customEl.$.fileInput);

// reset the `<input type="file">`
tempResetButton.click();

// move the `<input type="file">` back to its original spot & remove form
tempForm.parentNode.appendChild(this.$.fileInputInput);
tempForm.parentNode.appendChild(customEl.$.fileInput);
tempForm.parentNode.removeChild(tempForm);

updateValidity.call(this);
updateValidity(customEl);
},

setupValidationTarget = function() {
validationTarget = document.createElement('input');
validationTarget.setAttribute('type', 'text');
setupValidationTarget = function(customEl) {
validationTarget = document.createElement("input");
validationTarget.setAttribute("type", "text");

validationTarget.style.width = 0;
validationTarget.style.height = 0;
validationTarget.style.opacity = 0;

validationTarget.customElementRef = this;

this.parentNode.insertBefore(validationTarget, this);
validationTarget.customElementRef = customEl;

customEl.parentNode.insertBefore(validationTarget, customEl);

updateValidity.call(this);
updateValidity(customEl);
},

updateValidity = function() {
updateValidity = function(customEl) {
if (validationTarget) {
if (this.files.length) {
if (customEl.files.length) {
validationTarget.setCustomValidity("");
}
else {
validationTarget.setCustomValidity(this.invalidText);
validationTarget.setCustomValidity(customEl.invalidText);
}
}
},
Expand All @@ -128,17 +132,18 @@

this.fileInput = {
changeHandler: function() {
var files = Array.prototype.slice.call(this.$.fileInputInput.files),
var customEl = this,
files = arrayOf(customEl.$.fileInput.files),
invalid = {count: 0},
valid = [];

// Some browsers may fire a change event when the file chooser
// dialog is closed via cancel button. In this case, the
//files array will be empty and the event should be ignored.
if (files.length) {
var sizeValidationResult = getResultOfSizeValidation(this.minSize, this.maxSize, files);
var extensionValidationResult = getResultOfExtensionsValidation(this.extensions, sizeValidationResult.valid);
var countLimitValidationResult = getResultOfCountLimitValidation(this.maxFiles, extensionValidationResult.valid);
var sizeValidationResult = getResultOfSizeValidation(customEl.minSize, customEl.maxSize, files);
var extensionValidationResult = getResultOfExtensionsValidation(customEl.extensions, sizeValidationResult.valid);
var countLimitValidationResult = getResultOfCountLimitValidation(customEl.maxFiles, extensionValidationResult.valid);

if (sizeValidationResult.tooBig.length) {
invalid.tooBig = sizeValidationResult.tooBig;
Expand All @@ -159,17 +164,19 @@

valid = countLimitValidationResult.valid;

this.invalid = invalid;
this.files = valid;
customEl.invalid = invalid;
customEl.files = valid;

updateValidity.call(this);
this.fire("change", {invalid: invalid, valid: valid});
updateValidity(customEl);
customEl.fire("change", {invalid: invalid, valid: valid});
}
},

created: function() {
this.files = [];
this.invalid = {count: 0};
var customEl = this;

customEl.files = [];
customEl.invalid = {count: 0};
},

invalidText: "No valid files selected.",
Expand All @@ -181,34 +188,38 @@
minSize: 0,

domReady: function() {
if (this.camera != null && isIos()) {
this.maxFiles = 1;
var customEl = this;

if (customEl.camera != null && isIos()) {
customEl.maxFiles = 1;

var iosCameraAccept = "image/*;capture=camera";
if (this.accept && this.accept.length.trim().length > 0) {
this.accept += "," + iosCameraAccept;
if (customEl.accept && customEl.accept.length.trim().length > 0) {
customEl.accept += "," + iosCameraAccept;
}
else {
this.accept = iosCameraAccept;
customEl.accept = iosCameraAccept;
}
}

if (this.maxFiles !== 1) {
this.$.fileInputInput.setAttribute("multiple", "");
if (customEl.maxFiles !== 1) {
customEl.$.fileInput.setAttribute("multiple", "");
}

if (this.directory != null && this.$.fileInputInput.webkitdirectory !== undefined) {
this.$.fileInputInput.setAttribute("webkitdirectory", "");
if (customEl.directory != null && customEl.$.fileInput.webkitdirectory !== undefined) {
customEl.$.fileInput.setAttribute("webkitdirectory", "");
}

if (this.required != null) {
setupValidationTarget.call(this);
if (customEl.required != null) {
setupValidationTarget(customEl);
}
},

reset: function() {
this.created();
resetInput.call(this);
var customEl = this;

customEl.created();
resetInput(customEl);
}
};
}());
20 changes: 10 additions & 10 deletions test/unit/file-input-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe("file-input custom element tests", function() {

this.customElementInstance = {
$: {
fileInputInput: fileInputEl
fileInput: fileInputEl
},

fire: function() {}
Expand Down Expand Up @@ -47,7 +47,7 @@ describe("file-input custom element tests", function() {
fileInput.domReady.call(this.customElementInstance);
expect(this.fileInputEl.hasAttribute("webkitdirectory")).toBeFalsy();

this.customElementInstance.$.fileInputInput.webkitdirectory = false;
this.customElementInstance.$.fileInput.webkitdirectory = false;
fileInput.domReady.call(this.customElementInstance);
expect(this.fileInputEl.hasAttribute("webkitdirectory")).toBeFalsy();

Expand All @@ -63,7 +63,7 @@ describe("file-input custom element tests", function() {
fileInput.invalid = {count: 1, tooBig: [4]};

var div = document.createElement("div");
div.appendChild(this.customElementInstance.$.fileInputInput);
div.appendChild(this.customElementInstance.$.fileInput);

this.customElementInstance.created = function() {
fileInput.created.call(fileInput);
Expand All @@ -83,7 +83,7 @@ describe("file-input custom element tests", function() {
{name: "plain.txt", size: 2000}
];

this.customElementInstance.$.fileInputInput.files = {
this.customElementInstance.$.fileInput.files = {
"0": expectedValid[0],
"1": expectedValid[1],
length: 2
Expand All @@ -100,7 +100,7 @@ describe("file-input custom element tests", function() {
it("ignores native change event if no files were selected", function() {
this.customElementInstance.files = [1, 2];

this.customElementInstance.$.fileInputInput.files = {length: 0};
this.customElementInstance.$.fileInput.files = {length: 0};

spyOn(this.customElementInstance, "fire");
fileInput.changeHandler.call(this.customElementInstance);
Expand All @@ -125,7 +125,7 @@ describe("file-input custom element tests", function() {
]
};

this.customElementInstance.$.fileInputInput.files = [
this.customElementInstance.$.fileInput.files = [
{name: "pic.jpg", size: 1000},
{name: "plain.txt", size: 2000},
{name: "foo.bar", size: 3000}
Expand All @@ -152,7 +152,7 @@ describe("file-input custom element tests", function() {
]
};

this.customElementInstance.$.fileInputInput.files = [
this.customElementInstance.$.fileInput.files = [
{name: "pic.jpg", size: 1000},
{name: "plain.txt", size: 2000},
{name: "foo.bar", size: 3000}
Expand All @@ -179,7 +179,7 @@ describe("file-input custom element tests", function() {
]
};

this.customElementInstance.$.fileInputInput.files = [
this.customElementInstance.$.fileInput.files = [
{name: "pic.jpg", size: 1000},
{name: "plain.txt", size: 2000},
{name: "foo.bar", size: 3000}
Expand All @@ -206,7 +206,7 @@ describe("file-input custom element tests", function() {
]
};

this.customElementInstance.$.fileInputInput.files = [
this.customElementInstance.$.fileInput.files = [
{name: "pic.jpg", size: 1000},
{name: "plain.txt", size: 2000},
{name: "foo.bar", size: 3000}
Expand Down Expand Up @@ -244,7 +244,7 @@ describe("file-input custom element tests", function() {
]
};

this.customElementInstance.$.fileInputInput.files = [
this.customElementInstance.$.fileInput.files = [
{name: "pic.jpg", size: 1000},
{name: "pic2.jpg", size: 1000},
{name: "pic3.jpg", size: 1000},
Expand Down

0 comments on commit 43240b4

Please sign in to comment.