Skip to main content

Upload handling

To handle images uploaded into a TinyMCE editor's content by a user, a few things have to be done:

Client-side code: extra TinyMCE initialisation parameters

Initialising the TinyMCE editor to allow for image uploading requires adding a few extra initialisation options: file_picker_types, automatic_uploads, and file_picker_callback.

In addition, the image plugin needs to be enabled, and the toolbar needs to have an image option on its menu for users to actually open the file picker and upload an image.

let tinymceOpts = {
	plugins: `emoticons link autolink image lists preview table help code autoresize`,
	selector: `#commission-info-content-editing-inner-inner-container`,
	image_title: false,
	image_description: false,
    images_file_types: 'jpg,jpeg,png',
	height: "",
	automatic_uploads: true,
    // Specifies which file types can be uploaded
	file_picker_types: 'image',
    // The callback function for the TinyMCE file picker
	file_picker_callback: async (cb, value, meta) => {
		dcLogger.debug(meta);
		// The callback is triggered when the select file button is pressed.
		const input = document.createElement('input');
		input.setAttribute('type', 'file');
		input.setAttribute('accept', 'image/*');
		input.addEventListener('change', (e) => {
			// This is triggered when a file is submitted in the file input dialog.
			const file = e.target.files[0];
			let flowOptions = {
				target: `/forms/upload/ProcessUpload`,
				query: {
					upload_type: 'descmedia',
					page_name: 'commission-info',
				},
				fileSuccess: function (file, message) {
					let jsonMsg = JSON.parse(message);
					let name = file.name.substring(0, file.name.lastIndexOf("."));
                    // Set the image to take 50% of the container space by default,
                    // with the height unset i.e. preserving its aspect ratio
					cb(jsonMsg.url, {title: name, width: `50%`, 'height': ``});
				},
				complete: function () {

				},
				fileError: function () {

				},
				filesSubmitted: function (files) {

				},
				catchAll: function () {

				},
			};
			let flowUploader = FlowUploaderManager.createFlowUploader(flowOptions);
			flowUploader.addFile(file);
			flowUploader.upload();
		});

		input.click();
	},
	toolbar: `emoticons | undo redo | styles | link | bold italic underline backcolor forecolor | image | numlist bullist table | help`,
};
Server-side code: validation, upload and S3 urls

Within the /src/Core/UploadHandler class, image uploads to TinyMCE are uploaded to S3, and if the user saves the editor content, resized via AWS Lambda to 1080p resolution.

The original uploaded image is stored in the /tmpuploads/ folder, with the resized images being saved into the /userimages/descmedia/<userID>/<pageName>/ folder.

Back to top