I got a request from Gilbert Okello regarding a custom upload solution for submitting documents to various document libraries in a site collection. This solution uses the “CopyIntoItems” method to let the user select a document from the local computer and upload it to a document library / folder within the site collection.
I must start off emphasizing that this solution requires Internet Explorer 10 or another modern browser to work. There is NO WAY you can make it work in any Internet Explorer version below 10. I have tested it in SP 2010 and SP 2013, but I guess it should work in SP 2007 as well.
The code provided at the bottom of this article builds the upload control by reading a set of predefined upload locations from a custom list. This is the code that builds the dropdown select containing the predefined options:
$(document).ready(function(){
spjs.upload.getUploadDestinations({
"listName":"UploadDestination",
"listBaseUrl":"",
"friendlyNameField":"Title",
"relPathField":"RelPath",
"orderByField":"Title"
});
});
listName: The GUID or the display name of the list where the upload destinations are stored.
listBaseUrl: The base URL of the list. If it is in the root site, use “”. If it is in a subsite, use “/MySubsite” or “/Sites/MySubsite” depending on your setup. The list name should NOT be included in this variable.
friendlyNameField: The FieldInternalName of the field that holds the friendly name of the destination.
relPathField: The FieldInternalName of the field that holds the relative URL to the library or folder to upload the files.
orderByField: The FieldInternalName of the field to sort by.
Create a custom list with one additional single line of text field “RelPath”. Enter the friendly name in the Title field, and the relative path to the library or folder in the field “RelPath”.
Using this list is optional. If you like, you can enter the destination directly in the code in the <select> control with id “fileUploadTo”. If you prefer to use the manual approach, ensure you comment out the function call to “getUploadDestinations” in the code example.
The script file “spjs-utility.js” is only used for the function “getUploadDestinations” an you can remove it if you enter the destinations manually.
Get the file “spjs-utility.js” from here. You will also need jQuery. Put this code in a HTML Form Web part where you want the upload control to appear – change the path to the scripts in the top of the code to match you locale files:
<!--
/* SPJS Upload for SharePoint
* ---------------------------------------------
* Created by Alexander Bautz
* alexander.bautz@gmail.com
* http://spjsblog.com
* Copyright (c) 2013 Alexander Bautz (Licensed under the MIT X11 License)
* ---------------------------------------------
* Include reference to:
* jquery - http://jquery.com
* spjs-utility.js - http://spjsfiles.com
* ---------------------------------------------
*/
-->
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript">
/*
Pull the upload destinations from this list
If you prefer, you can add the destinations manuelly in the <select> with id "fileUploadTo".
In that case, comment out this function call
*/
$(document).ready(function(){
spjs.upload.getUploadDestinations({
"listName":"UploadDestination",
"listBaseUrl":"",
"friendlyNameField":"Title",
"relPathField":"RelPath",
"orderByField":"Title"
});
});
</script>
<style type="text/css">
td.spjs_fileUploadLabel{
width:150px;
height:25px;
font-size:16px !important;
font-weight:bold;
font-family:Calibri;
color:#ffffff;
vertical-align:middle;
background-color:#5B9BD5;
border:1px #41719C solid;
padding:3px 3px 3px 6px;
cursor:default;
}
td.spjs_fileUploadBody{
width:350px;
font-size:16px !important;
border:1px #41719C solid;
padding:3px;
cursor:default;
}
input.spjs_fileUploadBtn{
width:100%;
height:33px;
font-size:16px !important;
font-weight:bold;
font-family:Calibri;
color:#ffffff;
border:1px #41719C solid;
background-color:#5B9BD5;
cursor:pointer;
margin:0px;
padding:0px;
display:none;
}
input.spjs_fileUploadBtn:hover{
color:#5B9BD5;
background-color:#ffffff;
}
.spjs_fileUploadSelect{
width:100%;
height:25px;
background-color:#ffffff !important;
border:none;
font-size:14px;
}
.spjs_empty{
border:1px #FF0000 dashed !important;
}
</style>
<table cellpadding="0" cellspacing="5" style="border-collapse:separate;">
<tr>
<td class="spjs_fileUploadLabel">File</td>
<td class="spjs_fileUploadBody">
<input type="file" id="filePicker" style="width:100%;padding:0px;">
<span style="display:none;color:red;font-size:12px;">Your browser is not supported!<br>Use Internet Explorer 10 or another modern browser.</span>
</td>
</tr>
<tr>
<td class="spjs_fileUploadLabel">Upload To</td>
<td class="spjs_fileUploadBody">
<select id="fileUploadTo" class="spjs_fileUploadSelect">
<!--
<option value="">Select destination</option>
<option value="/Upload/Folder1">Folder 1</option>
<option value="/Upload/Folder2">Folder 2</option>
-->
</select>
</td>
</tr>
<tr>
<td></td>
<td class="spjs_fileUploadBtn">
<input id="uploadFileBtn" type="button" class="spjs_fileUploadBtn" onclick="spjs.upload.submitFile();" value="Submit" />
<span id="uploadError" style="display:none;color:red;"></span>
</td>
</tr>
</table>
<script type="text/javascript">
/******************************************************
Do not change anything below this line
*******************************************************/
var spjs = spjs || {};
spjs.upload = {
"version":"1.0",
"versionDate":"December 8, 2013",
"data":{"fileDataStr":""},
"handleFileSelect":function(evt){
// Modified from http://jsfiddle.net/eliseosoto/JHQnk/
var files = evt.target.files, file = files[0], reader;
if(files && file){
reader = new FileReader();
reader.onload = function(readerEvt) {
var binaryString = readerEvt.target.result;
spjs.upload.data.fileDataStr = binaryString.substring(binaryString.indexOf(",")+1);
$("#uploadFileBtn").show();
};
reader.readAsDataURL(file);
}
},
"submitFile":function() {
if($("#fileUploadTo").val() === ""){
$("#fileUploadTo").addClass("spjs_empty");
return;
}else{
$("#fileUploadTo").removeClass("spjs_empty");
}
var filePath, fileName, destination, b;
filePath = $("#filePicker").val();
fileName = filePath.substring(filePath.lastIndexOf("\\")+1);
destination = location.protocol+"//"+location.host+$("#fileUploadTo").val()+"/"+fileName;
b = [];
b.push("<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>");
b.push("<soap:Body>");
b.push("<CopyIntoItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>");
b.push("<SourceUrl>" + fileName + "</SourceUrl>");
b.push("<DestinationUrls>");
b.push("<string>"+destination+"</string>");
b.push("</DestinationUrls>");
b.push("<Fields>");
b.push("<FieldInformation Type='Text' DisplayName='Title' InternalName='Title' Value='"+fileName+"' />");
b.push("</Fields>");
b.push("<Stream>"+spjs.upload.data.fileDataStr+"</Stream>");
b.push("</CopyIntoItems>");
b.push("</soap:Body>");
b.push("</soap:Envelope>");
$.ajax({
url: "/_vti_bin/copy.asmx",
beforeSend: function (xhr) { xhr.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/CopyIntoItems"); },
type: "POST",
dataType: "xml",
data: b.join(""),
complete: spjs.upload.processResult,
contentType: "text/xml; charset=\"utf-8\""
});
},
"processResult":function(data, status) {
var errorCode, errorMessage;
errorCode = $(data.responseText).find("CopyResult").attr("ErrorCode");
errorMessage = $(data.responseText).find("CopyResult").attr("ErrorMessage");
if(errorCode !== "Success"){
$("#uploadFileBtn").fadeOut(400,function(){
$("#uploadError").html("Ensure the selected destination exists!<br><br>Error message: "+errorMessage).show();
setTimeout(function(){
$("#uploadError").fadeOut();
$("#fileUploadTo").val("");
$("#uploadFileBtn").fadeIn();
},10000);
});
}else{
$("#uploadFileBtn").attr("disabled","disabled").val("File successfully uploaded");
setTimeout(function(){
$("#uploadFileBtn").fadeOut(400,function(){
$(this).removeAttr("disabled").val("Submit");
})
},3000);
$("#filePicker").val("");
}
},
"getUploadDestinations":function(args){
var res, q, b;
b = ["<option value=''>Select destination</option>"];
q = "<Where><IsNotNull><FieldRef Name='ID' /></IsNotNull></Where><OrderBy><FieldRef Name='"+args.orderByField+"' /></OrderBy>";
res = spjs_QueryItems({"listName":args.listName,"listBaseUrl":args.listBaseUrl,"query":q,"viewFields":[args.friendlyNameField,args.relPathField]});
$.each(res.items,function(i,item){
b.push("<option value='"+item[args.relPathField]+"'>"+item[args.friendlyNameField]+"</option>")
});
$("#fileUploadTo").html(b.join(""));
}
};
if(window.File && window.FileReader && window.FileList && window.Blob){
document.getElementById('filePicker').addEventListener('change', spjs.upload.handleFileSelect, false);
}else{
$("#filePicker").hide().next().show();
$("#fileUploadTo").hide();
}
</script>
Post questions and feedback in the comments section below, and if you use this solution, please consider sending me a few beers by clicking the “beer button” in the top right corner of this page.
Enjoy,
Alexander