From 11963829fc973c455fe4d219c6bd861569441cfe Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Thu, 18 Jul 2019 12:35:14 +0200 Subject: [PATCH] Added typings for image upload --- README.md | 2 +- types/easymde-test.ts | 25 +++++++++++++++++++++++++ types/easymde.d.ts | 25 +++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 72d9a94..d240400 100644 --- a/README.md +++ b/README.md @@ -154,7 +154,7 @@ easyMDE.value('New input for **EasyMDE**'); - **imageAccept**: A comma-separated list of mime-types used to check image type before upload (note: never trust client, always check file types at server-side). Defaults to `image/png, image/jpeg`. - **imageUploadEndpoint**: The endpoint where the images data will be sent, via an asynchronous *POST* request. The server is supposed to save this image, and return a json response. - if the request was successfully processed (HTTP 200-OK): `{"data": {"filePath": ""}}` where *filePath* is the relative path of the image; - - otherwise: `{"error": ""}`, where *errorCode* can be `noFileGiven` (HTTP 400), `typeNotAllowed` (HTTP 415), `fileTooLarge` (HTTP 413) or `importError` (see *errorMessages* below). If *errorCode* is not one of the *errorMessages*, it is alerted unchanged to the user. This allows for server side error messages. + - otherwise: `{"error": ""}`, where *errorCode* can be `noFileGiven` (HTTP 400), `typeNotAllowed` (HTTP 415), `fileTooLarge` (HTTP 413) or `importError` (see *errorMessages* below). If *errorCode* is not one of the *errorMessages*, it is alerted unchanged to the user. This allows for server side error messages. No default value. - **imageCSRFToken**: CSRF token to include with AJAX call to upload image. For instance used with Django backend. - **imageTexts**: Texts displayed to the user (mainly on the status bar) for the import image feature, where `#image_name#`, `#image_size#` and `#image_max_size#` will replaced by their respective values, that can be used for customization or internationalization: diff --git a/types/easymde-test.ts b/types/easymde-test.ts index f240ee9..b2fc8dc 100644 --- a/types/easymde-test.ts +++ b/types/easymde-test.ts @@ -59,3 +59,28 @@ const editor2 = new EasyMDE({ }); editor2.clearAutosavedValue(); + +const editorImages = new EasyMDE({ + uploadImage: true, + imageAccept: 'image/png, image/bmp', + imageCSRFToken: undefined, + imageMaxSize: 10485760, + imageUploadEndpoint: 'https://my.domain/image-upload/', + imageTexts: { + sbInit: 'Drag & drop images!', + sbOnDragEnter: 'Let it go, let it go', + sbOnDrop: 'Uploading...', + sbProgress: 'Uploading... (#progress#)', + sbOnUploaded: 'Upload complete!', + sizeUnits: 'b,Kb,Mb' + }, + errorMessages: { + noFileGiven: 'Please select a file', + imageTypeNotAllowed: 'This file type is not allowed!', + imageTooLarge: 'Image too big', + imageImportError: 'Something went oops!', + }, + errorCallback: (errorMessage) => { + console.error(errorMessage); + }, +}); diff --git a/types/easymde.d.ts b/types/easymde.d.ts index 2055b77..84ba65d 100644 --- a/types/easymde.d.ts +++ b/types/easymde.d.ts @@ -86,6 +86,22 @@ declare namespace EasyMDE { noMobile?: boolean; } + interface ImageTextsOptions { + sbInit?: string; + sbOnDragEnter?: string; + sbOnDrop?: string; + sbProgress?: string; + sbOnUploaded?: string; + sizeUnits?: string; + } + + interface ImageErrorTextsOptions { + noFileGiven?: string; + imageTypeNotAllowed?: string; + imageTooLarge?: string; + imageImportError?: string; + } + interface Options { autoDownloadFontAwesome?: boolean; autofocus?: boolean; @@ -114,6 +130,15 @@ declare namespace EasyMDE { toolbarTips?: boolean; onToggleFullScreen?: (goingIntoFullScreen: boolean) => void; theme?: string; + + uploadImage?: boolean; + imageMaxSize?: number; + imageAccept?: string; + imageUploadEndpoint?: string; + imageCSRFToken?: string; + imageTexts?: ImageTextsOptions; + errorMessages?: ImageErrorTextsOptions; + errorCallback?: (errorMessage: string) => void; } }