Ghost/ghost/admin/app/components/gh-image-uploader.js

import Component from '@ember/component';
import ghostPaths from 'ghost-admin/utils/ghost-paths';
import {GENERIC_ERROR_MESSAGE} from 'ghost-admin/services/notifications';
import {
    UnsupportedMediaTypeError,
    isRequestEntityTooLargeError,
    isUnsupportedMediaTypeError,
    isVersionMismatchError
} from 'ghost-admin/services/ajax';
import {computed, get} from '@ember/object';
import {htmlSafe} from '@ember/template';
import {inject} from 'ghost-admin/decorators/inject';
import {isArray} from '@ember/array';
import {isBlank} from '@ember/utils';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';

export const IMAGE_MIME_TYPES = 'image/gif,image/jpg,image/jpeg,image/png,image/svg+xml,image/webp';
export const IMAGE_EXTENSIONS = ['gif', 'jpg', 'jpeg', 'png', 'svg', 'svgz', 'webp'];
export const IMAGE_PARAMS = {purpose: 'image'};

export const ICON_EXTENSIONS = ['gif', 'ico', 'jpg', 'jpeg', 'png', 'svg', 'svgz', 'webp'];
export const ICON_MIME_TYPES = 'image/x-icon,image/vnd.microsoft.icon,image/gif,image/jpg,image/jpeg,image/png,image/svg+xml,image/webp';
export const ICON_PARAMS = {purpose: 'icon'};

export default Component.extend({
    ajax: service(),
    notifications: service(),
    settings: service(),

    tagName: 'section',
    classNames: ['gh-image-uploader'],
    classNameBindings: ['dragClass'],

    image: null,
    text: '',
    altText: '',
    saveButton: true,
    accept: '',
    extensions: null,
    uploadUrl: null,
    paramName: 'file',
    paramsHash: null,
    resourceName: 'images',
    validate: null,
    allowUnsplash: false,

    dragClass: null,
    failureMessage: null,
    file: null,
    url: null,
    uploadPercentage: 0,

    _defaultAccept: IMAGE_MIME_TYPES,
    _defaultExtensions: IMAGE_EXTENSIONS,
    _defaultUploadUrl: '/images/upload/',
    _defaultParamsHash: IMAGE_PARAMS,
    _showUnsplash: false,

    // Allowed actions
    fileSelected: () => {},
    update: () => {},
    uploadStarted: () => {},
    uploadFinished: () => {},
    uploadSuccess: () => {},
    uploadFailed: () => {},

    config: inject(),

    // TODO: this wouldn't be necessary if the server could accept direct
    // file uploads
    formData: computed('file', function () {
        let file = this.file;
        let formData = new FormData();

        formData.append(this.paramName, file);

        Object.keys(this.paramsHash || {}).forEach((key) => {
            formData.append(key, this.paramsHash[key]);
        });

        return formData;
    }),

    description: computed('text', 'altText', function () {
        let altText = this.altText;

        return this.text || (altText ? `Upload image of "${altText}"` : 'Upload an image');
    }),

    progressStyle: computed('uploadPercentage', function () {
        let percentage = this.uploadPercentage;
        let width = '';

        if (percentage > 0) {
            width = `${percentage}%`;
        } else {
            width = '0';
        }

        return htmlSafe(`width: ${width}`);
    }),

    init() {
        this._super(...arguments);

        if (!this.accept) {
            this.set('accept', this._defaultAccept);
        }
        if (!this.extensions) {
            this.set('extensions', this._defaultExtensions);
        }
        if (!this.uploadUrl) {
            this.set('uploadUrl', this._defaultUploadUrl);
        }
        if (!this.paramsHash) {
            this.set('paramsHash', this._defaultParamsHash);
        }
    },

    didReceiveAttrs() {
        this._super(...arguments);

        let image = this.image;
        this.set('url', image);
    },

    actions: {
        fileSelected(fileList, resetInput) {
            // can't use array destructuring here as FileList is not a strict
            // array and fails in Safari
            let file = fileList[0];
            let validationResult = this._validate(file);

            this.set('file', file);
            this.fileSelected(file);

            if (validationResult === true) {
                run.schedule('actions', this, function () {
                    this.generateRequest();

                    if (resetInput) {
                        resetInput();
                    }
                });
            } else {
                this._uploadFailed(validationResult);

                if (resetInput) {
                    resetInput();
                }
            }
        },

        addUnsplashPhoto({src}) {
            this.set('url', src);
            this.send('saveUrl');
        },

        reset() {
            this.set('file', null);
            this.set('uploadPercentage', 0);
        },

        saveUrl() {
            let url = this.url;
            this.update(url);
        }
    },

    dragOver(event) {
        if (!event.dataTransfer) {
            return;
        }

        // this is needed to work around inconsistencies with dropping files
        // from Chrome's downloads bar
        if (navigator.userAgent.indexOf('Chrome') > -1) {
            let eA = event.dataTransfer.effectAllowed;
            event.dataTransfer.dropEffect = (eA === 'move' || eA === 'linkMove') ? 'move' : 'copy';
        }

        event.stopPropagation();
        event.preventDefault();

        this.set('dragClass', '-drag-over');
    },

    dragLeave(event) {
        event.preventDefault();
        this.set('dragClass', null);
    },

    drop(event) {
        event.preventDefault();

        this.set('dragClass', null);

        if (event.dataTransfer.files) {
            this.send('fileSelected', event.dataTransfer.files);
        }
    },

    _uploadProgress(event) {
        if (event.lengthComputable) {
            run(() => {
                let percentage = Math.round((event.loaded / event.total) * 100);
                if (!this.isDestroyed && !this.isDestroying) {
                    this.set('uploadPercentage', percentage);
                }
            });
        }
    },

    _uploadSuccess(response) {
        let uploadResponse;
        let responseUrl;

        try {
            uploadResponse = JSON.parse(response);
        } catch (e) {
            if (!(e instanceof SyntaxError)) {
                throw e;
            }
        }

        if (uploadResponse) {
            let resource = get(uploadResponse, this.resourceName);
            if (resource && isArray(resource) && resource[0]) {
                responseUrl = get(resource[0], 'url');
            }
        }

        this.set('url', responseUrl);
        this.send('saveUrl');
        this.send('reset');
        this.uploadSuccess(responseUrl);
    },

    _uploadFailed(error) {
        let message;

        if (isVersionMismatchError(error)) {
            this.notifications.showAPIError(error);
        }

        if (isUnsupportedMediaTypeError(error)) {
            let validExtensions = this.extensions.join(', .').toUpperCase();
            validExtensions = `.${validExtensions}`;

            message = `The image type you uploaded is not supported. Please use ${validExtensions}`;
        } else if (isRequestEntityTooLargeError(error)) {
            message = 'The image you uploaded was larger than the maximum file size your server allows.';
        } else if (!isBlank(error.payload?.errors?.[0]?.message)) {
            message = error.payload.errors[0].message;
        } else {
            console.error(error); // eslint-disable-line
            message = GENERIC_ERROR_MESSAGE;
        }

        this.set('failureMessage', message);
        this.uploadFailed(error);
    },

    generateRequest() {
        let ajax = this.ajax;
        let formData = this.formData;
        let uploadUrl = this.uploadUrl;
        // CASE: we want to upload an icon and we have to POST it to a different endpoint, expecially for icons
        let url = `${ghostPaths().apiRoot}${uploadUrl}`;

        this.uploadStarted();

        ajax.post(url, {
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'text',
            xhr: () => {
                let xhr = new window.XMLHttpRequest();

                xhr.upload.addEventListener('progress', (event) => {
                    this._uploadProgress(event);
                }, false);

                return xhr;
            }
        }).then((response) => {
            this._uploadSuccess(response);
        }).catch((error) => {
            this._uploadFailed(error);
        }).finally(() => {
            this.uploadFinished();
        });
    },

    _validate(file) {
        if (this.validate) {
            return this.validate(file);
        } else {
            return this._defaultValidator(file);
        }
    },

    _defaultValidator(file) {
        let extensions = this.extensions;
        let [, extension] = (/(?:\.([^.]+))?$/).exec(file.name);

        if (!isArray(extensions)) {
            extensions = extensions.split(',');
        }

        if (!extension || extensions.indexOf(extension.toLowerCase()) === -1) {
            return new UnsupportedMediaTypeError();
        }

        return true;
    }
});