ckeditor,nodejs - how to get the image url? - javascript

I use CKeditor for my website. After uploading an image into cloudinary successfully, i failed to get URL on . It says "image source URL is missing". I know if URL on image uploading attribute modal was missing, ckeditor can't show me the image. but i don't know how to get the url....
this is my code but not work.
router.post('/uploadImage',multipartMiddleware,(req,res,next)=>{
console.log(req.files);
let imageFile = req.files.upload.path;
cloudinary.uploader.upload(imageFile,
{
tags: 'photobook',
folder: req.body.category + '/',
public_id: req.files.upload.originalFilename
})
.then(function (result) {
console.log('Picture uploaded to Cloudinary');
// Check the image Json file
console.log(result);
// Save photo with image metadata
})
.then(function (result) {
console.log('Successfully saved');
// Remove image from local folder
var filePath = req.files.upload.path;
fs.unlinkSync(filePath);
//////-----------it works successfully here ------------////////
})
.finally(function (result) {
console.log('this log is well shown up');
var html;
html = "";
html += "<script type='text/javascript'>";
html += " var funcNum = " + req.query.CKEditorFuncNum + ";";
html += " var url = " + result.url;
html += " var message = \"upload successfully\";";
html += " window.parent.CKEDITOR.tools.callFunction(funcNum, url);";
html += "</script>";
console.log("it doesn't show up"); //really doesn't show up
// Show the result with image file
res.send(html);
});
});

The problem is that you are not enclosing the url inside the script tag:
html += " var url = " + result.url;
This should work:
html += " var url = '" + result.url + "'";

Related

Steam webAPI Jquery script. return

I have a problem with this script I got from github.
I added value.appid myself because that seemed logical but I believe it data.response.games is a response for all my games and its values.
How do I get them to either print or see what is defined?
I would need something like value.description or maybe value.ownedAchievements.
I want to see what data i have to work with for the CSV.
I am a complete noob with this so be nice, also too expert comments I will have no clue what to do with cause I have never touched javascript in my life before.
I am currently learning HTML CSS and PHP.
I have a Docker running with my SQL as well... is there also a way to re-engineer this script to directly put these value.* values inside a column? without the need to download a CSV and import it manually all the time.
<script src='http://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function () {
function exportSteamToCSV(filename) {
var url = "http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=" + $('#webkey').val() + "&steamid=" + $('#steamid').val() + "&format=json&include_appinfo=1";
$.get(url, function(data) {
colDelim = ',';
rowDelim = '"\r\n"';
csv = '"Name","Playtime","Store' + rowDelim;
$.each(data.response.games, function(index, value) {
url = "http://store.steampowered.com/app/" + value.appid;
csv += value.name + colDelim + value.playtime_forever + colDelim + value.appid + colDelim + url + rowDelim;
//csv += value.name + colDelim + value.playtime_forever + colDelim + url + rowDelim; Was correct eerste versie
});
csv += '"';
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
var link = document.createElement("a");
link.download = filename;
link.href = csvData;
link.target = "_blank";
link.click();
});
};
$(".export").on('click', function (event) {
// CSV
exportSteamToCSV.apply(this, ['steamgames.csv']);
});
});
</script>
Solved this later in Laravel with the query from the APU. the URL just gets all the data.. from there you casn pretty much do anything.
$url = "https://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=XXXXXXXXXX&steamid=XXXXXXXXXXformat=json&include_appinfo=1";
$jsondata = file_get_contents($url);
$parsed = json_decode($jsondata,true);
$games = $parsed['response']['games'];
echo SteamGame::count();
foreach($games as $game){
echo $game['name']."<br>";
$imgid = $game['appid'];
SteamGame::updateOrCreate(['name' => $game['name']],[
'name' => $game['name'],
'appID' => $game['appid'],
'storeURL' => "https://store.steampowered.com/app/".$game['appid'],
'imageURL' => "https://cdn.akamai.steamstatic.com/steam/apps/${imgid}/header.jpg",
'minutesplayed' => $game['playtime_forever']
]);

File browsing and omdb

I'm kinda new to php + javascript.
I have set up "cute file browser" to look at a shared folder on my computer.
it works fine displays all files & folders no problem.
Now im trying to use OMDB to search for movie posters and then display them for each movie name.
Currently it works but only with the first movie title. when inspecting the element in FF it does show all the other posters but only within the first
This is the code i made for the OMDB...
var filmName;
var realName;
filmName = finfo;
realName = filmName.split('.')[0];
var omdbUrl = "http://www.omdbapi.com/?t=" + realName;
$.ajax({
url: omdbUrl,
//force to handle it as text
dataType: "text",
success: function(data) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(data);
//now json variable contains data in json format
//let's display a few items
document.getElementById("folders").innerHTML += "<img id='imgposter' class='imgPoster' src='" + json.Poster + "'></img>";
}
});
And this is the code for displaying my movie folders:
if(scannedFolders.length) {
scannedFolders.forEach(function(f) {
var itemsLength = f.items.length,
name = escapeHTML(f.name);
if(itemsLength) {
icon = '<span class="icon folder full"></span>';
}
if(itemsLength == 1) {
itemsLength += ' item';
}
else if(itemsLength > 1) {
itemsLength += ' items';
getPoster(name);
}
else {
itemsLength = 'Empty';
}
var folder = $('<li id="folders" class="folders"><span class="name">' + name + '</span> </li>');
folder.appendTo(fileList);
});
}
This is the error i get
As i said i am new here. if anyone could give me any tips would be great thanks

How can I insert an embedded image in Outlook with office-js

It is possible to embed a image in outlook email ? With this code outlook will insert a broken image mailBoxItem.body.setSelectedDataAsync
var linkToImage = '<img src=\"data:image/'+getTemplateExtension(template.templateType).replace('.','')+";base64," + sasLink + '\"/>';
//Add an image as a link
if (mailBoxItem.body.setSelectedDataAsync) {
mailBoxItem.body.setSelectedDataAsync(linkToImage, {
asyncContext: null,
coercionType: Office.CoercionType.Html
},
function(asyncResult) {
if (asyncResult.status == "failed") {
showMessage("Action failed with error: " + asyncResult.error.message);
} else {
showMessage("You successfully wrote in the email body. Click Next to learn more.");
}
}
)
}
It looks like currently outlook don't support inserting <img> tags which have a base64 encoded image in the src element, and requires you to have a full URL of the image instead.
So I wrote a server side script to which I am POSTing the base64 image string. The script saves the image on the server and then return's back the URL.Now finally you can create an <img> tag with the returned URL as src,and can be successfully embedded in the message body.
Used the followings code to get it working
var imageBase64Data = 'data:image/png;base64,iVBORw...';//truncated the actual base64 data as its too long
$.ajax({
type: 'post',
url: 'https://metalop.com/Word-Cloud-Generator/image-url-generator.php',
data: {
image: imageBase64Data
},
error: function(e) {
console.error(e);
},
success: function(response) {
console.log(response);
var imageHTML = "<img " +
"src='" + response + "' img/>";
console.log(imageHTML);
//Add an image as a link
Office.cast.item.toItemCompose(Office.context.mailbox.item).body.setSelectedDataAsync(imageHTML, {
coercionType: Office.CoercionType.Html,
},
function(asyncResult) {
if (asyncResult.status === Office.AsyncResultStatus.Failed) {
app.showNotification("Action failed with error: " + asyncResult.error.message);
}
});
}
});

Append image in function jquery

Good evening.
I have this jquery code which allows me, once you press the Enter key, to post a comment.
Fattio that I run an append with the username and the content that the user wants to publish.
In addition to the username I would also like to "hang" the profile picture using their path. How do I post a photo?
Thanks for your help. Here's the code:
function commento_post(id_post)
{
$('.form-commento'+id_post).click(function ()
{
$('#ins_commento'+id_post).keydown(function (e)
{
var message = $("#commento"+id_post).val();
var username = $("#username").val();
var id_user = $("#id_user").val();
if(e.keyCode === 13)
{
$.ajax(
{
type: 'POST',
url: 'http://localhost/laravel/public/index.php/post/ins_commento',
data: { commento: message, id_post: id_post },
success: function(data)
{
$('#commento'+id_post).val('');
$('#commentscontainer'+id_post).append
(
/*$(".username-commento"+id_post).html
(*/
$('<a/>',
{
text : username, href : 'http://localhost/laravel/public/index.php/utente/'+id_user
}).css({'font-weight':'bold'})
//)
).append(' ').append(message).append($('<br/>'));
var el = $('#numero_commenti'+id_post);
var num = parseInt(el.text());
el.text(num + 1);
}
});
}
});
});
}
In your success function, you could simplify everything quite a bit in the following way while not using jQuery append so much, but just using a variable to store your code and then appending it in one go. This will allow you to append all sort of elements, it's easily parseable for the you and it reduces the amount of calls you have to make.
// Add whatever you want your final HTML to look like to this variable
var html = "<a href='http://localhost/laravel/public/index.php/utente/" + id_user + "' style='font-weight: bold;'>" + username + "</a>";
html += message;
// add an image
html += "<img src='path/to/image.jpg' />"
html += "<br />";
// append to code you constructed above in one go
$('#commentscontainer' + id_post).append(html);
Update
I amended an incorrect quote and changed + id_user + "to + id_user + "', which makes everything after it work.

Audio shows 'Invalid source' when linking to a file on local machine using FileOpenPicker

I'm trying to write a JS Windows app. I have a button on the first page, and the click event handler code is as follows:
function pickSingleAudioFile(args) {
document.getElementById("output").innerText += "\n" + this.id + ": ";
// Create the picker object and set options
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.musicLibrary;
openPicker.fileTypeFilter.replaceAll([".mp3"]);
// Open the picker for the user to pick a file
openPicker.pickSingleFileAsync().then(function (file) {
if (file) {
// Application now has read/write access to the picked file
WinJS.log && WinJS.log("Picked file: " + file.name, "sample", "status");
document.getElementById("output").innerText += "You picked " + file.name + " from " + file.path;
// Save the file as an audio tag and load it
var audtag = document.createElement('audio');
audtag.setAttribute("id", "audtag");
audtag.setAttribute("controls", "true");
audtag.setAttribute("msAudioCategory", "backgroundcapablemedia");
audtag.setAttribute("src", "\"" + file.path + "\"");
document.getElementById("output").appendChild(audtag);
audtag.load();
} else {
// The picker was dismissed with no selected file
WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
}
});
}
The path is something like "D:\Songs\song1.mp3" or "\network-share\My Music\song name.mp3" I get the "Invalid Source" error when trying to load the file.
At first glance, this:
audtag.setAttribute("src", "\"" + file.path + "\"");
should instead be this:
audtag.setAttribute("src", file.path);
It's not clear why you are adding the backslashes. However, depending on what you are doing and based on samples I've seen, you'd be better off doing something like this:
var fileLocation = window.URL.createObjectURL(file, { oneTimeOnly: true });
audtag.setAttribute("src", fileLocation);
You might check out the "Playback Manager msAudioCategory Sample" from the Windows Dev Center for more ideas.

Categories