I have done proper research of many image plugins which upload images to server using php scripts.I just want to know a proper way to upload images to a django-based server.
Here's I think what a approach should be -
On clicking a toolbar button,a dialog will be opened.UI elements of the dialog will include a form with a file type,two fields for height and width and a button (upload to server).On adding a image file and fields and clicking upload button,ajax call will be sent (am i right here? or form submit should handle it.) to the server where a particular view will handle saving image to a specified folder.
On success server will return the full path of the image and dialog will insert in the editor.
Sorry if my question is very naive but I just wanted to know if my assumptions are right before starting off.
Thanks
There is a Django package
https://github.com/django-ckeditor/django-ckeditor
This comes with a demo app. I would advise to look into that, and see how it works.
Basically you will have to configure the media url and there is a setting for ckeditor where to upload the media. Ckeditor will handle the image upload for you.
Uploaded content will be show in an overview page, where you will have the option "use image in text"
Related
I built a file upload input on an HTML page, and I am now trying to get the current status of every upload made on this input.
Note that I have limited possibilities on the input, as the page is built on a no-code tool, so the best for me would be to use an event listener on the input ID to trigger the script that will retrieve the upload progress.
Is it doable? If so, any guidance is greatly appreciated :)
I am creating a forum that utilizes the tinymce wysiwyg editor. It seems like the editor's default behavior is to upload an image to the server immediately when a user adds an image to the editor.
What if the user does not want that image anymore? What if a user maliciously adds many, many photos to the server?
I am wanting to submit images to the server only when a user submits a post. That way, I can limit the amount of images downloaded to the server and can better validate the post.
You can set the configuration setting automatic_uploads: false.
With that setting, as long as either images_upload_url or images_upload_handler are specified, images shouldn't be uploaded automatically and should only be uploaded when editor.uploadImages() is called upon form submission.
Here's some more information about automatic_uploads:
https://www.tiny.cloud/docs/configure/file-image-upload/#automatic_uploads
NOTE: Tiny has identified a bug where the automatic_uploads setting isn't always respected when uploading via the image dialog. The bug has been logged, and work to fix the bug is currently being scheduled as of this posting. I will edit this post the fix has been released.
I've used TinyMCE for a while, but am now wanting to implement drag-and-drop image upload functionality. (ie where you can drag an image from your local computer into the text editor, resize & reposition it etc, then upload it to the server) I was going to purchase Redactor for this feature, but then I noticed TinyMCE has the paste_data_images option allowing images to be dragged/pasted directly into the editor. This seems to converts it to inline base64 encoded data.
I suspect and have read, that in theory it might be possible to have this value submitted to the server, extract the base64 uris from the Dom, write them to a file, replace the SRC with the path to the newly created file, then submit the text to the database. Has anyone achieved this?
From my initial exploration I've found the issues may be:
Huge images (~100mb) could potentially be pasted into the textbox which could cause problems.
Internet Explorer 11 and Edge browsers both don't
seem to allow dragging of images into the textbox at all.
Has anyone managed to get this working seemlessly?
I have since double checked Redactor and noticed that it also doesn't work with IE and Edge either.
TinyMCE 4.2+ actually has its own built in process for handling the upload of images that you place in the editor:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The basic process is that TinyMCE will create a separate HTTP POST for each image that you insert into the editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location.
The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
As for the issues you reference...
If a browser does not allow the drag/drop sequence you could look at using a file manager like MoxieManager or elFinder etc. They allow you to upload the image via a UI and have the uploaded image appear in your content in one step.
Image size is always an issue. You could manage this on the server in the image upload handler and return an error if the image is "too large". You could also write your own image handler function and stop the upload altogether if the image is too large.
So, what do you guys recommend to start off from in order to achieve the functions below?
Multiple image file upload
Resize(compression) images
Upload them via ajax (automatically) even before the form is submitted.
First image is the "main" featured image, and others are given custom post meta
For multiple images, there are radio buttons which users can choose which one becomes the main image.
Once form is submitted, any changes (if user changes the main image) will be updated.
I tried to build something from scratch but it is taking too much time.
Any suggestions will be much appreciated.
My way:
1.Use plugin for multiple ajax upload
2.Plugin for resizing images
3.Change main image trough ajax
I have a webpage and a F-Share button. On clicking this button, an image uploaded by the user is posted on facebook. I tried to initially use javascript to set the 'picture' property with image data from fileupload and it didn't work. So, my guess is that, Facebook does'nt save the images to its server but instead fetches them and displays them from the url we provide. Is that the case? If not, please guide me how can I use the image from fileupload in the 'picture' property?
If you mean the thumbnail that is posted on the FB wall when sharing a page, you can control what image is used by defining some META tags. Here are some examples from the docs:
http://developers.facebook.com/docs/share/
Look under "Sharing Rich Media"