How to upload image and attach document using angular editor

Question

I installed angular editor package and the angular editor is working , but I'm unable to upload word document,presentation and image

I installed angular editor from https://www.npmjs.com/package/@kolkov/angular-editor

import { Component, OnInit } from '@angular/core';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import {BlogService} from 'src/app/service/blog.service';
@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {

  editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '25rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no',
   uploadUrl: '/home/web/Pictures', // if needed
    customClasses: [ // optional
      {
        name: "quote",
        class: "quote",
      },
      {
        name: 'redText',
        class: 'redText'
      },
      {
        name: "titleText",
        class: "titleText",
        tag: "h1",
      },
    ]
  };

  constructor(private blogservice: BlogService) { }

  ngOnInit() {
  }
  Save(blogForm: any) {

    if (blogForm.valid === true) {
      blogForm = blogForm.value;
      this.blogservice.Save(blogForm).subscribe(response => {console.log(response);
        });
      window.alert('Blog published successfully');


     }

   }

}

Presently I'm able to add styles to the content in the editor , but expect to add image and other docs

user1203497 · Accepted Answer · 2019-06-25 12:15:02Z

uploadUrl: '/home/web/Pictures', // if needed

This is not actually url where your images get uploaded, but url of backend service that handles uploading and return the location of image after uploading is done.

In frontend/component:

uploadUrl: 'localhost:8080/server/page/upload-image',

In Backend, in file where ever upload-image is being routed:

router.post('/', async (req, res) => {
   //Here you do the uploading. The way you do is up to you. 


   //Once you have done with image uploading, you have to return path to image. I was using google cloud service and there I am dealing with absolute paths, so I don't know if relative path is going to work.

   res.status(200).send({
       "status":true, 
       "originalName":'demoImage.jpg', 
       "generatedName":'demoImage.jpg', 
       "msg":"Image upload successful", 
       "imageUrl":`https://storage.googleapis.com/article-images/demoImage.jpg`
   })

})

Then the imageUrl you are returning from backend, gets wrapped with <img></img> tags and pasted into editor.

Collectives™ on Stack Overflow

How to upload image and attach document using angular editor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related