SharePoint 2013 List on premises
Can we drag n drop files - Attach files in a sharepoint 2013 list not in datasheet view? All items
Thank you!
Below is a js file with datasheet view drag n drop
/***** ITEM DRAG AND DROP *****/
/*** Uploads a document after the user drags and drops it over an item. *****/
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: [
function (ctx) {
DragNDropItem.userName = jQuery("#welcomeMenuBox a.ms-core-menu-root").text().replace("Use SHIFT+ENTER to open the menu (new window).", "");
DragNDropItem.confirmMSG = "Uploading of High-Risk Personally Identifiable Information (PII) is prohibited. If you are unsure about what constitues High-Risk PII, please see PII
Guidance on the Home Page" + "I, "+DragNDropItem.userName+" am affirming I am compliant with PII Guidance and understand the implications of uploading any and all material"
var checkExists = setInterval(function () {
if (jQuery("div[id*='spgridcontainer']").length > 0 && jQuery("[id*='_leftpane_mainTable']").length > 0) {
clearInterval(checkExists);
ItemDragNDrop()
}
}, 100)
}
]
});
function ItemDragNDrop(){ //adds the drag and drop to the table rows
var launchDragNDrop = false;
for(i in g_ctxDict){
var wpq = g_ctxDict[i].wpq
jQuery("#spgridcontainer_"+wpq+"_leftpane_mainTable tr[iid]").each(function(i){ //changed to iid attribute
jQuery(this).addClass("dropContainer")
});
}
//appending the file input to the body and hiding it.
if(jQuery("#itemDragNDropFileInput").length == 0){
jQuery("body").append('<input type="file" id="itemDragNDropFileInput">')
jQuery("#itemDragNDropFileInput").css("display","none")
}
jQuery("body")[0].ondragover = jQuery("body")[0].ondragenter = function(evt) {
evt.preventDefault();
};
jQuery('body').append("<div id='uploadToolTip' style='font-size:26px;'></div>")
jQuery(".dropContainer").on({
drop: function(evt){
jQuery("body").append('<div id="PIITicketSpinner">Spinner</div>')
var e = document.getElementById('PIITicketSpinner');
var uploading = {
title: "Uploading Document(s) to "+DragNDropItem.Title,
showClose: false,
width: 450,
height: 200,
html: e.cloneNode(true)
};
evt.preventDefault();
evt.stopPropagation();
jQuery(".dropContainer").css('border','none').css('background','none')
jQuery('#uploadToolTip').offset({"white-space:pre;">DragNDropItem.folderDragNDropCtx = getCtx("WebPart"+DragNDropItem.WPQ)
var folderDragNDropCtxNum = DragNDropItem.folderDragNDropCtx.ctxId
var ListTitle = DragNDropItem.folderDragNDropCtx.ListTitle
var js = document.getElementById(DragNDropItem.closestWPQ).jsgrid
var itemName = js.GetRecord(DragNDropItem.ID).fieldRawDataMap.csrInfo.Title
DragNDropItem.numOfItems = evt.originalEvent.dataTransfer.files.length
DragNDropItem.files = evt.originalEvent.dataTransfer.files
if(confirm(DragNDropItem.confirmMSG)){
for(var i=0;i<DragNDropItem.numOfItems;i++){
DragNDropItem.attachFile(evt.originalEvent.dataTransfer.files[i])
}
}
//for loop to call DragNDropItem.attachFile
//loop DragNDropItem.numOfItems of times and pass DragNDropItem.files
},
dragover: function(e) {
var newID = jQuery(this).attr("iid").split(",")[1] //gets the item ID
//run if the coordinates are not the same. Adds the tooltip
if(DragNDropItem.DragNDropX !== e.originalEvent.pageX && DragNDropItem.DragNDropX !== e.originalEvent.pageX){
DragNDropItem.DragNDropX = e.originalEvent.pageX
DragNDropItem.DragNDropY = e.originalEvent.pageY
DragNDropItem.Title = jQuery(this).attr("title")
jQuery('#uploadToolTip').offset({Upload to: "+DragNDropItem.Title)
}
//changes the background color of the table row when hovering
e.preventDefault();
e.stopPropagation();
jQuery(this).css('border','3px solid #3d7ee0').css('background','rgb(156, 206, 240)')
DragNDropItem.ID = jQuery(this).attr("iid").split(",")[1] //getting the item ID
DragNDropItem.closestWPQ = jQuery(this).closest("div[id^='spgridcontainer']")[0].id
DragNDropItem.closestWPQ = DragNDropItem.closestWPQ.replace("_leftpane","") //getting
DragNDropItem.WPQ = DragNDropItem.closestWPQ.replace("spgridcontainer_","")
},
dragleave: function(e) {
e.preventDefault();
e.stopPropagation();
jQuery(this).css('border','none').css('background','none')
jQuery('#uploadToolTip').offset({"white-space:pre;">}
});
}
var DragNDropItem = {
ID:"",
closestWPQ: "",
numOfItems: 0,
MaxAttemptNumber: 2,
UploadModal:{},
internalName:"",
folderDragNDropCtx:"",
DragNDropX:0,
DragNDropY:0,
Title:"",
attachFile: function(file) {
var getFileBuffer = function(file) {
var deferred = jQuery.Deferred();
var reader = new FileReader();
reader.onload = function(e) {
deferred.resolve(e.target.result);
}
reader.onerror = function(e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise();
};
getFileBuffer(file).then(function(buffer) {
var bytes = new Uint8Array(buffer);
var content = new SP.Base64EncodedByteArray(); //base64 encoding
for (var b = 0; b < bytes.length; b++) {
content.append(bytes[b]);
}
jQuery().SPServices({
operation: "AddAttachment",
listName: "Datasheet", //fix
listItemID: DragNDropItem.ID,
fileName: file.name,
attachment: content.toBase64String(),
completefunc: function(data,status){
if(status == "success"){
}else{
}
}
});
})
}
};
/**** END ITEM DRAG AND DROP ***/