I have written a code that gets all the URLs from the URL column in a document library , converts them into base64 and stores the resultant string in the respective column.
The code works fine on a few list items , However fails for 700+ items without any errors.
Checked the network trace and found the below
1. Images being fetched
2. Only 100 List Items out of 700+ Updated as shown below
3. Found the below entry in network tab , not sure what this means. The executions stops at this point and doesn't proceed further
The end goal here is to convert all the URLs in the URL column to base64 and store it in the base64 column against every entry in the document library.
Can anyone here suggest how this needs to be handled and if it is possible to skip the entries that cause errors at the time of execution and proceed further?
Below is the code
Get all the list items
function GetItemId() {
//debugger;
var deferred = $.Deferred();
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('DBSDistributorList')/Items?$select=ID,BaseURL,DistributorLogo",
method: "GET",
type: 'GET',
async: false,
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
},
success: function (result) {
deferred.resolve(result);
$.each(result.d.results, function (index, row) {
UpdateListItemUsingItemId(row["ID"], row["DistributorLogo"]["Url"]);
});
},
error: function (result) {
deferred.reject(result);
}
}); // Ajax list items
return deferred.promise();
};
Update all the list Items
function UpdateListItemUsingItemId(Id, dLogo) {
//var deferred = $.Deferred();
convertImgToBase64URL(dLogo, function (base64Img) {
//console.log(base64Img);
var _listItem = {
"__metadata": { 'type': 'SP.Data.DBSDistributorListItem' },
"BaseURL": base64Img
};
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('DBSDistributorList')/Items(" + Id + ")",
method: 'POST',
contentType: "application/json;odata=verbose",
async: false,
data: JSON.stringify(_listItem),
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-Type": "application/json;odata=verbose",
"X-Http-Method": "MERGE",
"If-Match": "*"
},
success: onSuccess,
error: onError
/*success: function (data) {
deferred.resolve(data);
},
error: function (err) {
deferred.reject(err);
}*/
});
//return deferred.promise();
});
function onSuccess(data) {
console.log('List Item Updated');
}
function onError(error) {
console.log(JSON.stringify(error));
}
};
Conversion to base64
function convertImgToBase64URL(url, callback, outputFormat) {
var canvas = document.createElement("CANVAS");
var ctx = canvas.getContext("2d");
ctx.clearRect( 0 , 0 , canvas.width, canvas.height );
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0 , 0 , canvas.width, canvas.height);
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function () {
//var canvas = document.createElement('CANVAS'),
// ctx = canvas.getContext('2d'), dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
Would be grateful if anyone could help me with this.
Also please let me know if any other details are required.
Thanks in advance.
console.log()
statements to help keep track of where in the process it is, for instance right at the beginning ofGetAllItems(requestUrl)
you couldconsole.log("get all items called with url: " + requestUrl)
. Also you could add in otherconsole.log()
lines in some of the otherfail
handlers or even in thedone
handlers to track progress and see where the error is coming from.$top=1000
to get all the items? Because I think clearly doing all the stuff that's required to convert to base64 (create a canvas element, create anImage
object, etc) is going to take longer when you do that 700 times vs. just 100 times. If you want to know just how long it took to do the recursive requests to get all the items, addconsole.log("retrieved all items: " + allItems.length)
right before theUpdateFormDigest