From 0448cd108bc24f2608bd6be417f9015f7ad69ea6 Mon Sep 17 00:00:00 2001 From: Madani Badaoui Date: Wed, 17 Jul 2024 09:27:41 +0100 Subject: [PATCH 1/4] fix(issue 256): upload issue with images fix --- dev/server.js | 14 ++++++++------ src/index.ts | 4 ++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/dev/server.js b/dev/server.js index 3309e308..1477e3ec 100644 --- a/dev/server.js +++ b/dev/server.js @@ -86,12 +86,12 @@ class ServerExample { this.getForm(request) .then(({files}) => { - let image = files[this.fieldName] || {}; + let image = files[this.fieldName][0] || {}; responseJson.success = 1; responseJson.file = { - url: image.path, - name: image.name, + url: image.filepath, + name: image.newFilename, size: image.size }; }) @@ -147,10 +147,12 @@ class ServerExample { */ getForm(request) { return new Promise((resolve, reject) => { - const form = new formidable.IncomingForm(); + const form = new formidable.IncomingForm({ + uploadDir: this.uploadDir, + keepExtensions: true + }); - form.uploadDir = this.uploadDir; - form.keepExtensions = true; + console.error('the form info:', form); form.parse(request, (err, fields, files) => { if (err) { diff --git a/src/index.ts b/src/index.ts index 0c367629..c42162a1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -99,8 +99,8 @@ export default class ImageTool implements BlockTool { endpoints: config.endpoints, additionalRequestData: config.additionalRequestData, additionalRequestHeaders: config.additionalRequestHeaders, - field: config.field, - types: config.types, + field: config.field || 'image', + types: config.types || 'image/*', captionPlaceholder: this.api.i18n.t(config.captionPlaceholder ? config.captionPlaceholder: 'Caption'), buttonContent: config.buttonContent, uploader: config.uploader, From 30294cca2660924739f20cbe2d33c1c6a7de6e40 Mon Sep 17 00:00:00 2001 From: Madani Badaoui Date: Wed, 17 Jul 2024 13:20:57 +0100 Subject: [PATCH 2/4] update: few changes in providing data --- dev/server.js | 2 +- src/types/types.ts | 4 ++-- src/uploader.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dev/server.js b/dev/server.js index 1477e3ec..7ec1e065 100644 --- a/dev/server.js +++ b/dev/server.js @@ -90,7 +90,7 @@ class ServerExample { responseJson.success = 1; responseJson.file = { - url: image.filepath, + url: 'file://' + image.filepath, name: image.newFilename, size: image.size }; diff --git a/src/types/types.ts b/src/types/types.ts index f4b564f6..53945d7c 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -117,12 +117,12 @@ export interface ImageConfig { /** * Field name for the uploaded image. */ - field?: string; + field: string; /** * Allowed mime-types for the uploaded image. */ - types?: string; + types: string; /** * Placeholder text for the caption field. diff --git a/src/uploader.ts b/src/uploader.ts index 3f456ba9..006b4690 100644 --- a/src/uploader.ts +++ b/src/uploader.ts @@ -72,7 +72,7 @@ export default class Uploader { // custom uploading if (this.config.uploader && typeof this.config.uploader.uploadByFile === 'function') { const uploadByFile = this.config.uploader.uploadByFile; - upload = ajax.selectFiles({ accept: this.config.types || 'image/*'}).then((files: File[]) => { + upload = ajax.selectFiles({ accept: this.config.types}).then((files: File[]) => { preparePreview(files[0]); const customUpload = uploadByFile(files[0]); @@ -181,7 +181,7 @@ export default class Uploader { */ const formData = new FormData(); - formData.append(this.config.field || 'image', file); + formData.append(this.config.field, file); if (this.config.additionalRequestData && Object.keys(this.config.additionalRequestData).length) { Object.entries(this.config.additionalRequestData).forEach(([name, value]: [string, any]) => { From f491ecde0e8719717979a9853a210a918f70ddf8 Mon Sep 17 00:00:00 2001 From: dependentmadani Date: Wed, 17 Jul 2024 14:00:11 +0100 Subject: [PATCH 3/4] update: some parameters are optional --- src/index.ts | 4 ++-- src/types/types.ts | 4 ++-- src/uploader.ts | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/index.ts b/src/index.ts index c42162a1..0c367629 100644 --- a/src/index.ts +++ b/src/index.ts @@ -99,8 +99,8 @@ export default class ImageTool implements BlockTool { endpoints: config.endpoints, additionalRequestData: config.additionalRequestData, additionalRequestHeaders: config.additionalRequestHeaders, - field: config.field || 'image', - types: config.types || 'image/*', + field: config.field, + types: config.types, captionPlaceholder: this.api.i18n.t(config.captionPlaceholder ? config.captionPlaceholder: 'Caption'), buttonContent: config.buttonContent, uploader: config.uploader, diff --git a/src/types/types.ts b/src/types/types.ts index 53945d7c..f4b564f6 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -117,12 +117,12 @@ export interface ImageConfig { /** * Field name for the uploaded image. */ - field: string; + field?: string; /** * Allowed mime-types for the uploaded image. */ - types: string; + types?: string; /** * Placeholder text for the caption field. diff --git a/src/uploader.ts b/src/uploader.ts index 006b4690..d7348078 100644 --- a/src/uploader.ts +++ b/src/uploader.ts @@ -72,7 +72,7 @@ export default class Uploader { // custom uploading if (this.config.uploader && typeof this.config.uploader.uploadByFile === 'function') { const uploadByFile = this.config.uploader.uploadByFile; - upload = ajax.selectFiles({ accept: this.config.types}).then((files: File[]) => { + upload = ajax.selectFiles({ accept: this.config.types || 'image/*'}).then((files: File[]) => { preparePreview(files[0]); const customUpload = uploadByFile(files[0]); @@ -89,12 +89,12 @@ export default class Uploader { upload = ajax.transport({ url: this.config.endpoints.byFile, data: this.config.additionalRequestData, - accept: this.config.types, + accept: this.config.types || 'image/*', headers: new Headers(this.config.additionalRequestHeaders as Record), beforeSend: (files: File[]) => { preparePreview(files[0]); }, - fieldName: this.config.field, + fieldName: this.config.field || 'image', }).then((response: any) => response.body); } @@ -181,7 +181,7 @@ export default class Uploader { */ const formData = new FormData(); - formData.append(this.config.field, file); + formData.append(this.config.field || 'image', file); if (this.config.additionalRequestData && Object.keys(this.config.additionalRequestData).length) { Object.entries(this.config.additionalRequestData).forEach(([name, value]: [string, any]) => { From 3180915c4015836d5dd8232cdbf93308e689706c Mon Sep 17 00:00:00 2001 From: dependentmadani Date: Wed, 17 Jul 2024 14:53:55 +0100 Subject: [PATCH 4/4] update(version): increase the patch version --- package.json | 2 +- src/types/codexteam__ajax.d.ts | 2 +- src/uploader.ts | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 4666afa9..147e0954 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/image", - "version": "2.9.1", + "version": "2.9.2", "keywords": [ "codex editor", "image", diff --git a/src/types/codexteam__ajax.d.ts b/src/types/codexteam__ajax.d.ts index 63c45a52..f7101558 100644 --- a/src/types/codexteam__ajax.d.ts +++ b/src/types/codexteam__ajax.d.ts @@ -3,7 +3,7 @@ declare module '@codexteam/ajax' { url?: string; data?: any; accept?: string; - headers?: Headers; + headers?: object; beforeSend?: (files: File[]) => void; fieldName?: string; type?: string; diff --git a/src/uploader.ts b/src/uploader.ts index d7348078..32d7b39f 100644 --- a/src/uploader.ts +++ b/src/uploader.ts @@ -90,7 +90,7 @@ export default class Uploader { url: this.config.endpoints.byFile, data: this.config.additionalRequestData, accept: this.config.types || 'image/*', - headers: new Headers(this.config.additionalRequestHeaders as Record), + headers: this.config.additionalRequestHeaders as Record, beforeSend: (files: File[]) => { preparePreview(files[0]); }, @@ -133,7 +133,7 @@ export default class Uploader { url: url, }, this.config.additionalRequestData), type: ajax.contentType.JSON, - headers: new Headers(this.config.additionalRequestHeaders as Record), + headers: this.config.additionalRequestHeaders as Record, }).then((response: any) => response.body); } @@ -193,7 +193,7 @@ export default class Uploader { url: this.config.endpoints.byFile, data: formData, type: ajax.contentType.JSON, - headers: new Headers(this.config.additionalRequestHeaders as Record), + headers: this.config.additionalRequestHeaders as Record, }).then((response: any) => response.body); }