We Keep Coding

Output SharePoint Document Library Files to CSV File Using JavaScript

I’m seeking how to output SharePoint Document Library Files to csv file. I found script that get me almost there, but I can’t figure out how to update the code to export the information to a csv file instead to the console.log() or to an alert(). Everything I tried breaks the code. I review other JavaScript concept that shows the how to add out to CSV but I again the script concept breaks the code I’m trying to modify. The script I am using. In addition, the script output the file names. I like to get help on how I can not only output the file name, but I like to output, modified date, created date, and the link to the file. I hope this is possible and I appreciate any help in achieving this concept. Script I'm using follows below.
jQuery(document).ready(function() {
var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
$.getScript(scriptbase + "SP.Runtime.js", function() {
$.getScript(scriptbase + "SP.js", function() {
$.getScript(scriptbase + "SP.DocumentManagement.js", createDocumentSet);
});
});
});
var docSetFiles;
function createDocumentSet() {
//Get the client context,web and library object.
clientContext = new SP.ClientContext.get_current();
oWeb = clientContext.get_web();
var oList = oWeb.get_lists().getByTitle("Fact Sheets & Agreements");
clientContext.load(oList);
//Get the root folder of the library
oLibraryFolder = oList.get_rootFolder();
var documentSetFolder = "sites/nbib/ep/Fact%20Sheets/";
//Get the document set files using CAML query
var camlQuery = SP.CamlQuery.createAllItemsQuery();
camlQuery.set_folderServerRelativeUrl(documentSetFolder);
docSetFiles = oList.getItems(camlQuery);
//Load the client context and execute the batch
clientContext.load(docSetFiles, 'Include(File)');
clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
}
function QuerySuccess() {
//Loop through the document set files and get the display name
var docSetFilesEnumerator = docSetFiles.getEnumerator();
while (docSetFilesEnumerator.moveNext()) {
var oDoc = docSetFilesEnumerator.get_current().get_file();
alert("Document Name : " + oDoc.get_name());
console.log("Document Name : " + oDoc.get_name());
}
}
function QueryFailure() {
console.log('Request failed - ' + args.get_message());
}

Sample test script in chrome.
function QuerySuccess() {
//Loop through the document set files and get the display name
var csv = 'Document Name\n';
var docSetFilesEnumerator = docSetFiles.getEnumerator();
while (docSetFilesEnumerator.moveNext()) {
var oDoc = docSetFilesEnumerator.get_current().get_file();
//alert("Document Name : " + oDoc.get_name());
//console.log("Document Name : " + oDoc.get_name());
csv += oDoc.get_name();//+',' if more cloumns
csv += "\n";
}
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'DocumentList.csv';
hiddenElement.click();
}

ckeditor,nodejs - how to get the image url?

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 + "'";

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

jQuery read XML URL

My below code working well but i need to import XML data from xml URL not from HTML file like this
if i need to retrieve image from XML how i can do that.
var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>"
$(document).ready(function(){
//$('#table').append('<h2>SHOWS</h2>');
$('#table').append('<table id="show_table">');
$(xml).find('show').each(function(){
var $show = $(this);
var date = $show.find('date').text();
var place = $show.find('place').text();
var location = $show.find('location').text();
var time = $show.find('time').text();
var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
$('#show_table').append(html);
});
//alert($('#show_table').html());
})
all what i need is change this var xml = "9/8 ... " to let the JQuery code read from the ONLINE URL

If you need to load XML data from the URL, you need to execute AJAX request, it may be something like this:
$(function() {
$.ajax({
type: "get",
url: "http://yoursite.com/yourfile.xml",
dataType: "xml",
success: function(data) {
/* handle data here */
$("#show_table").html(data);
},
error: function(xhr, status) {
/* handle error here */
$("#show_table").html(status);
}
});
});
Keep in mind, if you use AJAX you can place .xml file on the same domain name. In other case you need to set up cross-origin resource sharing (CORS).
EDITED:
I modified your code, now it appends td element to your table. But xml is still inside html.
var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>"
$(function() {
$(xml).find('show').each(function() {
console.log(this);
var $show = $(this);
var date = $show.find('date').text();
var place = $show.find('place').text();
var location = $show.find('location').text();
var time = $show.find('time').text();
var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
$('#show_table').append($(html));
});
});
But you need to modify your html file, check my solution here: http://jsfiddle.net/a4m73/
EDITED: full solution with loading xml from URL
I combined two parts described above, check here: http://jsfiddle.net/a4m73/1/

Use jquery-xpath, then you can easily do what you want like:
$(xml).xpath("//shows/show");
if you want know more about xpath just take a look on XML Path Language (XPath) document.
var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>";
$(document).ready(function () {
//$('#table').append('<h2>SHOWS</h2>');
$('#table').append('<table id="show_table">');
$(xml).xpath("//shows/show").each(function () {
var $show = $(this);
var date = $show.find('date').text();
var place = $show.find('place').text();
var location = $show.find('location').text();
var time = $show.find('time').text();
var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
$('#show_table').append(html);
});
})

what is wrong with my http request in javascript?

I want to send a message to the server comprises of a few different sections. The goal is to send some x-www-form-urlencoded info with an image. I tried do sth similiar to this: http://en.wikipedia.org/wiki/MIME#Multipart_messages
This is my js function to do that:
function sendPage() {
var source = document.getElementById("pageContainer")
var serializer = new XMLSerializer
if (!source.hasChildNodes()) {
alert("nie ma nic do wysłania")
return
}
var DOMNodeInString = "content=" + escape(serializer.serializeToString(source))
// sendToServer("savePage.php", true, handleAndShow, DOMNodeInString);return
xhttp.open("POST", "savePage.php", true)
var boundary = "xxx"
var body = "--" + boundary + "\r\n"
var file = document.getElementById("imgSource").files[0]
//wysyłam obrazek
if (file) {
var reader = new FileReader()
reader.readAsBinaryString(file)
body += "Content-Disposition: form-data; name='upload'; filename='" + file.name + "'\r\n"
body += "Content-Type: application/octet-stream\r\n\r\n"
body += reader.result + "\r\n"
body += "--" + boundary + "\r\n"
}
//wysyłam pozostałe pola formularza
body += "Content-Type: multipart/x-www-form-urlencoded \r\n\r\n"
body += DOMNodeInString
body += "\r\n--" + boundary + "--"
xhttp.setRequestHeader("Content-Type", "multipart/mixed; boundary=" + boundary)
xhttp.onreadystatechange = handleAndShow
alert(body)
xhttp.send(body)
}
however, the function doesn't work. My php script is unable to receive $_POST["content"]. What should I change to improve the js script?

It is not possible to upload a file using an XMLHttpRequest. You'll need to use Flash/Java or create a hidden iframe and do an actual submit. I'd suggest using a javascript plugin for "AJAX" file upload.

Apart from #tvanfosson answer, you are missing a creation of the xhttp object:
var xhttp = new XMLHttpRequest();
Use any debugger to see that the JS works without exceptions...