I am using SharePoint 2013 on premise. I am trying to upload file to the custom list from custom webpart purely jQuery and javascript. In my form I have hyperlink, when I click on it, it will open SharePoint Modal dialog. Where in I am making HTML5 drag & drop and trying to upload file.
This is my code HTML5, javascript with SharePoint REST api
(function(window) {
function triggerCallback(e, callback) {
if(!callback || typeof callback !== 'function') {
return;
}
var files;
if(e.dataTransfer) {
files = e.dataTransfer.files;
} else if(e.target) {
files = e.target.files;
}
callback.call(null, files);
}
function makeDroppable(ele, callback) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('multiple', false);
input.style.display = 'none';
input.addEventListener('change', function(e) {
triggerCallback(e, callback);
});
ele.appendChild(input);
ele.addEventListener('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
ele.classList.add('dragover');
});
ele.addEventListener('dragleave', function(e) {
e.preventDefault();
e.stopPropagation();
ele.classList.remove('dragover');
});
ele.addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
ele.classList.remove('dragover');
triggerCallback(e, callback);
});
ele.addEventListener('click', function() {
input.value = null;
input.click();
});
}
window.makeDroppable = makeDroppable;
})(this);
(function(window) {
makeDroppable(window.document.querySelector('.droppable'), function(files) {
console.log(files);
/*Check Files Length*/
if (files.length > 1) {
var msg = document.querySelector('.dz-message');
msg.innerHTML += "<br/><span style='color:red'>You cannot upload more than 1 files</span>";
return;
}
/*End*/
var output = document.querySelector('.output');
output.innerHTML = '';
//for(var i=0; i<files.length; i++) {
// output.innerHTML += '<p>'+files[i].name+'</p>';
//}
//var formData = new FormData();
//formData.append("files", files);
var file = files[0];
var getFileBuffer = function(file) {
var deferred = $.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();
};
var url = "_api/Web/Lists/getByTitle('GatePassDetails')/items(4)"
uploadDocument(getFileBuffer, files[0].name, url)
});
function uploadDocument(buffer, fileName, url) {
var url = String.format("{0}/{1}/AttachmentFiles/add(FileName='{2}')", _spPageContextInfo.webAbsoluteUrl, url, fileName);
var call = jQuery.ajax({
url: url,
data: buffer,
type: "POST",
processData: false,
headers: {
Accept: "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
"Content-Length": buffer.byteLength
}
});
}
})(this);
My codes works without any error but when I go to the list and try to open file than I will get error message as below after opening the file.
Kindly can somebody help me to solve it.
