I try to get the dropzone.js full image link right after upload in console(for the beginning) and I can't figure it out how to do this, and I can't find anywhere on the internet. Can you help me?
For dropzone.js you always need also a server side implementation (http://www.dropzonejs.com/#server-side-implementation). This backend will also provide you the full image link.
Related
Im using laravel with summernote wysiwyg text editor. I want user to be able to insert images to the text.
First i tried using the default summernote upload method. Basically it turns upload image to a base64 data url. Then after posting it, in a controller, that base64 is decoded into an actual image, saved to the server, and the img that src part is turned into a public image url that leads to the current server.
This worked fine with small images. But it didn't work well with big images. Post didn't work and i didn't get any error from anywhere. I assumed that it was because of the base64 part. I also saw THIS THREAD which made me wanna change base64 part even more.
So i switched to using onImageUpload callback without even thinking about it much. I saw lots of tutorials suggesting it.
With this callback, whenever user insert a image to the editor (before the post), OnImageUpload function is called in js. In that function, ajax sends to image to the controller, controller saves the image to the server and responds with its public url. Finally editor uses that url to show the image in the editor.
Issue starts here with deleting images.
There is a OnMediaDelete function which has issues. It does not work with delete/backspace key for example. And even if that worked properly, a user can insert pictures and leave the page (or use one bugs of the onMediaDelete callback) which means there isn't a easy way to determine if the uploaded image is actually used in a text or not. Server would be filled with unused images?
How do you deal with this? Should i upload the images to a temp file during the editing and carry them to a actual folder if there are being used after the post? This would require stuff like cron to keep temp folder empty won't it? Is this how people deal with this?
Or should i just disable uploading images with text editor? Maybe a small content management for images in another part of the server?
Whole thing feels so simple but i am really struggling with it. I feel like i am missing a huge point here. Please help me. Sorry for this weird question. Thank you
I am using ngx-ckeditor in my Angular7 project, I need to upload the file, it could be .pdf, .csv, .jgp etc. I have tried few options but i was not able to upload image through Editor. There is no such options over there, i am attaching the screen shot of the editor it has the option for attaching image through URL but i need to upload file from my local.
please help me in this,
thanks in advance.
I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.
Based on the guides and articles I have been reading, my assumption is that I have to save the image to the server and then give the url back to the ckeditor so that it may use it to display the image.
What I can't seem to figure out is how to do that. Where in the ckeditor js code would I add my own logic so that it may pick up the uploaded image, send it to the server and then give a url back to ck editor?
I've been through a lot of documentation such as this, but I can't seem to find anything.
https://docs.ckeditor.com/ckeditor5/latest/features/image.html
https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html
I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.
Did you check the console? On the console, if you don't have the editor properly configured, you'd have something like this:
filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter
Now, there are two built-in upload adapters – for CKFinder's server connector and for the Easy Image service provided by CKEditor Cloud Services. Both need to be configured to work:
CKFinder adapter: https://docs.ckeditor.com/ckeditor5/latest/api/module_adapter-ckfinder_uploadadapter-CKFinderAdapterConfig.html
Easy Image: https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html#easy-image
The role of an upload adapter is to expose a function which will send a file to the server (in whatever way it wants) and notify the editor once the upload is done (by returning a URL to this file). The editor takes care of the rest – inserting the image into the content, displaying a progress bar, etc.
Besides using the built-in adapters, you can write your own one. See:
https://docs.ckeditor.com/ckeditor5/latest/api/module_upload_filerepository-Adapter.html
https://github.com/ckeditor/ckeditor5-adapter-ckfinder/tree/master/src as an example of a simple upload adapter
CKEDITOR.replace( 'bodyDetails',{
removeButtons: 'Source,Strike',
filebrowserBrowseUrl : '/browser/browse.php',
filebrowserUploadUrl : '/uploader/upload.php'
});
I just use ck-editor for fileupload.
When I Uploade image in CK-Editor then It will Show me Some alert message "Image source URL is missing."
I don't want to pass URL. I need to pass some image with my local machine. I research some article but not found any proper solution. So Please help me to sort out this problem.
In CKEditor for uploading files/images even from your local machine You have to pass the full URL where the images has been stored.
For example, in my case, All my images are stored in a folder named uploaded
So, for uploading any image I have to enter full path like
http://10.11.201.93:81/webdocument/uploaded/loan.png
for the specific folder in the URL section and select the appropriate images you wanna upload.
Here's the example image:-
Even if you want to upload images directly form your local machine. First, You have to send the images to the server from the upload tab of the same dialog window. Then you could upload it to the editor from the server itself.
I want to get an icon's image when a user drags and drops it over some kind of div, but that it'll show exactly what the user sees (e.g. thumbnail, *.ico), is it possible to do so, or does anyone know of any projects that do similar things?
I would suggest a mix of:
This great drag and drop upload library:
http://valums.com/ajax-upload/
This javascript code to preview uploaded images before they upload
How to upload preview image before upload through JavaScript
You would have to add a listener in Valum's uploader to get the file that is being uploaded and then display it using the code in the second link.
Getting the local image path via javascript is not an easy task... and being able to do that while supporting most browsers will be even worst...
An easier way to solve your problem would be to upload the image in a temporary location on your server, return that temporary path and display the image that was just uploaded. Then you add a second "Keep" and a "Discard" button that saves the uploaded image to a real path if the user likes what he uploaded and you delete the temporary image. Since your images are .ico, I assume they are not really big files, so they would upload pretty fast and the user would get a "preview" fast too using that technique.
You should ask yourself if all the time invested on tweaking your code to show the user a preview before the upload really improves the user's experience using your tool !
You may need some extra work for converting ico files to file formats viewable in browsers (e.g., JPEG, PNG.)
Drag and drop the images to the browser is possible if you use HTML5's Drag and Drop API. (https://developer.mozilla.org/en/DragDrop/Drag_and_Drop, http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/).
After capturing the user input, you can upload the images to your server. After that you can convert the images whatever you want them to be. Finally you can show the images to the users.
Here is a great tutorial that I think can help you with many problems. If I understood your problem right.
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
I don't know if you want to use html5, but I think that with jQuery you can do that. I've found this url: http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer
Here you've a "Using drag feedback images", maybe this can help to you :)