Ghost/ghost/admin/app/controllers/settings/labs.js

import classic from 'ember-classic-decorator';
import {inject as service} from '@ember/service';
/* eslint-disable ghost/ember/alias-model-in-controller */
import Controller from '@ember/controller';
import DeleteAllModal from '../../components/settings/labs/delete-all-content-modal';
import ImportContentModal from '../../components/modal-import-content';
import RSVP from 'rsvp';
import config from 'ghost-admin/config/environment';
import {
    UnsupportedMediaTypeError,
    isRequestEntityTooLargeError,
    isUnsupportedMediaTypeError
} from 'ghost-admin/services/ajax';
import {action} from '@ember/object';
import {inject} from 'ghost-admin/decorators/inject';
import {isBlank} from '@ember/utils';
import {isArray as isEmberArray} from '@ember/array';
import {run} from '@ember/runloop';
import {task, timeout} from 'ember-concurrency';

const {Promise} = RSVP;

const IMPORT_MIME_TYPES = [
    'application/json',
    'application/zip',
    'application/x-zip-compressed'
];

const JSON_EXTENSION = ['json'];
const JSON_MIME_TYPE = ['application/json'];

const YAML_EXTENSION = ['yaml'];
const YAML_MIME_TYPE = [
    'text/vnd.yaml',
    'application/vnd.yaml',
    'text/x-yaml',
    'application/x-yaml'
];

@classic
export default class LabsController extends Controller {
    @service ajax;
    @service feature;
    @service ghostPaths;
    @service modals;
    @service notifications;
    @service session;
    @service settings;
    @service utils;

    @inject config;

    importErrors = null;
    importSuccessful = false;
    showEarlyAccessModal = false;
    submitting = false;
    uploadButtonText = 'Import';
    importMimeType = null;
    redirectsFileExtensions = null;
    redirectsFileMimeTypes = null;
    yamlExtension = null;
    yamlMimeType = null;
    yamlAccept = null;

    init() {
        super.init(...arguments);
        this.importMimeType = IMPORT_MIME_TYPES;
        this.redirectsFileExtensions = [...JSON_EXTENSION, ...YAML_EXTENSION];
        // .yaml is added below for file dialogs to show .yaml by default.
        this.redirectsFileMimeTypes = [...JSON_MIME_TYPE, ...YAML_MIME_TYPE, '.yaml'];
        this.yamlExtension = YAML_EXTENSION;
        this.yamlMimeType = YAML_MIME_TYPE;
        // (macOS) Safari only allows files with the `yml` extension to be selected with the specified MIME types
        // so explicitly allow the `yaml` extension.
        this.yamlAccept = [...this.yamlMimeType, ...Array.from(this.yamlExtension, extension => '.' + extension)];
    }

    @action
    onUpload(file) {
        let formData = new FormData();
        let notifications = this.notifications;
        let currentUserId = this.get('session.user.id');
        let dbUrl = this.get('ghostPaths.url').api('db');

        this.set('uploadButtonText', 'Importing');
        this.set('importErrors', null);
        this.set('importSuccessful', false);

        return this._validate(file).then(() => {
            formData.append('importfile', file);

            return this.ajax.post(dbUrl, {
                data: formData,
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false
            });
        }).then((response) => {
            let store = this.store;

            this.set('importSuccessful', true);

            if (response.problems) {
                this.set('importErrors', response.problems);
            }

            // Clear the store, so that all the new data gets fetched correctly.
            store.unloadAll();

            // NOTE: workaround for behaviour change in Ember 2.13
            // store.unloadAll has some async tendencies so we need to schedule
            // the reload of the current user once the unload has finished
            // https://github.com/emberjs/data/issues/4963
            run.schedule('destroy', this, () => {
                // Reload currentUser and set session
                this.session.populateUser({id: currentUserId});

                // TODO: keep as notification, add link to view content
                notifications.showNotification('Import successful', {key: 'import.upload.success'});

                // reload settings
                return this.settings.reload().then((settings) => {
                    this.feature.fetch();
                    this.config.blogTitle = settings.title;
                });
            });
        }).catch((response) => {
            if (isUnsupportedMediaTypeError(response) || isRequestEntityTooLargeError(response)) {
                this.set('importErrors', [response]);
            } else if (response && response.payload.errors && isEmberArray(response.payload.errors)) {
                this.set('importErrors', response.payload.errors);
            } else {
                this.set('importErrors', [{message: 'Import failed due to an unknown error. Check the Web Inspector console and network tabs for errors.'}]);
            }

            throw response;
        }).finally(() => {
            this.set('uploadButtonText', 'Import');
        });
    }

    @action
    importContent() {
        return this.modals.open(ImportContentModal);
    }

    @action
    downloadFile(endpoint) {
        this.utils.downloadFile(this.ghostPaths.url.api(endpoint));
    }

    @action
    confirmDeleteAll() {
        return this.modals.open(DeleteAllModal);
    }

    @action
    toggleEarlyAccessModal() {
        this.toggleProperty('showEarlyAccessModal');
    }

    /**
     * Opens a file selection dialog - Triggered by "Upload x" buttons,
     * searches for the hidden file input within the .gh-setting element
     * containing the clicked button then simulates a click
     * @param  {MouseEvent} event - MouseEvent fired by the button click
     */
    @action
    triggerFileDialog(event) {
        // simulate click to open file dialog
        event?.target.closest('.gh-setting-action')?.querySelector('input[type="file"]')?.click();
    }

    // TODO: convert to ember-concurrency task
    _validate(file) {
        // Windows doesn't have mime-types for json files by default, so we
        // need to have some additional checking
        if (file.type === '') {
            // First check file extension so we can early return
            let [, extension] = (/(?:\.([^.]+))?$/).exec(file.name);

            if (!extension || extension.toLowerCase() !== 'json') {
                return RSVP.reject(new UnsupportedMediaTypeError());
            }

            return new Promise((resolve, reject) => {
                // Extension is correct, so check the contents of the file
                let reader = new FileReader();

                reader.onload = function () {
                    let {result} = reader;

                    try {
                        JSON.parse(result);

                        return resolve();
                    } catch (e) {
                        return reject(new UnsupportedMediaTypeError());
                    }
                };

                reader.readAsText(file);
            });
        }

        let accept = this.importMimeType;

        if (!isBlank(accept) && file && accept.indexOf(file.type) === -1) {
            return RSVP.reject(new UnsupportedMediaTypeError());
        }

        return RSVP.resolve();
    }

    @(task(function* (success) {
        this.set('redirectSuccess', success);
        this.set('redirectFailure', !success);

        yield timeout(config.environment === 'test' ? 100 : 5000);

        this.set('redirectSuccess', null);
        this.set('redirectFailure', null);
        return true;
    }).drop())
        redirectUploadResult;

    @(task(function* (success) {
        this.set('routesSuccess', success);
        this.set('routesFailure', !success);

        yield timeout(config.environment === 'test' ? 100 : 5000);

        this.set('routesSuccess', null);
        this.set('routesFailure', null);
        return true;
    }).drop())
        routesUploadResult;

    reset() {
        this.set('importErrors', null);
        this.set('importSuccessful', false);
    }
}