Here, I am using ckeditor and I want to upload an image using ckeditor.
I found link and I did like it says but I couldn't get button to upload an image for that.
Link is here for an image. My ckeditor version is CKEditor 4.5.6.
What can I do for upload an image?
Do remember that by default CKEditor does not include a file manager/uploader, so you need to integrate some server-side component to handle that. It can be either CKFinder (the file manager created by CKSource, the company behind CKEditor that can be easily integrated with the editor), some third-party product of your choice or your own solution.
Please refer to the CKEditor documentation about file upload - there is plenty of it, including samples with source code ready to copy and use in your own implementation:
File Upload through Dialogs and Drag&Drop sample
File Manager Integration documentation.
CKFinder Integration documentation
File Browser API - Creating a Custom File Manager documentation
CKFinder + CKEditor demo
Image upload in server and set url in ckeditor
https://stackblitz.com/edit/angular-ivy-jqy4ni <== demo link for angular
<ckeditor [editor]="editor"
[config]=" {
ckfinder: {
options: {
resourceType: 'Images'
},
uploadUrl: "BACK_END_MAPPING_URL_FOR_SAVE_IMG
},
}"
rows="6"> </ckeditor>
=> for back end use file name "upload"
Ex.
#RequestParam(value = "upload") List<MultipartFile> multipartFile
And response
FOR SUCCESS ================
{
"uploaded": true,
"url": "http://file/img/get_image_url.jpeg"
}
FOR ERROR ================
{
"uploaded": false,
"error": {
"message": "could not upload this image"
}
}
Related
Just over a year ago I created a chatbot using IBM Watson Assistant. It is successfully interfacing with wordpress and facebook. it was working perfectly well in a web page too, but has now stopped outputting any text. I created the website integration by copying the code shown in the "preview link" page created by IBM when the bot is under development. That code includes a library file called "chat.0.0.4.js" and corresponding css. When the code runs now, the chatbot renders correctly, but when I look at the browser console I see at line 12990 in chat.0.0.4.js:
400 - {"error":"Invalid Request Body","errors":[{"message":"When source.type is not 'watson', source.id is required
Does anyone know how to fix this? I see that the integration code from the "preview link" is now totally different and I wonder if the mechanism I used a year ago is now depreciated?
Thanks.
I think you need to use the newer version, the script to integrate WA has changed and now looks like this:
<script>
window.watsonAssistantChatOptions = {
integrationID: 'YOUR_INTEGRATION_ID',
region: 'YOUR_REGION',
serviceInstanceID: 'YOUR_SERVICE_INSTANCE',
onLoad: function(instance) {
instance.updateUserID(L12345);
instance.render();
}
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
document.head.appendChild(t);
});
</script>
First I upload the video in my web server. Then i want to transfer the video to vimeo server.I have downloaded the code from vimeo given github URL (https://github.com/vimeo/vimeo.php). Using composer update the code. After that I am trying to create a custom library for CodeIgniter. In application/libraries folder put all files including 'vimeo.php' for library and in 'autoload.php' page under the 'application/config' folder set $autoload['libraries']=array('vimeo');. Now I call the library from controller
$lib = new Vimeo();
$video_url=base_url().''.$directory.''.$data['video_name'];
$uri = $lib->upload($video_url);
$video_data = $lib->request($uri);
$film_video = $lib->request('/ondemand/pages/myfilm'.$video_data['body']['uri'], array('type' => 'main'), 'PUT');
It shows error. The error is as follows:
An uncaught Exception was encountered
Type: VimeoUploadException
Message: Unable to locate file to upload.
I have checked the video file is present in the '$video_url' path.Could any one help me how to solve this problem.
I am using the Facebook Messenger Platform to create a generic template. I am currently using ngrok to test locally, and the image_url I input for the generic template never shows in Messenger. The generic template is sent, and the image is just blank. Using Inspect, I can see that the CSS for the image is:
background-image: url("https://external.xx.fbcdn.net/safe_image.php?d=AQA1nM3pKJnllzq0&url=https%3A%2F%2Fdc3858ef.ngrok.io%2Fassets%2Fimages%2Fvideo_image.jpg&_nc_hash=AQAlBOE-vbT8cl-i");
If I open this URL, it is just a black screen with one white pixel in the middle.
Here is the message data that I use:
messageData = {
recipient: {
id: senderID
},
message:{
attachment:{
type: "template",
payload: {
template_type: "generic",
elements: [
{
title:"Test Video Link",
image_url: MY-NGROK_DOMAIN + "/assets/images/video_image.jpg",
subtitle: "Check out this video!",
default_action: {
type: "web_url",
url: "www.google.com"
}
}
]
}
}
}
};
This image_url works fine if I open it in a browser. Similarly, if I create an 'image' type message data rather than 'template', this image is loaded in Messenger.
How can I get my image_url to load properly for a generic template?
I have the same issue. I and the problem appears when the webhook domain is the same as the image url. If you use an image on a different server, it works.
I had the same issue. I've put my local web application behind ngrok. Requesting the image directly in the browser worked fine, but when it's loaded via Facebook's safe_image.php script it would show a blank image. After a lot of debugging it turned out to be the tunnelling service itself. I switched to another service (localtunnel) and there it worked fine.
More information can also be found on this issue registered on FB:
https://developers.facebook.com/support/bugs/2151860088174161/
Update
Contacted ngrok about this and got a quick reply, this is due to Facebook blocking ngrok for this script.
My Codename One app features a ShareButton that is used like this :
// Share this report on social networks (text plus screenshot)
ShareButton shareReportButton = new ShareButton();
shareReportButton.setText("Share this report!");
shareReportButton.getAllStyles().setBorder(
RoundBorder.create().rectangle(true));
FontImage.setMaterialIcon(shareReportButton, FontImage.MATERIAL_SHARE);
shareReportButton.getStyle().setBgColor(ParametresGeneraux.accentColor);
shareReportButton.getPressedStyle().setBgColor(ParametresGeneraux.darkPrimaryColor);
shareReportButton.setTextToShare("I reported this via the great app ABCD "!"
);
shareReportButton.setImageToShare(currentReport.getPhotoPath(), ImageIO.FORMAT_PNG);
I works as expected under the simulator but on an actual Android 4.4 device I get a Dialog menu with "No app can do this action".
Please note that it is possible to share eg a photo with the native apps.
I could not find any build hint to add in the doc. What should I do to make the share button offer a way to share a text + photo on the social networks ?
Any help appreciated,
Regards
EDIT
Following #James H and #Diamond answers, the image type has to be set as mime type. Consequently replacing ImageIO.FORMAT_PNG by "image/jpg" makes the share menu populated.
For completeness please notice that as stated in the doc
an image must be stored using the FileSystemStorage API and shouldn't use a different API like Storage!
So even if the photo is in the cache you have to copy it eg to your home folder and then use this copied version in the ShareButton.
I think the problem might be that
setImageToShare(String imagePath, String imageMimeType)
is looking for a Mime description with a different format, such as: "image/png"
I'm not sure that ImageIO.FORMAT_PNG works in this way. Looking at the sample in the JavaDoc, it uses:
sb.setImageToShare(imageFile, "image/png");
Use the native share functionality and check if sharing natively is support by doing the following:
// Share this report on social networks (text plus screenshot)
Button shareReportButton = new Button("Share this report!");
shareReportButton.getAllStyles().setBorder(create().rectangle(true));
FontImage.setMaterialIcon(shareReportButton, FontImage.MATERIAL_SHARE);
shareReportButton.getStyle().setBgColor(ParametresGeneraux.accentColor);
shareReportButton.getPressedStyle().setBgColor(ParametresGeneraux.darkPrimaryColor);
shareReportButton.addActionListener(e -> {
if (Display.getInstance().isNativeShareSupported()) {
Display.getInstance().share("I reported this via the great app ABCD ", currentReport.getPhotoPath(), "image/png"); // Or "image/jpg"
} else {
ToastBar.showErrorMessage("Your phone doesn't support sharing...");
}
});
I have a need to point my image tags at a directory that is not part of my app.
The use-case is that this is a kiosk app for which the assets are delivered via Dropbox. So, the user will need to configure the app by pointing the fileSystem object at the required Dropbox directory and then the app will use that directory to source its media.
The fileSystem Entry returns a path that looks like:
~/Dropbox/and/so/on/and/so/forth
I'm trying to figure out if there's any way to use that either explicitly
a la
<img src="~/Dropbox/and/so/on/and/so/fort/image.png"/>
or via some hacky alternative like
<img src="file:///users/someuser/Dropbox/and/so/on/and/so/forth"/>
However all the various combinations I've tried produce a broken image - even though when I inspect the element and click on it in the console Chrome is able to view the image as a stand-alone entity, so I know the path is correct.
I feel like I'm overlooking something obvious, but can't find any documentation for how to correctly aim my resources at the file system.
You'd expect that the fileEntry.toURL() method returns the filesystem:..-URL that can be used to directly embed the image in the page. However, that is not the case because of http://crbug.com/148788.
If you're certain that you can always access the filesystem after requesting permissions, the most efficient solution to embed an image from the user's filesystem is to use blob:-URLs. Here is an example without any error handling:
// Within your app's code, somehow get a DirectoryEntry (or FileEntry):
chrome.fileSystem.chooseEntry({
type: 'openDirectory'
}, function(directoryEntry) {
// Assume that the user has selected the directory containing the images.
directoryEntry.getFile('path/to/img.png', function(fileEntry) {
fileEntry.file(function(file) {
var url = URL.createObjectURL(file);
// url looks like "blob:chrome-extension%3A//[extensionid]/[uuid]"
var img = new Image();
img.src = url;
document.body.appendChild(img);
});
});
});
If you don't know the image path in advance, then you could either enumerate the items in the directory using a DirectoryReader (created using directoryEntry.createReader()), or directly prompt for the FileEntry (and use fileEntry.file, etc., to get the blob:-URL).
To try out the previous snippet, use the following as manifest.json
{
"name": "FS App",
"version": "2",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
{"fileSystem": ["directory"]}
]
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('main.html');
});
main.html
<script src="main.js"></script> <!-- main.js = previous code -->
Create a directory that contains "path/to/img.png", load the app, launch the app and click on the just-created directory that contains that picture. You will see that the image is embedded in the app's document.
You don't use a file:// URL, nor do you use any --allow... exceptions. Once you have a FileEntry, you fetch the binary data from the image and form it into a data URL, which you can use directly as an img src. See my answer to this question: chrome packaged app image access
UPDATE: Given a File object (file), here's the code to set the src property of an image (img):
img.src = webkitURL.createObjectURL(file);
If you have a FileEntry, you can get its File via the file() method.
Are the assets in the user's Dropbox or yours? If they are yours, you should be able to get them using fetch after making them public.