Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Image Tool: uploading failed because of incorrect response - Nuxt

See original GitHub issue

Have implemented vue-editor-js is nuxt as per instructions and set up config as per https://github.com/ChangJoo-Park/vue-editor-js#upload-image--110 and added a backend as per https://github.com/ChangJoo-Park/vue-editor-js-imageserver Problem is the configuration of editor image tools doesn’t seem to be working. The endpoint doesnt seem to have any effect and selecting a file initiates a POST request to my current nuxt path Request URL: http://localhost:6969/admin/post/new which responds with

Image Tool: uploading failed because of incorrect response: "<!doctype html>\n<html data-n-head-ssr>\n  <head >\n    <title>future-wars-nuxt</title><meta data-n-head=\"ssr\" charset=\"utf-8\"><meta data-n-head=\"ssr\" name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta data-n-head=\"ssr\" data-hid=\"description\" name=\"description\" content=\"Nuxt frontend for Future Wars\"><link data-n-head=\"ssr\" rel=\"stylesheet\" 
etc etc .......

Inspecting the editor vis this.$refs I can see the configuration.tools.image is empty. Should this be displaying the config settings?? Screen Shot 2020-01-12 at 4 20 46 pm

Here is my component for reference

<template>
  <div class="page">
    <m-form title="New Post">
      <m-input name="title" label="title" v-model="title" />
      <m-input name="slug" label="slug" v-model="slug" />
      <m-input name="tags" label="tags" v-model="tags" />
      <client-only>
        <datepicker placeholder="Select Date" v-model="date"></datepicker>
      </client-only>
      <h1 style="text-align: center;">Editor.js on Nuxt.js</h1>
      <m-button variant="primary" @click="save">Save</m-button>
      <m-button variant="primary" @click="clear">Clear</m-button>
      <m-button variant="secondary" @click="log">Log</m-button>
      <select @change="handleTypeChange">
        <option v-for="type in types" :key="type" :value="type">
          {{
          type
          }}
        </option>
      </select>
      <hr />
      <client-only>
        <editor
          autofocus
          :config="config"
          @change="updateEditor"
          @ready="editorReady"
          :init-data="initData"
          ref="editor"
        />
      </client-only>
    </m-form>
  </div>
</template>

<script>
import Slugify from 'slugify';
import { postTypes } from '~/constants';
import { mapGetters, mapActions } from 'vuex';
import { editorBlocksInit } from '~/constants'; 

export default {
  name: 'NewBlogPost',
  middleware: ['check-auth', 'auth', 'is-admin'], 
  data() {
    return {
      title: 'Meh Blog',
      tags: 'Stenk',
      postType: postTypes[0],
      date: new Date(),
      initData: {
        blocks: editorBlocksInit
      },
      author: null,
      config: {
        image: {
          // Like in https://github.com/editor-js/image#config-params
          endpoints: {
            byFile: 'http://localhost:2020/api/image',
            // byUrl: 'http://localhost:8090/image-by-url',
          },
          field: 'image',
          types: 'image/*',
          // Cant get this to work either
          // uploader: {
          //   uploadByFile: this.uploadByFile
          // }
        },
      }
    };
  },
  computed: {
    ...mapGetters('auth', ['getUser']),
    slug() {
      return Slugify(this.title).toLowerCase();
    },
    types() {
      return postTypes;
    }
  },
  methods: {
    ...mapActions('posts', ['create']),
    editorReady() {
      console.log('We is ready!!!!!!');
    },
    updateEditor() {
      console.log('change', this.$refs);
      this.$refs.editor.editor.save().then(outputData => {
        console.log(outputData);
        this.initData.blocks = outputData.blocks;
        this.initData.timeStamp = outputData.time;
        this.initData.version = !this.initData.version
          ? outputData.version
          : this.initData.version;
      });
    },
    save() {
      const createdPost = {
        title: this.title,
        slug: this.slug,
        tags: this.tags,
        isLive: false,
        postType: this.postType,
        author: this.getUser._id,
        content: JSON.stringify(this.initData)
      };

      this.create({ createdPost }).then(res => {
        console.log(res);
        this.$router.push(`/admin/post/`);
      });
    },
    clear() {
      console.log(this);
      this.$refs.editor.editor.clear();
    },
    log() {
      console.log(this.$refs);
    },
    handleTypeChange(e) {
      console.log(e);
      this.postType = e.target.value;
    },
    uploadByFile(file) {
      console.log('we wil upload ' + process.env.cloudinaryName)
      return this.$store.dispatch('posts/uploadImage', file)
    }
  }
};
</script>

<style></style>

I’d ultimately like to use the uploader config prop to call a vuex action in uploadByFile but nothing in config seems to be having effect at the moment??

Issue Analytics

State:
Created 4 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

1reaction

Loskircommented, Jan 14, 2020

The problem is that editor sends request to the current url instead of localhost:2020 as specified in the config. Can’t figure out why.

0reactions

hkmsadekcommented, Jun 1, 2020

I am having this exact same issues. It seems this plugin never use the config for image tool.

Top Results From Across the Web

codex-team/editor.js - Gitter

I have a question about images on editor.js ... when response is wrong, the console message displayed is : "uploading failed because of...

editorjs image plugin return image url is not picked up

I configured editorjs into my application. I installed image plugin on it so that I can upload an image to the server.

nuxt-img

Converts src to provider optimized URLs; Automatically resizes images based on width and height; Generates responsive sizes when providing sizes option ...

How To Make A Drag-and-Drop File Uploader With Vue.js 3

You'll then click on the “Upload” button to send the image data to the ... Nuxt, and Quasar all have their own project...

Simple upload adapter - CKEditor 5 Documentation

If something went wrong, the server must return an object that contains the error property. This will terminate the upload in the editor,...