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:
parent
36ac8ccb41
commit
41313f6993
5 changed files with 81 additions and 40 deletions
20
ghost/admin/app/components/gh-file-input.hbs
Normal file
20
ghost/admin/app/components/gh-file-input.hbs
Normal 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>
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
16
yarn.lock
16
yarn.lock
|
@ -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"
|
||||
|
|
Loading…
Add table
Reference in a new issue