New version that supports opening the EditForm after upload. This can be controlled with a variable:
// Go to EditForm after upload var showEditFormAfterUpload = true;
Set to false to skip this feature.This new feature requires a few extra fields added to the list with the upload destination – and you must update your function call with these new fields.
If you are crating the <option> manually you must add a few extra attributes – see description in the code where you specify the <option> tags.
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", "baseUrlField":"BaseUrl", "guidField":"DocLibraryGUID", "editFormRelUrlField":"EditFormRelUrl", "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.
BaseUrl: Holds the base URL of the SITE where the document library is located. For example “/Sites/Site1/YourSiteName”
DocLibraryGUID: The GUID of the document library you are uploading into. View source and search for “ctx.listName” to find it.
EditFormRelUrl: The relative URL to the EditForm of your library. For example “/Sites/Site1/YourSiteName/Shared documents/Forms/EditForm.aspx”.
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”.
In addition to the above fields you must add the following if you like to use the new “Go to EditForm after upload” feature.
BaseUrl: Single line of text.
DocLibraryGUID: Single line of text.
EditFormRelUrl: Single line of text.
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 * https://spjsblog.com * Copyright (c) 2013-2016 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="/SPJS/DFFS/plugins/jquery.js"></script> <script type="text/javascript" src="/SPJS/DFFS/plugins/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 Ensure the list you pull the upload destination from has all the fields specified in this article: http://wp.me/p3eibN-1nr */ $(document).ready(function(){ spjs.upload.getUploadDestinations({ "listName":"UploadDestination", "listBaseUrl":"", "friendlyNameField":"Title", "relPathField":"RelPath", "baseUrlField":"BaseUrl", "guidField":"DocLibraryGUID", "editFormRelUrlField":"EditFormRelUrl", "orderByField":"Title" }); }); // Go to EditForm after upload var showEditFormAfterUpload = true; </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"> <!-- // guid attribute must be guid of destination document library // baseurl attribute must be baseURL of site wher the document library is located // editformurl attribute must be relative url to the EditForm of this library <option value="">Select destination</option> <option guid='' baseurl='/Upload' editformurl='/Upload/Forms/EditForm.aspx' value="/Upload/Folder1">Folder 1</option> <option guid='' baseurl='/Upload' editformurl='/Upload/Forms/EditForm.aspx' 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.1", "versionDate":"August 04, 2016", "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"); if(typeof showEditFormAfterUpload !== "undefined" && showEditFormAfterUpload){ var fileDir = $(data.responseText).find("CopyResult").attr("DestinationUrl"); var docLibBaseUrl = $("#fileUploadTo option:selected").attr('baseurl'); var docLibGuid = $("#fileUploadTo option:selected").attr('guid'); var docLibEditFormUrl = $("#fileUploadTo option:selected").attr('editformurl') var fileMetadata = spjs.utility.queryItems({"listName":docLibGuid,"listBaseUrl":docLibBaseUrl,"query":"<Where><Eq><FieldRef Name='EncodedAbsUrl' /><Value Type='Text'>"+fileDir+"</Value></Eq></Where>","scope":"RecursiveAll","viewFields":["FileLeafRef","FileDirRef"]}) if(fileMetadata.count > 0){ var id = fileMetadata.items[0].ID; SP.UI.ModalDialog.showModalDialog({"url":makeAbsUrl(docLibEditFormUrl+"?ID="+id+"&Mode=Upload")}); } } setTimeout(function(){ $("#uploadFileBtn").fadeOut(400,function(){ $(this).removeAttr("disabled").val("Submit"); $("#fileUploadTo").val(""); }) },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,args.baseUrlField,args.guidField,args.editFormRelUrlField]}); $.each(res.items,function(i,item){ b.push("<option editformurl='"+item.EditFormRelUrl+"' baseurl='"+item.BaseUrl+"' guid='"+item.DocLibraryGUID+"' 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