search

steveathon / bootstrap-wysiwyg

Tiny bootstrap-compatible WYSIWYG rich text editor
MIT License
661 stars 1.71k forks source link

Best practice for sending images to the server? #69

Open rohan-deshpande opened 8 years ago

rohan-deshpande commented 8 years ago

Not really an issue I guess, but what would be the recommended way to send the images placed in the editor via the FileReader API to the server? Is there some way to expose the FileReader object that's used by bootstrap-wysiwyg?

codewithtyler commented 8 years ago

Just to make sure I understand the question correctly. You want to be able to access the FileReader object from your JS script?

rohan-deshpande commented 8 years ago

I guess I'm just wondering how the images should get passed from the client to the server, I've got the wysiwyg inside of a form, do the images get attached to a FormData object or something else?

Edit Okay so I see that when I call $('#editor').cleanHtml(); The images are placed into the HTML as base 64 encoded PNGs which is what the FileReader API does for me, then whenever the HTML is displayed again, the browser will just render the image right? So I guess uploading isn't necessary in this case?

codewithtyler commented 8 years ago

I haven't looked over that function in a while but from what I remember that is correct.

rohan-deshpande commented 8 years ago

Okay yeah that seems right. Although I may want to strip those images out and store them separately somewhere, I'm using a MySQL db and if a user puts a bunch of images in the editor then the column in the db is going to get pretty insane...I can do that on the server I guess but would be nice if there was some way to access those images as an array or something on the client and then send them across neatly.

codewithtyler commented 8 years ago

What server side language are you using?

spreadred commented 7 years ago

@rohan-deshpande You can access the "uploaded" files from inside the insertFiles(files) function. This is what I did in order to force resizing of images on the fly.

Each of the uploaded files are available as the filesvariable. I believe you will have to convert them to actual Images first if you wish to do image processing on them. I did this and then used Canvasfunctions to resize the images.

Surely there is a more elegant solution than just directly editing that function directly, but I'm not that familiar with javascript and jQuery.