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.
Related
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.
Is it possible to upload the multiple images from pasted content of google drive document or local documents i.e articles ?
After pasting the content from document, i want to upload all images on my server
Currently, when i drop/select image (single) in editor area locally then using "imageAdd" event i can upload the image to my server, but same thing when i do by selecting the image (having google image url) from document that time its not working.
want to implement : all images which i have copied in editor which are hosted in different server, need to upload on my server
You need a plugin that detects whenever content is copied into the editor, then find out any external image and then imports them into your server.
This is an example of such plugin https://www.pluginsforckeditor.com/imagesfromserver/ although you can write your own.
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.
I use this script http://code.google.com/p/html5uploader/ to show progress of a file upload etc. It works great except that moment if you drag and drop a few files simultaneously it will creates files with different names but content of those files will be the same. So that script just pass content of the first loaded file in all cases. How to fix this?
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 :)