ayush013/ngx-quill-upload

Plugin for image, video uploads in ngx-quill (Angular 4+)

ngx-quill-upload's Issues

ngx-quill-upload issue in SSR version (RefrenceError: Node is not defined)

/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:360593
var CLIPBOARD_CONFIG = [[Node.TEXT_NODE, matchText], [Node.TEXT_NODE, matchNewline], ['br', matchBreak], [Node.ELEMENT_NODE, matchNewline], [Node.ELEMENT_NODE, matchBlot], [Node.ELEMENT_NODE, matchSpacing], [Node.ELEMENT_NODE, matchAttributor], [Node.ELEMENT_NODE, matchStyles], ['li', matchIndent], ['b', matchAlias.bind(matchAlias, 'bold')], ['i', matchAlias.bind(matchAlias, 'italic')], ['style', matchIgnore]];
^

ReferenceError: Node is not defined
at Object.defineProperty.value (/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:360593:26)
at webpack_require (/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:351803:30)
at Object.defineProperty.value (/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:357385:18)
at webpack_require (/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:351803:30)
at Object.defineProperty.value (/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:361739:13)
at webpack_require (/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:351803:30)
at Object. (/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:363251:18)
at webpack_require (/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:351803:30)
at Object.defineProperty.value (/home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:351846:18)
at /home/sb-0/Desktop/seebiz-frontend-v2/dist/seebiz-frontend-v2/server/main.js:351849:10

When click on video Icon it still shows input filed to embed URL after register ngx-quill videoHandler

I've registered videoHandler to upload video using ngx-quill and ngx-quill-upload but it still shows embed url field instead of upload modal.

Bug :: Problem will come multiple image uploads

@ayush013 thanks for this package. I implemented quill image upload by following this package, i found one issue with this library. you are storing the current handlerId as

this.handlerId = this.helpers.generateID();
https://github.com/ayush013/ngx-quill-upload/blob/master/src/handlers/BaseHandler.ts#L87>
if you try to upload multiple images this.handlerId will reference the latest generated id. You can see this by reducing the connection speed in dev tools to slow 3g so that it can be debugged.

Upload progress bar

Is there a way to upload the progress bar and make it a spinner or get the upload percentage?

how to embed the url from server and remove base64 string from html string

I use ngx-quill-upload will quill editor to upload user posts. I can successfully upload the image to the server, however, when I persist the htmlstring to database, the htmlstring still contains the base64 string and not the image url. Here is my imageHandler:
imageHandler: {
upload: (file) => {
return new Promise((resolve, reject) => {
if (file.size < 1000000) { // Customize file size as per requirement
console.log("my sas is : " + this.imagesas);
this.blobService.uploadImage(this.imagesas, file, file.name,() => {}).
then(()=>{
resolve("https://example.blob.core.windows.net/post-images/"+file.name)
})
.catch(
()=>{
reject("error")
}
);

          let url = "https://example.blob.core.windows.net/post-images/"+file.name;
          console.log(url);
        } else {
          reject('Size too large');
        }
    });
  },
  accepts: ['png', 'jpg', 'jpeg', 'jfif', 'apng', 'bmp', 'gif', 'ico', 'cur', 'pjpeg', 'pjp', 'svg', 'tif', 'tiff', 'webp'] // Extensions to allow for images (Optional) | Default - ['jpg', 'jpeg', 'png']
} as Options,

Image attributes stripped in editor

If an image has any attributes other than "src", "class" and "style" this is removed when rendered in the editor. After investigating the code, this appears to be caused by the following lines of code in "ngx-quill-upload_ivy_ngcc_\fesm2015\ngx-quill-upload.js"

const blotPath = 'blots/block/embed';
const BlockEmbed = Quill.import(blotPath);
class ImageBlot extends BlockEmbed {

Changing the blotPath variable to "formats/image" resolves this issue.

missing dependencies: blots/block/embed

Hi,

There seem to be some dependencies missing. Or am I missing something?

`ERROR in The target entry-point "ngx-quill-upload" has missing dependencies:

• blots/block/embed`

"dependencies": { "@angular/animations": "~10.0.5", "@angular/common": "~10.0.5", "@angular/compiler": "~10.0.5", "@angular/core": "~10.0.5", "@angular/forms": "~10.0.5", "@angular/platform-browser": "~10.0.5", "@angular/platform-browser-dynamic": "~10.0.5", "@angular/router": "~10.0.5", "ngx-quill": "^12.0.1", "ngx-quill-upload": "^1.0.3", "quill": "^1.3.7", "quill-image-resize": "^3.0.9", "quill-image-resize-module": "^3.0.0", "rxjs": "~6.5.5", "tslib": "^2.0.0", "zone.js": "~0.10.3" },

Cannot read properties of null (reading 'removeAttribute') at ImageHandler.loadFile

When I try and upload an image, I am getting this error:

Cannot read properties of null (reading 'removeAttribute') at ImageHandler.loadFile.

I've had a look into the source code and set breakpoints. The problem seems to be this line:

this.loading.removeAttribute('class');.

I can see that loadingHTML() is called on instantiation when debugging.

The div with the id of __ID_SPLIT__.QUILL-LOADING is present in the DOM at the point of attempting to upload an image.

I can't figure out why the reference to loading is being set to null.

I have a component that allows users to create and edit documents. This issue only happens when I edit a document that already exists. There's no difference, as far as I know, other than the editor is programatically filled in when a user goes to edit a document. This is obviously causing an issue, but I can not for the life of me figure out why.

Encourage the library authors to publish an Ivy distribution.

Like it is said, will you consider moving to Ivy?

Feature Request: A way to delete the image

It would be nice to have an option to execute some code when an image/video is deleted.

Is it possible to not override the default video insert button?

Hello,

I would like to have two options to insert videos. One giving the URL, and another uploading a local video file.

Without the videoHandler specified, when I hit the 'video' button from the ngx-quill editor, a popup shows up asking for an URL. It is not pretty, but I would like to preserve this functionality as well.

With the videoHandler specified, the editor asks for an video file, the handler code uploads it and returns the URL which is embedded into the document. This works wonderfully.

---

Could it be possible to bind the video upload functionality to a different custom button?