Xpages multy upload delete attachments - javascript

I've downloaded the following opennsf. I would like to add for each document uploaded the option to delete if you choosed wrong. I managed to add a button in the script but I don't know how to link it to the attachment.
Here is the edited code:
var files = document.getElementById('ynFileUploadMulti').files;
var html = '';
if (files && files.length > 0) {
if(dojo.byId("ynFileUploadInfo").innerHTML == "" ) {
html = '<table id="ynFileUpload" class="xspDataTableFileDownload" style="width:100%;margin-bottom:1em">';
html += '<thead style="color:#545454;"><tr><th style="font-weight:bold;width:46px">Size</th><th style="font-weight:bold">Files to Upload</th><th style="font-weight:bold">Delete</th></tr></thead><tbody style="color:#a0a0a0">';
}
else{
html += dojo.byId("ynFileUploadInfo").innerHTML;
html = html.replace("</tbody></table>", "");
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size / (1024 * 1024))).toString() + ' MB';
else
fileSize = (Math.round(file.size / 1024)).toString() + ' KB';
html += '<tr><td>'+fileSize+'</td><td>'+file.name+'</td><td ><button onclick="myFunction()">x</button></td></tr>'
}
html += '</tbody></table>';
}
dojo.byId("ynFileUploadInfo").innerHTML = html;
} catch (e) {
console.log("ynUpload_onchange: "+e);
}
This code is in the ynUploader_onchange() function. But I guess I need to touch the other function too (the ynUploader_worker(.....) function)?? How can I achieve this?

You can use the property "Allow Delete" in the File Download control or you can place a button on the xpage/cc with the following code to get a handle on the uploaded files
var attList = document1.getAttachmentList("AttachmentRT");
for(var i=0; i<attList.size(); i++)
{
var att:String = attList[i];
// Here you can process every uploaded file
}
AttachmentRT ist the name of the notesrichtext field bound to the File Download

Related

Scanning file names into an array in Javascript

I have an image gallery on my website. It's powered by a script called gallery.js which runs on my page called gallery.html. It creates an html that contains the images I want to show.
However, I have to manually add the names of all the images to an array, which can be tedious. I need a way to scan the names of all the files in the /images/gallery directory, so that all I have to do is add images to the directory, and the script will detect them. How can I achieve this?
Here's the gallery.js code:
const table = document.getElementById("gallery");
/*
Filenames are added manually here
*/
const files = [ ... ];
const tableWidth = 4;
let htmlString = "";
for (let i = 0; i < files.length; i++) {
const filename = files[i]
// Start of row
if (i % tableWidth == 0) {
htmlString += "<tr>"
}
htmlString += `
<td>
<a href=\"images/gallery/${filename}.png\" target="_blank">
<img src=\"images/gallery/${filename}.png\">
</a>
</td>
`
// End of row
if (i % tableWidth == tableWidth - 1) {
htmlString += "</tr>"
}
}
table.innerHTML = htmlString

Dynamically load images, break loop on error

I asked this previously but didn't get an answer that applied to my project. I am trying to load images to a table dynamically without having to use server side code. It works, but I want to be able to have an infinite loop that breaks when a picture fails to load, rather than hard code the number of rows I need. That way I won't ever have to update the code, I'll just be able to add pictures to a folder if I want to expand the table.
Right now the "onerror" attribute hides the failed image, but I also want to break out of the outer loop (loop1).
function headCatalogLoader() {
var table = document.getElementById("catalog");
var meshNum = 0;
var uniqueID = 0;
loop1:
for (var i = 0; i <= 50; i++) { // i made it 50 instead of infinite for now
var row = table.insertRow(i);
loop2:
for (var k = 0; k <= 2; k++) { // 2 is because 3 columns
var skinTone = "none";
var cell = row.insertCell(k);
if (k == 0) {
skinTone = "lgt";
}
else if (k == 1) {
skinTone = "med";
}
else if (k == 2) {
skinTone = "drk";
}
cell.innerHTML = "<img src=\"headimgs/head" + skinTone + meshNum + ".png\" id=\"head" + uniqueID + skinTone + "\" onclick=\"previewIt(this)\" onerror=\"$(this).hide();\" />";
uniqueID++;
}
meshNum++;
}
var tbody = $("table tbody");
tbody.html($("tr",tbody).get().reverse());
}
Breaking from within the attribute is out of the loop's scope and doesn't work. Also using
$('img').on("error", function () {
break loop1;
});
inside loop2 doesn't do anything. Someone suggested I use a recursive method and rewrite my function, but that won't work for me since I'm dynamically creating a table and using image names that correspond to the loop. Any help or suggestions would be wonderful!
I'm thinking you could use an XMLHttpRequest to check the response for that URL before trying to put it onto the page. If status is not 404 then insert image else break loop1. Something like this might work:
function headCatalogLoader() {
var table = document.getElementById("catalog");
var meshNum = 0;
var uniqueID = 0;
loop1:
for (var i = 0; i <= 50; i++) { // i made it 50 instead of infinite for now
var row = table.insertRow(i);
loop2:
for (var k = 0; k <= 2; k++) { // 2 is because 3 columns
var skinTone = "none";
var cell = row.insertCell(k);
if (k == 0) {
skinTone = "lgt";
} else if (k == 1) {
skinTone = "med";
} else if (k == 2) {
skinTone = "drk";
}
// note: you'll need to use an absolute path for imageUrl
var imageUrl = "http://example.co.uk/example/headimgs/head" + skinTone + meshNum + ".png";
var xhttp = new XMLHttpRequest();
xhttp.open('HEAD', imageUrl, false);
xhttp.send();
if (xhttp.status !== 404) {
cell.innerHTML = "<img src=" + imageUrl + " id=\"head" + uniqueID + skinTone + "\" onclick=\"previewIt(this)\" onerror=\"$(this).hide();\" />";
uniqueID++;
} else {
break loop1;
}
}
meshNum++;
}
var tbody = $("table tbody");
tbody.html($("tr", tbody).get().reverse());
}
Note: you'll need to use an absolute path for the XMLHttpRequest. I've just used example.co.uk/example because I don't know your URL.
I'm guessing you're only expecting it to error if the image is not found, because that would indicate that you've reached the last image in your folder, which is why I checked !== 404, if you want to break in the case of any error (such as 500 internal server error), it might be best to change if (xhttp.status !== 404) to if (xhttp.status === 200).

Javascript : Embed a string in javascript code

I am getting images in a loop and in loop I am making a html string, now within loop based on condition I want to add few attributes to specific images, that's not working properly for me, please help .
for(var i = 1; i <= 17; i++) {
//var ind = parseInt(i / 4);
var ind = i;
if(ind==1){
var step = " data-step=\'4\' data-show=\'sports\'data-intro=\'community\'" ;
}
else if(ind==2 ){
var step = " data-step=\'5\' data-show=\'sports\'data-intro=\'community\'" ;
}
else {
setp ='';
}
html +='<img src="'+baseurl+'front/images/layers/small/'+i+'.png" class="img-block cur" id="img-block-'+i+'" data-ls=\'{"index":'+ind+',"width":"'+arrWidthSizes(i)+'"}\' onclick="LoadDemoPopup_create('+i+')" />';
}
How do I add this step within image tag?
Maybe a silly question but I am stuck with this.

I am not able to write javascript array variables values into CSV file in a Given pattern

I have three javascript variables by name Area, Device and Problem. I want to store values of these variables into a CSV file one by one as given in the image attached with this and download that sheet on click of download button.Both jsp and javascript are in same file.i have tried the below so far.
Sample.jsp
<form>
<input type="BUTTON" id="DownloadBtn" value="Download">
</form>
<script type="text/javascript">
var Area=["Area1","Area2"];
var Device=[["device1","device2"],["device3","device4"]];
var Problem=[[["problem1","problem2"]],[["problem3","problem4"]],[["problem5","problem6"]],[["problem7","problem8"]]];
$("#DownloadBtn").click(function() {
var resp=confirm("Do You Want To Download?");
if(resp){
var last = '';
for (var i = 0; i < Area.length; i++) {
var first = Area[i];
for (var j = 0; j < first .length; j++) {
var second= device[j];
for(var k=0;k<second.length;k++){
var third=problem[k];
var value= third.replace(/"/g, '""');
if (value.search(/("|,|\n)/g) >= 0)
value= '"' + value+ '"';
if (k > 0)
last += ',';
last += value;
}
}
last += '\n';
}
var anchor= document.createElement('a');
anchor.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(last ));
anchor.setAttribute('download', 'sample.csv');
anchor.click();
}
});
</script>
Please suggest me any kind of changes or modification needed to get desired pattern. how this can be achieved as required in the image. Comment below for any kind of clarification on this question. Any suggestion would be welcome.

Check all extensions from a multiple upload file input

I need to change this code so that the condition checks the file extensions of all the selected files from multiple select file input, this code only checks for one. Any way I can do this?
var file = document.getElementById('file');
var ext = file.value.substring(file.value.lastIndexOf('.') + 1);
if(ext!== "mp4" && ext!== "m4v" && ext!== "f4v") {
alert('not an accepted file extension');
return false;
}
<input id="file" name="uploaded[]" type="file" multiple />
Note I only bothered to get the last three characters of the string because you only have three letter file extensions. If you wanted you could use .split('.') to get an array of segments and choose the last element of that array.
var selection = document.getElementById('file');
for (var i=0; i<selection.files.length; i++) {
var ext = selection.files[i].name.substr(-3);
if(ext!== "mp4" && ext!== "m4v" && ext!== "fv4") {
alert('not an accepted file extension');
return false;
}
}
To get all the input elements within an array of dom elements use document.getElementsByName('uploaded[]').
For example in your case it would be something like:
var files = document.getElementsByName('uploaded[]');
for (var i = 0, j = files.length; i < j; i++) {
var file = files[i];
// do stuff with your file
}
Multiple files validation through javascript some() method.
function isVideo(film) {
const ext = ['.mp4', '.m4v', '.fv4'];
return ext.some(el => film.endsWith(el));
}
function fileValidation() {
let files = document.getElementById('file');
for (let i = 0; i < files.files.length; ++i) {
let fname = files.files.item(i).name;
if (!isVideo(fname)) {
alert("File extension not supported!");
return false;
}
}
}
<input id="file" name="uploaded[]" type="file" multiple onchange="fileValidation()" />
<input name="" id="yourinputfieldis" onchange="checkFile()" type="file" multiple = "multiple" accept = "*">
<script>
function checkFile() {
var x = document.getElementById("yourinputfieldis");
var txt = "";
document.getElementById("demo").innerHTML = txt;
if ('files' in x) {
if (x.files.length == 0) {
txt = "Select one or more files.";
} else {
for (var i = 0; i < x.files.length; i++) {
var file = x.files[i];
if ('name' in file) {
var ext = file.name.split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg','doc','pdf','xlsx']) == -1) {
txt += "name: " + file.name + "<br>";
document.getElementById("yourinputfieldis").value = "";
if ('size' in file) {
txt += "size: " + file.size + " bytes <br>";
}
alert('You are trying to upload files which not allowed ' + "(" + file.name + " is invalid)");
}
}
}
}
}
else {
if (x.value == "") {
txt += "Select one or more files.";
} else {
txt += "The files property is not supported by your browser!";
txt += "<br>The path of the selected file: " + x.value;
}
}
}
</script>
Use this method to validate file types in aspx page,
<asp:FileUpload ID="fupload" name="fupload" runat="server" Class="form-control multi" accept="doc|docx|pdf|xls|xlsx" Width="270px" />
And I have used "MultiFile.js" plugin to choose Multiple file and Upload.

Categories