Angular-5 froala Image Upload

Question

I use froala editor for my angular project. I point upload path to my assets file but when ı browse page it say "something went wrong" I checked developer tools errors it show that 404 for image path.

my ts file like this

import { Component, OnInit } from '@angular/core';


@Component({
    selector: 'app-editor',
    templateUrl: './editor.component.html',
    styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit {

    constructor() { }

    public editorContent: string ="";

    ngOnInit() {
    }

    public onClickMe()
    {
        alert(this.editorContent);
    }

    public options: Object = {
        charCounterCount: true,
        // Set the image upload parameter.
        imageUploadParam: 'image_param',

        // Set the image upload URL.
        imageUploadURL: 'assets/upload_image',

        // Additional upload params.
        imageUploadParams: {id: 'my_editor'},

        // Set request type.
        imageUploadMethod: 'POST',

        // Set max image size to 5MB.
        imageMaxSize: 5 * 1024 * 1024,

        // Allow to upload PNG and JPG.
        imageAllowedTypes: ['jpeg', 'jpg', 'png'],

    };
}

what is wrong?

my html file like this

<div [froalaEditor]="options" [(froalaModel)]="editorContent"></div>

<button type="button" class="btn btn-success" (click)="onClickMe()">Kaydet</button>

Answer 1

Try replace your object for this one.

public options: Object = {
    charCounterCount: true,
    // Set the image upload parameter.
    imageUploadParam: 'image_param',

    // Set the image upload URL.
    imageUploadURL: 'assets/upload_image',

    // Additional upload params.
    imageUploadParams: {id: 'my_editor'},

    // Set request type.
    imageUploadMethod: 'POST',

    // Set max image size to 5MB.
    imageMaxSize: 5 * 1024 * 1024,

    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
    events:  {
  'froalaEditor.initialized':  function () {
    console.log('initialized');
  },
  'froalaEditor.image.beforeUpload':  function  (e,  editor,  images) {
    //Your code 
    if  (images.length) {
      // Create a File Reader.
      const  reader  =  new  FileReader();
      // Set the reader to insert images when they are loaded.
      reader.onload  =  (ev)  =>  {
        const  result  =  ev.target['result'];
        editor.image.insert(result,  null,  null,  editor.image.get());
        console.log(ev,  editor.image,  ev.target['result'])
      };
      // Read image as base64.
      reader.readAsDataURL(images[0]);
    }
    // Stop default upload chain.
    return  false;
  }

};}