Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-file.hbs

<KoenigCard
    @env={{@env}}
    @class={{"ba b--transparent relative kg-card-hover kg-card kg-file-card mih10 miw-100 relative" (kg-style "breakout" size=@payload.cardWidth)}}
    @headerOffset={{@headerOffset}}
    @toolbar={{this.toolbar}}
    @payload={{@payload}}
    @isSelected={{@isSelected}}
    @isEditing={{@isEditing}}
    @selectCard={{@selectCard}}
    @deselectCard={{@deselectCard}}
    @editCard={{@editCard}}
    @hasEditMode={{not this.isEmpty}}
    @saveCard={{@saveCard}}
    @saveAsSnippet={{@saveAsSnippet}}
    @addParagraphAfterCard={{@addParagraphAfterCard}}
    @moveCursorToPrevSection={{@moveCursorToPrevSection}}
    @moveCursorToNextSection={{@moveCursorToNextSection}}
    @editor={{@editor}}
    {{did-insert this.didInsert}}
    {{on "dragover" this.dragOver}}
    {{on "dragleave" this.dragLeave}}
    {{on "drop" this.drop}}
    as |card|
>
    {{#if @payload.src}}
        <div class="kg-upload-container {{if (and (not @isEditing) (or (not @payload.fileTitle) (not @payload.fileCaption))) "medium"}} {{if (and (not @isEditing) (and (not @payload.fileTitle) (not @payload.fileCaption))) "small"}}">
            <div class="kg-media-container light">
                <button class="kg-upload-button">
                    {{svg-jar "file-upload" class="kg-file-icon"}}
                </button>
            </div>

            <div class="kg-file-data-container">
                <div class="kg-file-inputs">
                    <GhTextInput
                        @value={{@payload.fileTitle}}
                        @placeholder="File title"
                        @input={{action "setFileTitle" value="target.value"}}
                        @class="kg-upload-title {{if (and (not @isEditing) (not @payload.fileTitle)) "hide"}}"
                        @maxlength="80"
                    />
                    <GhTextInput
                        @value={{@payload.fileCaption}}
                        @input={{action "setFileCaption" value="target.value"}}
                        @placeholder="Add optional file description"
                        @class="kg-upload-caption  {{if (and (not @isEditing) (not @payload.fileCaption)) "hide"}}"
                        @maxlength="100"
                    />
                </div>
                <div class="kg-upload-metadata">
                {{!-- </div>style="display:flex;line-height:1.15;margin-top:10px;margin-left:10px;font-size:1.3rem"> --}}
                    {{this.fileName}} <span class="kg-upload-filesize">&bull; {{this.fileSize}}</span>
                </div>
            </div>
        </div>
        {{#if (not @isEditing)}}
            <div class="koenig-card-click-overlay"></div>
        {{/if}}
    {{else}}
        <div class="kg-upload-container kg-upload-container-empty">
            <GhUploader
                @uploadUrl="/files/upload/"
                @resourceName="files"
                @files={{this.files}}
                @onStart={{this.fileUploadStarted}}
                @onComplete={{this.fileUploadCompleted}}
                @onFailed={{this.fileUploadFailed}}
                as |uploader|
            >
                {{#if (or uploader.errors uploader.isUploading)}}
                    {{#if uploader.errors}}
                        <span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
                            {{uploader.errors.firstObject.message}}
                        </span>
                    {{/if}}

                    {{#if this.isDraggedOver}}
                        <span class="db center sans-serif fw7 f7 middarkgrey">
                            Drop it like it's hot 🔥
                        </span>
                    {{else if uploader.isUploading}}
                        {{uploader.progressBar}}
                    {{/if}}
                {{else}}
                    {{#if this.isDraggedOver}}
                        <span class="db center sans-serif fw7 f7 middarkgrey">
                            Drop it like it's hot 🔥
                        </span>
                    {{else if uploader.isUploading}}
                        {{uploader.progressBar}}
                    {{else}}
                        <div {{on "click" this.triggerFileDialog}} class="flex pa4 midgrey">
                            {{svg-jar "upload"}}
                            <span class="kg-upload-placeholder-text">
                                Click to upload a file
                            </span>
                        </div>
                    {{/if}}
                {{/if}}

                <div style="display:none">
                    <GhFileInput
                        @multiple={{false}}
                        @action={{uploader.setFiles}}
                        @onInsert={{uploader.registerFileInput}}
                    />
                </div>
            </GhUploader>
        </div>
    {{/if}}
</KoenigCard>