editor-js/image

Image Block for Editor.js

image's Issues

Store locally with PouchDB

Hi There,

I'm trying to store the image locally with pouchDB, which is working, but I can't find a way to retrieve the image from the db, there is no 'url' just an id.

Where is the logic which actually loads the image? If I can override that i'll be fine.

Thanks for a great plugin!

Show mp4 muted video in Chrome correctly

Safari: OK

Chrome: BAD

Is there exist byUrl implementation for GraphQL?

Wrong Toolbox API getter name

how to add csrf token to the upload request?

Disable Settings (caption, withBorder, withBackground, stretched)

I am new to Editor.js and not sure if this is plugin-specific or not. Is it possible to disable specific settings (caption, withBorder, withBackground, stretched) or disable settings at all? I don't need a background variant, so the user shouldn't be able to choose it in the first place.

Thank you very much, I appreciate your work!

Удалять блок с изображением, только если бекенд вернул положительный статус

Unable to find URL in request (nodejs)

I am trying to upload image by URL but when I paste valid URL with image extensions like ( jpg/jpeg), I cannot find that same url anywhere in my req object. Uploads by file is working fine but when uploading by url , I am having this issue.

router.post('/fetchUrl', (req,res) => {
// console.log(Object.keys(req))
console.log(req.body) // undefined
console.log(req.params) //{ }
console.log(req.query) //{ }
})
//My post routers
router.post('/uploadImage', upload.single('image') , async (req,res) => {
const image = new Image({image: req.file.buffer})
await image.save()
const uploaderRes = {
success: 1,
file: {
url:'http://localhost:3000/' + image._id + '/image'
}
}
res.send(uploaderRes)
})

router.post('/fetchUrl', (req,res) => {
console.log(req.body)
})

//My Editor instance
const editor = new EditorJS({
holder: 'editorjs',

tools: {
    header: {
        class: Header,
        inlineToolbar: ['link']
    },
    list:{
        class: List,
        inlineToolbar: true
    },
    embed:{ 
        class: Embed,
        inlineToolbar: false,
        config:{
            services: {
                youtube: true,
                coub: true,
            }
        }
    },
    image: {
        class: ImageTool,
        config: {
            endpoints: {
                byFile: '/uploadImage', 
                byUrl: '/fetchbyurl',                
            }
        }
    }
}

})

How caw we use floating for images?

Unexpected text "Select an Image" on copy-pasting image block

There is no ability to configure "inlineToolbar" option.

Inline toolbar icon is hardcoded, but I want to upload file by paste-action only (by url/file).

Response has file-> url but still error uploading message

Hi @neSpecc @gohabereg

The response has file->url but still error uploading message

What I am doing wrong can anyone help?

[Feature request] Endpoint for image block removal?

When the image block is removed, is there a possibility to specify an endpoint where the image url can be sent to? Would be a useful way of deleting the image server side if removed from the editor.

How to use it with react js

Hi guys,

I am trying to integrate with image and https://github.com/stfy/react-editor.js,

But I am not sure how to do it.

Let me know your thoughts.

Thanks,

Preview of non-squared images is not centered

Source image

Can't get the caption and the image styles from response

It seems it doesn't get neither the caption nor the image style properties (stretched, withBackground, withBorder) that I'm passing with the response.

This is the code of my response.

   return response()->json([

        "success" => 1,

        "file" => [

            "url" => "http://localhost:8000/storage/rte-images/" . $cleanedFilenameWithExtension
        ],

        "caption" => "this is the caption",

        "withBorder" => false,

        "withBackground" => false,

        "stretched" => true

    ]);`

When I look into the outputData, the caption is always an empty string and the image properties (stretched, withBackground, withBorder) are all false.

Is it possible to resize image?

I get an image - all is ok, but want to make it inside a paragraph. To bypass an image with some text. Is it possible?

I'm using Angular 8. When i pick a image, i want to call my function in uploadByFile. Please help me slove it !!

Can I embed a link to Image.

Can I embed a link to Image.

Add request handlers

Can you add handlers to endpoints.
If you look at the backend side, yes, it's easier to just specify the url and line up the backend with the format you want. But if you look at it from the frontend side, it is easier to manage the process of sending a file to the backend.
For cases when graphql is used as a transport instead of rest.
For cases when it is more convenient to use your api layer than to adjust to your api.
Something like that

  {
    handlers: {
      byFile (file, done) {
        /// magic code
        done(url)
      },
      byUrl (url, done) {
        /// magic code
        done(urlFromBackend)
      },
    },
  }

// or promise
{
      handlers: {
        async byFile (file) {
          // magic code
          return url;
        },
        async byUrl (url) {
          // magic code
          return urlFromBackend;
        },
      },
}

Rotate image

When is this feature due? Or does anyone have tips how to implement this feature myself?

Initializing with stretchBlock: true stretches the previous block instead

This happens because the editorjs api instance has not yet initialized, so it's currentBlockIndex starts at -1 making it stretch currentBlockIndex() - 1 by mistake.

The plugin is not rendering the <img> tag after upload

Hi,

I configured the image plugig and it's partially working. Basically after I upload an image, I get a never ending loader without the tag with the url being created.

this is the image tool config:

`image: {
      class: ImageTool,
           config: {
                endpoints: {
                     byFile: '/api/images/image-handler' + '?api_token=' + this.isLogged.apiToken,
                }
           }
 }`

This is the response from the backend (static url just for the example)

`return response()->json([
        "success" => 1,
        "file" => "http://localhost:8000/storage/rte-images/rose-small.jpg",
 ]);`

and this is the outputData that I'm console logging onChange

{ file: "http://localhost:8000/storage/rte-images/rose-small.jpg", caption: "", withBorder: false, stretched: false, withBackground: false }

It's all correct. The image is properly added to the JSON with the url I'm passing in the response. And I get no errors of any kind. So it's actually working except for the fact that the image preloader keeps spinning forever and no tag is added.

Maybe I miss something?

No request data when drag-and-drop or pasting image file

When dragging and dropping an image on editor it fires the byFile endpoint but the request data on the backend side is empty.

Works fine when using the actual upload image button from the toolbar.

Does it have a delete listener to delete image after I clicked remove from toolbar ?

Now I can upload image to backend, but when I clicked remove block from toolbar, the image won't delete in our database, how can I call my delete api when I clicked the button ?

https://imgur.com/yel1H1F

Where is the file data during request to server?

Good day guys,

I have a summary of my concern below

const EDITOR_JS_TOOLS = {
    image: {
        class: Image,
        config: {
            endpoints: {
                byFile: 'http://localhost:3001/api/uploads'
            },
            field: 'image',
            types: 'image/*'
        }
    }
}

const CommentEditor = () => {
    return <EditorJs tools={EDITOR_JS_TOOLS} />
}

When my react sends request to

router.post('/', async (req, res) => {
//when client use this endpoint, console.log can display a message
})

but where is the data?
I look it to req.body but empty

Thank you.

Store image as Buffer

what if i want to store the image in database buffer instead of having the image in a separate folder.

Not getting the file object while using custom uploader.

I am trying to use custom uploader, specifically uploadByFile method. This method takes one argument, which is supposed to be the file that we need to upload on the server. What I am getting isa bunch of file properties, but the actual file is missing.

Here is the reference code.

tools: {
        image: {
          class: ImageTool,
          config: {
            uploader: {
              uploadByFile(file) {
                return fetch('http://localhost:3001/api/v1/file_upload', {
                  method: 'post',
                  body: JSON.stringify{
                    file: file,
                    filename: 'first_img'
                  })
                }).then(function(response) {
                  return {
                    success: 1,
                    file: {
                      url: 'https://my-photo-gallary.s3.ap-south-1.amazonaws.com/go_that_extra_mile.png'
                    }
                  }
                })
              }
            }
          }
        }
      }

Here is what I receive when logging the file argument.

Allow changing the image after insertion

It would be nice if we have a way to change the image after insertion. A typical use-case is that the application presents a template, with a placeholder image, which the user can change by uploading their own image. Currently, it's not easy to discover how to insert an image block; by having the placeholder (and allowing the user to change it), it will make the block much easier to use.

"npm run build" errors

editor.js\example\tools\image>npm run build

ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: ESLint configuration in C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint-config-codex\configs\ts.json is invalid:
- Unexpected top-level property "overrides[0].extends".

Referenced from: C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint-config-codex\index.js
Referenced from: C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image.eslintrc
at validateConfigSchema (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-validator.js:235:15)
at Object.validate (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-validator.js:261:5)
at loadFromDisk (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:544:19)
at load (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:587:20)
at C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:453:36
at Array.reduceRight ()
at applyExtends (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:431:26)
at loadFromDisk (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:551:22)
at load (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:587:20)
at C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:453:36
at Array.reduceRight ()
at applyExtends (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:431:26)
at loadFromDisk (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:551:22)
at Object.load (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:587:20)
at Config.getLocalConfigHierarchy (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config.js:240:44)
at Config.getConfigHierarchy (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config.js:192:43)
at Config.getConfigVector (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config.js:299:21)
at Config.getConfig (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config.js:342:29)
at processText (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\cli-engine.js:181:33)
at CLIEngine.executeOnText (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\cli-engine.js:690:40)
at lint (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint-loader\index.js:278:17)
at Object.module.exports (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint-loader\index.js:273:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @editorjs/[email protected] build: webpack --mode production
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @editorjs/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\q4rockz\AppData\Roaming\npm-cache_logs\2020-04-22T04_05_42_945Z-debug.log

Same Image gets rendered into all the proceeding image blocks.

I am trying to upload an image using the config.endpoints function. The very first image I upload is correct, but rest other images following it are the same as the first one. Although, the back end is returning correct URL for the newly update image.

My configuration is as follows -

tools: {
        image: {
          class: ImageTool,
          config: {
            endpoints: {
              byFile: 'http://localhost:3001/api/v1/file_upload'
            },
            field: 'file',
            types: 'image/*',
          }
        }

Allow to execute a function when File is uploaded, along with passing the Values...

I think it would be great if you just allow the calling a function passing the image data as parameter and then will use it to send to backend with custom configs (if the user wants to edit some config). That will make it more efficient for developers to use it...

Show Image Without Uploading to Server

Hi , how to show the image in dom without uploading to server like in tinymce , I want to upload the content and image at last so please let me know how to do that

Cannot read property

Cannot read property 'config' of undefined
Uncaught TypeError: Cannot read property 'holder' of undefined
Uncaught TypeError: Cannot read property 'holder' of undefined
editor.js:22 Uncaught TypeError: Cannot read property 'config' of undefined
editor.js:12 Uncaught TypeError: Cannot read property 'holder' of undefined

this is my code
`<script>
$(document).ready(function () {
const ImageTool = window.ImageTool;
var editor = new EditorJS({
tools: {
header: {
class: Header,
inlineToolbar: true,
config: {
placeholder: 'Header'
},

                },
                list: {
                    class: List,
                    inlineToolbar: true,
                },
                image: {
                    class: ImageTool,
                    config: {
                        endpoints: {
                            byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
                            byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
                        }

                    }
                }


            },

            holderId: 'edjs'

        });

    });
</script>`

this is my first time i use Editor Js it is perfect editor i always use TinyMCE but I love This Editor
by the way i downloaded
header and List
header and List Work but Image didn't work

filename of pictures uploaded from client

how can i change the filename of the uploaded picture on the server before it get's saved?
i dont like this "upload_09340535023532.png" format.

Alt tag

Im working a couple off days now with the editor which works beautiful! But after some times a online content creator pointed out to me that is not possible to add alt tags to the image. Is this something which is on the roadmap?

Passing the data into editor ignore stretched image

If you want to pass the data from editor JS into the data: value of the editor config, it ignores the stretched value. Im guessing that this is an issue with the render function of this module, rather than an issue with the main editor JS API

See CodePen: https://codepen.io/MrSimmons/pen/QWWYVvy
If you change the boolean of stretched in the data, you can see that the image doesn't resize in the editor. the image in the editor only resizes when you then toggle the stretched value off then on again in the editor.

Unselected image doesn't provide URL parameter, causing an error when validating the blocks.

When saving the blocks, the image block without a selected image doesn't provide an URL parameter under file. When an image is selected, it does. With the URL parameter the validator configuration for the image looks something like this:

{
"tools": {
  "image": {
    "caption": {
      "type": "string"
    },
    "file": {
      "type": "array",
      "data": {
        "url": "string"
      }
    },
    "stretched": {
      "type": "bool",
      "canBeOnly": [false]
    },
    "withBackground": {
      "type": "bool",
      "canBeOnly": [false]
    },
    "withBorder": {
      "type": "bool",
      "canBeOnly": [false]
    }
  }
}
}

And this configuration works fine if an image is selected. The save data should look something like this:

{
  "type": "image",
  "data": {
    "file": {
      "url": "uploads/image14.png"
    },
    "caption": "This is the 14th image",
    "withBorder": false,
    "stretched": false,
    "withBackground": false
  }
}

Unfortunately, when an image isn't selected, the block returns the save data without url parameter, like this:

{
  "type": "image",
  "data": {
    "file": {},
    "caption": "",
    "withBorder": false,
    "stretched": false,
    "withBackground": false
  }
}

This causes the following error with my validator-configuration:

PHP Fatal error:  Uncaught EditorJS\EditorJSException: Not found required param `url` in /path/tp/project/vendor/codex-team/editor.js/EditorJS/BlockHandler.php:96
Stack trace:
#0 /path/tp/project/vendor/codex-team/editor.js/EditorJS/BlockHandler.php(157): EditorJS\BlockHandler->validate(Array, Array)
#1 /path/tp/project/vendor/codex-team/editor.js/EditorJS/BlockHandler.php(55): EditorJS\BlockHandler->validate(Array, Array)
#2 /path/tp/project/vendor/codex-team/editor.js/EditorJS/EditorJS.php(126): EditorJS\BlockHandler->validateBlock('image', Array)
#3 /path/tp/project/vendor/codex-team/editor.js/EditorJS/EditorJS.php(96): EditorJS\EditorJS->validateBlocks()
#4 /path/tp/project/editor/uploadArticleData.php(184): EditorJS\EditorJS->__construct('{"time":1581957...', '{\n"tools": {\n\t"...')
#5 {main}
  thrown in /path/tp/project/vendor/codex-team/editor.js/EditorJS/BlockHandler.php on line 96

If I missed something and this is intended behavior, please tell me what I did wrong and how I can fix it. If not, please look into this. Both ways, I thank you for creating this plugin and that you took your time to read my issue.

Sincerely,
Alexander Horner

Unable to upload image

The icon for the image appears just fine but I get a warning that the image cannot be uploaded. Right now I'm testing on a dev environment and cannot connect to a live server to upload the image.

The problem still happens when I don't pass a config object. Is there a way to test with mock endpoints that will work?

This is my current config for that tool:

image: {
          class: ImageTool,
          config: {
            endpoints: {
              byFile: "http://localhost:3000/uploadFile",
              byUrl: "http://localhost:3000/fetchUrl"
            }
          }
        }

and this is the error I get in the console.

body: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot POST /uploadFile</pre>\n</body>\n</html>\n"

code: 404
connection: "keep-alive"
"content-length": "150"
"content-security-policy": "default-src 'none'"
"content-type": "text/html; charset=utf-8"
date: "Thu, 27 Feb 2020 17:01:06 GMT"
vary: "Accept-Encoding"
"x-content-type-options": "nosniff"
"x-powered-by": "Express"

Missing license info

This can hinder adoption of the library.

How to use with existing file manager

Sorry is this is obvious, but I cannot wrap my head around making custom blocks. I have an existing file manager in a CMS I'm working on. Is there a callback I can use to insert a block with the image I pick from my file manager?

@codex-team/ajax mutate additionalRequestHeaders

https://github.com/codex-team/ajax/blob/master/src/index.js#L453

Reproduce
Paste image by url
Then all upload request will go with content-type: application/json; charset=utf-8

Image uploaded, no message error, but image doesn't show up

Hi, this is my current configuration for the tool:

        image: {
            class: ImageTool,
            config: {
                endpoints: {
                    byFile: '/site_content/uploadFile.php',
                    byUrl: '/site_content/fetchUrl.php'
                }
            }
        }

and my uploadFile.php returns:

{ "success": 1, "file": "https://mywebsite.com/static/uploads/image_name.png" }

The generated url is correct, when i paste it in the browser the image does show up
but still the preloader is turning and no image appears:

Why is this happening? Is there a secret step I missed?

C айос устройств не работает загрука изображений

Передача дополнительных параметров при загрузке изображения

Здравствуйте. :)

Добавьте, пожалуйста, возможность передачи дополнительных параметров при загрузке изображения.

Спасибо. :)

MIME type not passed to ajax when using custom uploader

If a custom uploader with uploadByFile is used, the mime type specified with types is not used, neither is image/*. Instead, the default of the ajax libary */* is used. Especially on mobile devices this is annoying since the general file picker instead of the image file picker is opened.

How to use it with angular dart

I'm trying to use this tool in Angular Dart but can't do it! Can anyone help me ?

"false" being treated as true instead of false in block tunes

It looks like blocktunes for this plugin are being treated as truthy when their values are set to the string "false".

It looks like this line is probably the culprit:

image/src/index.js

Line 278 in 70876fd

const value = data[tune] !== undefined ? data[tune] : false;

Sample data to reproduce:

const data = {
  "time": "1566499088222",
  "blocks": [
    {
      "type": "image",
      "data": {
        "file": {
          "url": "/path/to/file"
        },
        "caption": "...",
        "withBorder": "false", // these are treated as true by the plugin
        "stretched": "false",
        "withBackground": "false"
      }
    },
    {
      "type": "image",
      "data": {
        "file": {
          "url": "/path/to/file/2"
        },
        "caption": "...",
        "withBorder": false, // these are treated as false
        "stretched": false,
        "withBackground": false
      }
    },
    {
      "type": "image",
      "data": {
        "file": {
          "url": "/path/to/file/3"
        },
        "caption": "...",
        "withBorder": true, // these are treated as true and false correctly
        "stretched": false,
        "withBackground": false
      }
    },
  ],
  "version": "2.15.0"
};

how to get image path

Upload by URL is not appearing in the editor

I've configured my app with the code from your README but when I try to add a new image block it simply brings me to the file explorer. Is this expected behavior and I'm getting something wrong, or is this a bug I should report in more detail?