0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00

Replaced emberx-file-input addon with in-app implementation

refs https://github.com/TryGhost/Team/issues/1734

- resolves some deprecations raised by the addon which has fallen out of regular maintenance
- we were largely overriding much of the addon so the additional code was minimal, most of the changes were from updating to modern patterns
This commit is contained in:
Kevin Ansfield 2022-08-31 22:16:41 +01:00
parent 36ac8ccb41
commit 41313f6993
5 changed files with 81 additions and 40 deletions

View file

@ -0,0 +1,20 @@
<span class="x-file-input" {{on "change" this.onChange}} ...attributes>
<input
type="file"
id={{this.inputId}}
class="x-file--input"
name={{@name}}
disabled={{@disabled}}
multiple={{@multiple}}
accept={{@accept}}
{{on "change" this.onChange}}
{{did-insert this.registerFileInput}}
>
<label for="{{this.inputId}}">
{{#if (has-block)}}
{{yield}}
{{else}}
{{this.alt}}
{{/if}}
</label>
</span>

View file

@ -1,34 +1,29 @@
import XFileInput from 'emberx-file-input/components/x-file-input';
import classic from 'ember-classic-decorator';
import Component from '@glimmer/component';
import {action} from '@ember/object';
import {guidFor} from '@ember/object/internals';
// TODO: remove this override and use {{x-file-input}} directly once we've
// upgraded to emberx-file-input@1.2.0
export default class GhFileInput extends Component {
inputId = `fileInput-${guidFor(this)}`;
inputElement = null;
@classic
export default class GhFileInput extends XFileInput {
didInsertElement() {
super.didInsertElement(...arguments);
this.onInsert?.(this.element.querySelector('input[type="file"]'));
get alt() {
return this.args.alt === undefined ? 'Upload' : this.args.alt;
}
change(e) {
let action = this.action;
let files = this.files(e);
@action
onChange(e) {
e.stopPropagation();
const files = this.files(e);
if (files.length && action) {
action(files, this.resetInput.bind(this));
if (files.length) {
this.args.action?.(files, this.resetInput);
}
}
/**
* Gets files from event object.
*
* @method
* @private
* @param {$.Event || Event}
*/
files(e) {
return (e.originalEvent || e).testingFiles || e.originalEvent?.files || e.target.files;
@action
registerFileInput(inputElement) {
this.inputElement = inputElement;
this.args.didInsert?.(this.inputElement);
}
/**
@ -40,14 +35,28 @@ export default class GhFileInput extends XFileInput {
*
* @method
*/
@action
resetInput() {
let input = this.element.querySelector('.x-file--input');
const input = this.inputElement;
input.removeAttribute('value');
input.value = null;
const clone = input.cloneNode(true);
this.inputElement = clone;
input.parentNode.replaceChild(clone, input);
return clone;
}
/**
* Gets files from event object.
*
* @method
* @private
* @param {$.Event || Event}
*/
files(e) {
return (e.originalEvent || e).testingFiles || e.originalEvent?.files || e.target.files || e.files;
}
}

View file

@ -1,3 +1,30 @@
/* gh-file-input
/* ---------------------------------------------------------- */
/* Hide the original input */
.x-file--input {
width: 1px;
height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
z-index: -1;
}
.x-file--input + label {
display: inline-block;
cursor: pointer;
}
.x-file--input:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.x-file--input + label * {
pointer-events: none;
}
/* Image Uploader
/* ---------------------------------------------------------- */

View file

@ -120,7 +120,6 @@
"ember-test-selectors": "6.0.0",
"ember-tooltips": "3.6.0",
"ember-truth-helpers": "3.1.1",
"emberx-file-input": "1.2.1",
"eslint": "8.23.0",
"eslint-plugin-babel": "5.3.1",
"eslint-plugin-react": "7.31.1",

View file

@ -7213,11 +7213,6 @@ chai-dom@1.11.0:
resolved "https://registry.yarnpkg.com/chai-dom/-/chai-dom-1.11.0.tgz#aa3af405b3d9b0470d185b17081ed23ca5fdaeb4"
integrity sha512-ZzGlEfk1UhHH5+N0t9bDqstOxPEXmn3EyXvtsok5rfXVDOFDJbHVy12rED6ZwkJAUDs2w7/Da4Hlq2LB63kltg==
chai-jquery@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/chai-jquery/-/chai-jquery-2.1.0.tgz#ce40fb5d853e7886688787f16d14cd9595388563"
integrity sha512-DiKSXcmInlt4d+WC5PkisDL5MsgJPd1lCSfZ3NgeSZJ34CJntEIpPOCdpalH2IhOWHeLpESJaiuHFxX1dpZ6bw==
chai@4.3.6:
version "4.3.6"
resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.6.tgz#ffe4ba2d9fa9d6680cc0b370adae709ec9011e9c"
@ -9510,7 +9505,7 @@ ember-cli-htmlbars@6.1.0, ember-cli-htmlbars@^6.0.0, ember-cli-htmlbars@^6.0.1:
silent-error "^1.1.1"
walk-sync "^2.2.0"
ember-cli-htmlbars@^2.0.1, ember-cli-htmlbars@^2.0.3:
ember-cli-htmlbars@^2.0.3:
version "2.0.5"
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-2.0.5.tgz#b5a105429a6bce4f7c9c97b667e3b8926e31397f"
integrity sha512-3f3PAxdnQ/fhQa8XP/3z4RLRgLHxV8j4Ln75aHbRdemOCjBa048KxL9l+acRLhCulbGQCMnLiIUIC89PAzLrcA==
@ -10595,15 +10590,6 @@ ember-truth-helpers@3.1.1, "ember-truth-helpers@^2.1.0 || ^3.0.0":
dependencies:
ember-cli-babel "^7.22.1"
emberx-file-input@1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/emberx-file-input/-/emberx-file-input-1.2.1.tgz#a9214a9b3278c270a4d60e58836d2c1b98bce0ab"
integrity sha512-sDgoVTk/jnu5oghzGx4a2P0dbHpZXdomk8YWAbHone44sgdxXV/LpCC8EgOEvSmagv19E+CSfGJNzCNYcM59kg==
dependencies:
chai-jquery "^2.0.0"
ember-cli-babel "^6.6.0"
ember-cli-htmlbars "^2.0.1"
emits@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/emits/-/emits-3.0.0.tgz#32752bba95e1707b219562384ab9bb8b1fd62f70"