2

The below Javascript works perfectly when i'm trying to upload a file to SharePoint 2013 online. However I have been looking unsuccessfully for a way to populate another column in the document library at the same time as my file is uploaded. For example a single line of text column with the name "doctype". Everything that I try just doesn't seem compatiable with my code. Is it possible at all?

Here is my code:

jQuery(document).ready(function () {
$(".uploadFile").click(function () {
fileID = $('#fileInput').attr('id');
var selectedDocCat = $('#ddlCategory').val();
var selectedDocType = $('#ddlType').val();
document.getElementById("displayName").value = mainFolderUrlVal + "-" + 
selectedDocCat + '-' + selectedDocType;
fileName = $('#displayName').val();
var fileUploading = document.getElementById('fileInput');
if (fileUploading.files.length === 0) {
    alert("Select a file and specify a filename!");
    return;
}
var parts = fileUploading.value.split("\\");
var filename = parts[parts.length - 1];
docTitle = parts[parts.length - 1];
var fileExt = filename.split('.').pop();
var file = fileUploading.files[0];
newFileName = fileName + "." + fileExt;
console.log('filename is: ' + filename);
docCat = selectedDocCat;
uploadItems(docCat);
});
});

function uploadItems(docUplCat) {
var getArrayBuffer = getFileBuffer();
getArrayBuffer.done(function (arrayBuffer) {
var serverRelativeUrlToFolder = 'Files/' + mainFolderUrlVal + "/" + 
docUplCat;
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var docLibraryEndpoint = siteUrl + 
"/_api/web/getfolderbyserverrelativeurl('" + serverRelativeUrlToFolder + 
"')/files/add(overwrite=true,url='" + newFileName + "')";
$.ajax({
    url: docLibraryEndpoint,
    type: "POST",
    binaryStringRequestBody: true,
    data: arrayBuffer,
    timeout: 1000000,
    processData: false,
    state: "Update",
    headers: {
        "Content-Type": "application/octet-stream",
        "accept": "application/json;odata=verbose",
        "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
    },
    success: function (file) {
        alert("File uploaded succesfully");
        window.frameElement.cancelPopUp(); return false;
    },
    error: function (data) {
        alert('Error: File did not upload Successfully');
    }
});
});
}
function _arrayBufferToBase64(buffer) {
var binary = ''
var bytes = new Uint8Array(buffer)
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return binary;
}
function getFileBuffer() {
var deferred = jQuery.Deferred();
var reader = new FileReader();
reader.onloadend = function (e) {
deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer($('#fileInput')[0].files[0]);
console.log('done: ' + reader);
return deferred.promise();
} 

Any help would be greatly appreciated, thank you!

0

Based on recent tests I did, you cannot do it during the upload. You must first upload your file, and then update the fields you want.

To do it:

  1. Upload your file using "/_api/web/getfolderbyserverrelativeurl(...)/files/add(overwrite=true,url='...')"
  2. Read the response from the server in order to retrieve body.d.ListItemAllFields.__deferred.uri
  3. Do a GET request to the URL provided by body.d.ListItemAllFields.__deferred.uri
  4. The server will return the ID of the uploaded file
  5. And finally you can use this ID to update the columns you want for your file

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.