CODEWITHSUNDEEP
angulareditor
Sethulakshmi Pradeep
Sethulakshmi Pradeep

Reputation: 19

How to upload image and attach document using angular editor

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

Upvotes: 1

Views: 7204

Answers (1)

user1203497
user1203497

Reputation: 517

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.

Upvotes: 6

Related Questions