I want to use “contenttools.js” for my project since it looks really nice and works well with what I need.
The only problem is that I want to add a hook so I can upload images into the page with kcfinder or elFinder.
The author of contenttools has a example which “fakes” the images.
Link to the code is here.
I would like to be able to have a input box there that returns the image after it is selected or get a iframe in the modal.
Hopefully somebody can help me.
input.addEventListener('change', function(event) {
var file = input.files[0];
if (!file) return;
var formData = new FormData();
formData.append('image', file, file.name);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload-image', true);
xhr.send(formData);
});
The JS library offers you a strategy for the server, but not code. You might need to follow up in the relevant channel for the server-side technology you are using for help with that side of things.
Thanks for the reply, while am at work now I was thinking about trying to use the event listener to open the dialog which kcfinder offers.
In theory if coded correct I should be able to get window open when I click on the upload button which would let me select a file from the server and pass it trough to the system.
And when saving the image file (after the upload action) I should have the url from the server correctly and be able to save it.
Kcfinder offers a javascript integration so I only need to connect those dots and I’m set to go.
Need to figure this out tomorrow so I will be back.
I don’t think you want to use kcfinder, follow the example that contenttools gives for the upload.
It’s the server side implementation of receiving the image, storing it and returning the url / dimensions which is the missing piece.