2
0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-03 08:04:29 -06:00

[wip upload-image] use more generic error codes, so the server could be used to upload other files than images

This commit is contained in:
Nathanaël Jourdane 2019-03-12 15:59:40 +01:00
parent fb1ce409bb
commit 4ac86cc49d
2 changed files with 10 additions and 8 deletions

View File

@ -151,7 +151,9 @@ easyMDE.value('New input for **EasyMDE**');
- **uploadImage**: If set to `true`, enables the image upload functionality, which can be triggered by drag&drop, copy-paste and through the browse-file window (opened when the user click on the *upload-image* icon). Defaults to `false`. - **uploadImage**: If set to `true`, enables the image upload functionality, which can be triggered by drag&drop, copy-paste and through the browse-file window (opened when the user click on the *upload-image* icon). Defaults to `false`.
- **imageMaxSize**: Maximum image size in bytes, checked before upload (note: never trust client, always check image size at server-side). Defaults to `1024*1024*2` (2Mb). - **imageMaxSize**: Maximum image size in bytes, checked before upload (note: never trust client, always check image size at server-side). Defaults to `1024*1024*2` (2Mb).
- **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`. - **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 200-OK HTTP response containing: `{"data": {"filePath": "<imageFilePath>"}}` where *imageFilePath* is the relative path of the image, otherwise, return `{"error": "<errorCode>"}`, where *errorCode* can be `noFileGiven`, `imageTypeNotAllowed`, `imageTooLarge` or `imageImportError` (see *errorMessages* below). No default value. - **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": "<filePath>"}}` where *filePath* is the relative path of the image;
- otherwise: `{"error": "<errorCode>"}`, where *errorCode* can be `noFileGiven` (HTTP 400), `typeNotAllowed` (HTTP 415), `fileTooLarge` (HTTP 413) or `importError` (see *errorMessages* below). No default value.
- **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: - **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:
- **sbInit**: Status message displayed initially if `uploadImage` is set to `true`. Defaults to `Attach files by drag and dropping or pasting from clipboard.`. - **sbInit**: Status message displayed initially if `uploadImage` is set to `true`. Defaults to `Attach files by drag and dropping or pasting from clipboard.`.
- **sbOnDragEnter**: Status message displayed when the user drags a file to the text area. Defaults to `Drop image to upload it.`. - **sbOnDragEnter**: Status message displayed when the user drags a file to the text area. Defaults to `Drop image to upload it.`.

View File

@ -1431,10 +1431,10 @@ var imageTexts = {
*/ */
var errorMessages = { var errorMessages = {
noFileGiven: 'You must select a file.', noFileGiven: 'You must select a file.',
imageTypeNotAllowed: 'This image type is not allowed.', typeNotAllowed: 'This image type is not allowed.',
imageTooLarge: 'Image #image_name# is too big (#image_size#).\n' + fileTooLarge: 'Image #image_name# is too big (#image_size#).\n' +
'Maximum file size is #image_max_size#.', 'Maximum file size is #image_max_size#.',
imageImportError: 'Something went wrong when uploading the image #image_name#.', importError: 'Something went wrong when uploading the image #image_name#.',
}; };
/** /**
@ -1924,7 +1924,7 @@ EasyMDE.prototype.uploadImage = function(file, onSuccess, onError) {
} }
if (file.size > this.options.imageMaxSize) { if (file.size > this.options.imageMaxSize) {
onError(fillErrorMessage(this.options.errorMessages.imageTooLarge)); onError(fillErrorMessage(this.options.errorMessages.fileTooLarge));
} }
var formData = new FormData(); var formData = new FormData();
@ -1946,7 +1946,7 @@ EasyMDE.prototype.uploadImage = function(file, onSuccess, onError) {
var response = JSON.parse(this.responseText); var response = JSON.parse(this.responseText);
} catch (error) { } catch (error) {
console.log('EasyMDE: The server did not return a valid json.'); console.log('EasyMDE: The server did not return a valid json.');
onError(fillErrorMessage(self.options.errorMessages.imageImportError)); onError(fillErrorMessage(self.options.errorMessages.importError));
return; return;
} }
if(this.status === 200 && response && !response.error && response.data && response.data.filePath) { if(this.status === 200 && response && !response.error && response.data && response.data.filePath) {
@ -1957,7 +1957,7 @@ EasyMDE.prototype.uploadImage = function(file, onSuccess, onError) {
} else { } else {
console.log('EasyMDE: Received an unexpected response after uploading the image.' console.log('EasyMDE: Received an unexpected response after uploading the image.'
+ this.status + ' (' + this.statusText + ')'); + this.status + ' (' + this.statusText + ')');
onError(fillErrorMessage(self.options.errorMessages.imageImportError)); onError(fillErrorMessage(self.options.errorMessages.importError));
} }
} }
}; };
@ -1965,7 +1965,7 @@ EasyMDE.prototype.uploadImage = function(file, onSuccess, onError) {
request.onerror = function (event) { request.onerror = function (event) {
console.log('EasyMDE: An unexpected error occurred when trying to upload the image.' console.log('EasyMDE: An unexpected error occurred when trying to upload the image.'
+ event.target.status + ' (' + event.target.statusText + ')'); + event.target.status + ' (' + event.target.statusText + ')');
onError(self.options.errorMessages.imageImportError); onError(self.options.errorMessages.importError);
}; };
}; };