SharePoint 2013 HTML5 Javascript Upload to Document library with CSOM/JavaScript

Question

Is it possible to develop HTML5/JavaScript/Jquery/REST code to upload a file to SPO 2013 Document Library?

If so, is it possible to do some validation, error handling and business rules? For example:

• Handle errors
• Restrict file type
• Rename the file during upload to a unique sequence
• Set Doc library content type metadata columns

If so, is it possible to do all of this with NAPA?

I found this:

http://blogs.msdn.com/b/uksharepoint/archive/2013/04/20/uploading-files-using-the-rest-api-and-client-side-techniques.aspx?wa=wsignin1.0&CommentPosted=true#commentmessage

Answer 1

Yes, I'm actually doing that right now (uploading images to a document library - and changing property values of that document once its been successfully uploaded) I found this link very useful:

http://technet.microsoft.com/en-us/dn769086(v=office.12)

I had an issue with the "fileCollectionEndPoint" and the "serverRelativeUrlToFolder" variables, I changed the value to:

var serverRelativeUrlToFolder = 'YOUR_DOCUMENT_LIBRARY';

var fileCollectionEndPoint = String.format("../../_api/web/getfolderbyserverrelativeurl('{0}')/files/add(overwrite=true, url='{1}')?@target='{2}'", serverRelativeUrlToFolder, fileName, _hostweburl);

That's just what worked for me - YMMV, the TechNet code may work OOB for you.

---

Handling the restriction of filetypes... you can use a client side method of checking the value of the file input element and checking against an array of extension that are acceptable... Here is a fiddle:

http://jsfiddle.net/madkidflash/vah3kc0p/