We Keep Coding

cannot access element within function in javascript custom object

When I run this code it generates the appropriate file upload ui and adds the event listener to the upload button. However the first line in the upload function throws an error - Cannot read property 'style' of undefined - for this.missingFile. What am I doing wrong here?
function FileUploader(props) {
var div = document.querySelector(props.element);
var uid = generateGuid();
var templateHtml = "<p><div id=\"dvMissingFile-" + uid + "\" class=\"missing-file\"> Please choose a file.</div><input type=\"file\" id=\"flUploadedFile-" + uid + "\" name=\"flUploadedFile-" + uid + "\"/></p><div class=\"dvProgressBar\" id=\"progress-" + uid + "\"><div></div></div>";
div.innerHTML = templateHtml;
this.uploadButton = document.querySelector(props.uploadButton);
this.fileInput = document.querySelector("#flUploadedFile-" + uid);
this.missingFile = document.querySelector("#dvMissingFile-" + uid);
this.progress = document.querySelector("#progress-" + uid);
this.url = props.postUrl;
this.upload = function() {
this.missingFile.style.display = "none";
if (this.fileInput.files.length === 0) {
this.missingFile.style.display = "";
}
else {
var file = this.fileInput.files[0];
var xhr = new XMLHttpRequest();
var pbar = document.querySelector("#progress-" + uid + ">div");
if (xhr.upload) {
// do upload
}
}
}
this.uploadButton.addEventListener("click", this.upload);
}
Usage example
<div id="dvUploader"></div>
<button type="button" id="btnUpload" class="btn btn-primary">Upload</button>
<script>
var uploader = new FileUploader({
element: "#dvUploader",
uploadButton: "#btnUpload",
postUrl: "myposturl"
});
</script>

One small update to your code can help:
this.upload = function() {
// ...
}.bind(this);

Sharepoint. The collection has not been initialized

I trying to make simple sharepoint app on javascript.
I create list, named "test" and add some records where.
After starting my app i get error: "The collection has not been initialized. It has not been requested or the request has not been executed. It may need to be explicitly requested".
It raised in success function.
Here is code:
'use strict';
var web;
var hostweburl;
var appweburl;
var collListItem;
function sharePointReady() {
hostweburl =
decodeURIComponent(
getQueryStringParameter('SPHostUrl')
);
appweburl =
decodeURIComponent(
getQueryStringParameter('SPAppWebUrl')
);
var scriptbase = hostweburl + '/_layouts/15/';
$.getScript(scriptbase + 'SP.js', function () {
$.getScript(scriptbase + 'SP.Runtime.js', function () {
$.getScript(scriptbase + 'SP.RequestExecutor.js', printAllListNamesFromHostWeb).fail(function () { alert("fail") });
}).fail(function () { alert("fail") });
}).fail(function () { alert("fail") });
//ExecuteOrDelayUntilScriptLoaded(printAllListNamesFromHostWeb, "SP.js");
//printAllListNamesFromHostWeb();
}
function getQueryStringParameter(param) {
var params = document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == param) {
return singleParam[1];
}
}
}
function printAllListNamesFromHostWeb() {
var context;
var factory;
var appContextSite;
context = new SP.ClientContext(appweburl);
factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
context.set_webRequestExecutorFactory(factory);
appContextSite = new SP.AppContextSite(context, hostweburl);
web = appContextSite.get_web();
var oList = web.get_lists().getByTitle("testList");
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');
collListItem = oList.getItems(camlQuery);
context.load(collListItem, 'Include(Id, Title)');
context.executeQueryAsync(
//Function.createDelegate(this, success),
//Function.createDelegate(this, errorHandler)
success, errorHandler
);
}
function success(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listItemInfo += '\nID: ' + oListItem.get_id() + '\nTitle: ' + oListItem.get_item('Title');
}
alert(listItemInfo.toString());
}
function errorHandler(sender, args) {
alert('Fail: ' + args.get_message() + '\n' + args.get_stackTrace());
}
sharePointReady();

var listItemEnumerator = collListItem.getEnumerator();
above line in success function may be causing this issue.
You have declared collListItem variable in printAllListNamesFromHostWeb function. So it will not available/will be undefined in success function.
What you need to do is declare collListItem variable global (i.e. outside of your printAllListNamesFromHostWeb function where you have declared appweburl,hostweburl,web variables) and your code will work fine.

Multiple Image File Upload with Captions

I managed to get the captions by foreach loop but now I'm facing a new problem.
I get duplicates in my database because of the nested loop, please check the code below.
JavaScript
window.onload = function () {
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("galleryFilesAdd");
filesInput.addEventListener("change", function (event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail img-responsive' alt='" + picFile.name + "' + height='220' width='300'; src='" + picFile.result + "'" +
"title='" + picFile.name + "'/><button type='button' class='delete btn btn-default' class='remove_pic'> <span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button><input type='text' id ='imagecaption[]' name='imagecaption[]' class='form-control' placeholder='Add Image Caption'>"
output.insertBefore(div, null);
div.children[1].addEventListener("click", function (event) {
div.parentNode.removeChild(div);
});
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else {
console.log("Your browser does not support File API");
}
}
Controller
public async Task<ActionResult> AddHotel(HotelViewModels.AddHotel viewModel, IEnumerable<HttpPostedFileBase> galleryFilesAdd)
{
try
{
if (ModelState.IsValid)
{
foreach (var files in galleryFilesAdd)
{
var fileName = Guid.NewGuid().ToString("N");
var extension = Path.GetExtension(files.FileName).ToLower();
string thumbpath, imagepath = "";
using (var img = Image.FromStream(files.InputStream))
{
foreach (var caption in viewModel.imagecaption)
{
var galleryImg = new hotel_gallery_image
{
hotel_id = hotel.id,
thumbPath = String.Format("/Resources/Images/Hotel/GalleryThumb/{0}{1}", fileName, extension),
imagePath = String.Format("/Resources/Images/Hotel/Gallery/{0}{1}", fileName, extension),
entry_datetime = DateTime.Now,
guid = Guid.NewGuid().ToString("N"),
enabled = true,
image_caption = caption
};
db.hotel_gallery_image.Add(galleryImg);
}
}
}
await db.SaveChangesAsync();
return RedirectToAction("Index", "Hotel");
}
}
catch (DbEntityValidationException ex)
{
string errorMessages = string.Join("; ", ex.EntityValidationErrors.SelectMany(x => x.ValidationErrors).Select(x => x.PropertyName + ": " + x.ErrorMessage));
throw new DbEntityValidationException(errorMessages);
}
viewModel.Country = await db.countries.ToListAsync();
return View(viewModel);
}
and viewModel
public string[] imagecaption { get; set; }
Inserted data into database

I think the problem is in your
image_caption = viewModel.imagecaption
because you iterate through var files in galleryFilesAddyou use the reference to the same image_caption from viewModel on each iteration, so you need to filter your image_caption depending on another data (fileName or another data which you viewmodel contains).
UPDATE
Ideally if you have same properties in your ViewModel and files(filename for example), then you could do something like thatimage_caption = viewModel.FirstOrDefault(x=>x.Filename == filename).imagecaption
In order to be more specific would be helpful if you provide code for your Viemodel and galleryFilesAdd classes.
UPDATE 2
In your case 2nd foreach you iterate through whole collection of imagecaption array, on each iteration through galleryFilesAdd collection, which cause double data in you database.
If you can take your captions sequentially for the 1st file take the 1st element from imagecaption array and so on then you can use code like this:
if (ModelState.IsValid)
{
int index = 0;
foreach (var files in galleryFilesAdd)
{
var fileName = Guid.NewGuid().ToString("N");
var extension = Path.GetExtension(files.FileName).ToLower();
string thumbpath, imagepath = "";
using (var img = Image.FromStream(files.InputStream))
{
if(index < viewModel.imagecaption.Length){
var galleryImg = new hotel_gallery_image
{
hotel_id = hotel.id,
thumbPath = String.Format("/Resources/Images/Hotel/GalleryThumb/{0}{1}", fileName, extension),
imagePath = String.Format("/Resources/Images/Hotel/Gallery/{0}{1}", fileName, extension),
entry_datetime = DateTime.Now,
guid = Guid.NewGuid().ToString("N"),
enabled = true,
image_caption = viewModel.imagecaption[index]
};
db.hotel_gallery_image.Add(galleryImg);
index++;
}
}
}

error in google apps script if no file upload is specified

I'd like to give the user the option to upload a file, but it's not strictly necessary. This script seems to glitch if there is no file specified. How can I fix that? It seems like the line it really doesn't like is: var file1 = folder.createFile(blob1);
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {
var dropbox = "Student Files";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var id = "1L2syfAOm6MiYPtWuWwFZFK_ZtLpLOjNx9EpjHh2IKUY";
var ss = SpreadsheetApp.openById(id);
var blob1 = form.myFile1;
var file1 = folder.createFile(blob1);
file1.setDescription("Uploaded by " + form.myName);
var f1 = '=HYPERLINK("' + file1.getUrl() + '", "File 1")';
Logger.log("test");
var sheet = ss.getSheetByName('Sheet1');
sheet.appendRow([form.myName, form.addy, form.twitter, form.status, form.what, form.projTitle,
form.brief, form.full, form.role, form.date, form.website, f1]);
return "Your entry was successfully uploaded!";
} catch (error) {
return error.toString();
}
}
EDIT: Thanks to suggestion, here is what I ended up with (allows for three optional files)
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {
var dropbox = "Student Files";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var id = "1L2syfAOm6MiYPtWuWwFZFK_ZtLpLOjNx9EpjHh2IKUY";
var ss = SpreadsheetApp.openById(id);
var blob1 = form.myFile1;
var blob2 = form.myFile2;
var blob3 = form.myFile3;
// check for empty blobs on file attachment uploads
if( !isEmpty(blob1) ) {
var file1 = folder.createFile(blob1);
file1.setDescription("Uploaded by " + form.myName);
var f1 = '=HYPERLINK("' + file1.getUrl() + '", "File 1")';
} else {
var f1 = "nada";
}
if( !isEmpty(blob2) ) {
var file2 = folder.createFile(blob2);
file2.setDescription("Uploaded by " + form.myName);
var f2 = '=HYPERLINK("' + file2.getUrl() + '", "File 2")';
} else {
var f2 = "nada";
}
if( !isEmpty(blob3) ) {
var file3 = folder.createFile(blob3);
file3.setDescription("Uploaded by " + form.myName);
var f3 = '=HYPERLINK("' + file3.getUrl() + '", "File 3")';
} else {
var f3 = "nada";
}
Logger.log("test");
var sheet = ss.getSheetByName('Sheet1');
sheet.appendRow([form.myName, form.addy, form.twitter, form.status, form.what, form.projTitle,
form.brief, form.full, form.role, form.date, form.website, f1, f2, f3]);
return "Your entry was successfully uploaded!";
} catch (error) {
return error.toString();
}
}
// New stuff. A function that tests if a string is empty or null
function isEmpty(str) {
return (!str || 0 === str.length);
}

Can't you just test if a name is specified? I.e. add an if statement that checks that the name is not null and not empty... You might also want to test for things like slashes, in case the user is trying to create subdirectories...
I lifted a test for null or empty from here, but you can roll your own.
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {
var dropbox = "Student Files";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var id = "1L2syfAOm6MiYPtWuWwFZFK_ZtLpLOjNx9EpjHh2IKUY";
var ss = SpreadsheetApp.openById(id);
var blob1 = form.myFile1;
if( !isEmpty(blob1) ) {
var file1 = folder.createFile(blob1);
file1.setDescription("Uploaded by " + form.myName);
var f1 = '=HYPERLINK("' + file1.getUrl() + '", "File 1")';
Logger.log("test");
var sheet = ss.getSheetByName('Sheet1');
sheet.appendRow([form.myName, form.addy, form.twitter, form.status, form.what, form.projTitle,
form.brief, form.full, form.role, form.date, form.website, f1]);
return "Your entry was successfully uploaded!";
} else {
return "No file name specified!";
}
} catch (error) {
return error.toString();
}
}
// New stuff. A function that tests if a string is empty or null
function isEmpty(str) {
return (!str || 0 === str.length);
}

Just check if blob1 is null, if it is then trhow an exception.

Why phonegap click event fires twice?

I am developing android app using phonegap 1.5.0
App stores data in local database and synchronizes using web services.
I am using one button click to call synchronize data JavaScript function.
What I have found is:
This synch button's on click event fires twice.
Single record is getting uploaded twice and the uploaded time is same in the server database.
How to avoid this?
Thanks
EDIT:
Hey everyone, sorry for the delay in reply; was bit busy with some priority work.
Calling SyncData() function on click of button.
Here is the code:
document.addEventListener("DOMContentLoaded", onDeviceReady, false);
var db;
var maxrecords = 0;
var recordsprocessed = 0;
var urlstart = "http://www.mywebsite.com/";
function onDeviceReady() {
db = window.openDatabase("LocalDB", "1.0", "PhoneGap Demo", 50 * 1024 * 1024);
}
function SyncData() {
maxrecords = 0;
recordsprocessed = 0;
db.transaction(queryDB, errorCB, successCB);
}
function queryDB(tx) {
var entriestoupload = 0;
var profimagetoupload = 0;
//check how many entries are to be synchronized
tx.executeSql('SELECT count(*) as cnt FROM tblEntries WHERE IsUploaded=0', [], function(tx, results) {
entriestoupload = parseInt(results.rows.item(0)['cnt']);
//check how many profile images are to be uploaded
tx.executeSql('SELECT count(*) as cnt FROM tblEntries WHERE IsProfileImageUploaded=0', [], function(tx, results) {
profimagetoupload = parseInt(results.rows.item(0)['cnt']);
//synch proceeds if there is any record which is not sychronised
if (entriestoupload > 0 || profimagetoupload > 0) {
var dataMsg = '';
var porofimgMsg = '';
if (entriestoupload > 0) dataMsg = entriestoupload + ' entry, ';
if (profimagetoupload > 0) porofimgMsg = profimagetoupload + ' profile image ';
// give user exact info about what will be synchronized
if (confirm(dataMsg + porofimgMsg + ' are not synchronized.\n Do you want to start synchronisation? \n Please wait till synch successfull message appears.')) {
//start synchronisation
tx.executeSql('SELECT * FROM tblEntries ORDER BY DateOfRegistration DESC', [], uploadData, errorCB);
}
} else {
alert('All records are already Synchronized.');
}
}, errorCB);
}, errorCB);
}
function uploadData(tx, results) {
var len = results.rows.length;
maxrecords = len;
var Synched = 0;
if (len > 0) {
for (var i = 0; i < len; i++) {
var row = results.rows.item(i);
var LocalId = row['LocalId'];
var DateOfRegistration = getDateTimeformatMySql(String(row['DateOfRegistration']));
var DateOption = getDateTimeformatMySql(String(row['DateOption']));
var VolunteerId = row['VolunteerId'];
var IsUploaded = row['IsUploaded'];
var LiveId = row['LiveId'];
var ProfileImagePath = row['ProfileImagePath'];
var IsProfileImageUploaded = parseInt(row['IsProfileImageUploaded']);
var params = null;
var weburl = null;
if (IsUploaded == 0) {
//set parameters for web service
params = "LocalId=" + LocalId + "&OrganizationName=" + row['OrganizationName'] + "&FirstName=" + row['FirstName'] + "&LastName=" + row['LastName'] + "&EmailAddress=" + row['EmailAddress'] + "&MobileNumber=" + row['MobileNumber'] + "&Country=" + row['Country'] + "&State=" + row['State'] + "&City=" + row['City'] + "&Lattitude=" + row['Lattitude'] + "&Longitude=" + row['Longitude'] + "&Website=" + row['Website'] + "&DateOption=" + DateOption + "&TimeOption=" + row['TimeOption'] + "&NumberOption=" + row['NumberOption'] + +"&RadioOption=" + row['RadioOption'] + "&Details=" + row['Details'] + "&CheckBoxoption=" + row['CheckBoxoption'] + "&DropDownOption=" + row['DropDownOption'] + "&DateOfRegistration=" + DateOfRegistration + "&VolunteerId=" + VolunteerId;
//web service url
weburl = urlstart + "mywebserviceurl";
try {
$.ajax({
async: false,
type: "POST",
url: weburl,
data: params,
dataType: "json",
success: function(data, textStatus, jqXHR) {
if (data.Success == "0") {
alert('web services error:\n' + data.Message);
}
if (data.Success == "1") {
try {
LiveId = parseInt(String(data.LiveId));
IsUploaded = 1;
//Update local database to set IsUploaded and LiveId
tx.executeSql("UPDATE tblEntries SET LiveId= " + LiveId + " ,IsUploaded=1 WHERE LocalId= " + LocalId, [], function(tx, results) {
Synched = Synched + 1; /*alert(LiveId);*/
}, errorCB);
//check if profile image exists or not
if (ProfileImagePath != undefined) {
uploadImage(LiveId, LocalId, ProfileImagePath, '1', '');
}
} catch (e) {
}
}
},
error: function() {
alert("There was an error loading the feed");
}
});
} catch (e) {
}
} else {
//check if data is uploaded and image is not uploaded
if (IsProfileImageUploaded == 0 && ProfileImagePath != undefined) {
uploadImage(LiveId, ShopId, ProfileImagePath, '1', '');
}
}
}
}
} // end of querySucess function
//function to upload image
function uploadImage(LiveId, LocalId, ImagePath, UploadType, CreationDate) {
try {
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = ImagePath;
options.mimeType = "image/jpg";
var params = new Object();
params.LiveId = LiveId;
params.LocalId = LocalId;
params.UploadType = UploadType;
params.CreationDate = CreationDate;
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
var url = urlstart + "mywebservice_url_to_uploadimage";
ft.upload(ImagePath, url, win, fail, options, false);
} catch (e) {
console.error("Survey App Err :" + e.message);
}
}
function win(r) {
var jsonresponse = r.response.substring(r.response.indexOf('{'), r.response.indexOf('}') + 1);
var obj = $.parseJSON(jsonresponse);
if (obj.Success == "1") {
var LocalId = parseInt(obj.LocalId);
var UploadType = parseInt(obj.UploadType);
if (UploadType == 1) {
db.transaction(function(tx) {
tx.executeSql("UPDATE tblEntries SET IsProfileImageUploaded=1 WHERE LocalId=?", [LocalId], function(tx, results) {
}, errorCB);
}, errorCB, successCB);
}
}
}
function fail(error) {
alert("There was an error uploading image");
}

Only solution i found for this is to use tap instead of click and it will solve the problem.