Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upload images to server instead of using base64 #213

Closed
realrecordzLab opened this issue Jun 23, 2022 · 4 comments
Closed

Upload images to server instead of using base64 #213

realrecordzLab opened this issue Jun 23, 2022 · 4 comments

Comments

@realrecordzLab
Copy link

I'm reading on the official quill.js repo this issue about image uploading in quill.
I need to avoid that the images are added to the DOM in base64 format but I need to have images uploaded and then inserted into the dom.

Is this possible in this vue version of quill?

@e274426380
Copy link

https://vueup.github.io/vue-quill/guide/modules.html#quill-modules
I have the same problem and am trying to solve it.
And found out that the documentation has this module to solve the upload server problem(quill-image-uploader).
But the documentation is rather sketchy

@e274426380
Copy link

haha
After I verified that the documentation was fine, my code changes are as follows:
<QuillEditor ref="myTextEditor" v-model:content="form.content.content" contentType="html" :options="editorOption" />
import ImageUploader from "quill-image-uploader";
Quill.register("modules/imageUploader", ImageUploader);
const editorOption = { modules: { toolbar: {……}, imageUploader: { upload: (file) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve( "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png" ); }, 3500); }); } }, }, };
This image link may be problematic and can be replaced with another valid image link.
This is just the starting project, I haven't started designing the code to upload the images to the server.

@Nelwhix
Copy link
Contributor

Nelwhix commented Sep 6, 2022

@e274426380 Please did you finish designing the code, cos I am trying to configure it but I keep getting this error from the image uploader module. "missing config: upload function that returns a promise is required. This is my code:
const modules = [ { name: 'blotFormatter', module: BlotFormatter, }, { name: 'imageUploader', module: ImageUploader, upload: file => { return new Promise((resolve, reject) => { axios.get('/sanctum/csrf-cookie') .then(() => { axios.post('/upload-image', file) .then(res => { console.log(res) resolve(res) }) .catch(err => { reject("Upload failed"); console.log(err) }) }) }) } } ]

@Nelwhix
Copy link
Contributor

Nelwhix commented Sep 26, 2022

@realrecordzLab the docs has been updated to fix this issue, you can close it now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants