How can I use dropzone.js to upload files to a SharePoint file Library using SPServices?

Question

I need to add drag and drop functionality to a SharePoint application for uploading files.

I'd like to use dropzone.js as it already has much of the functionality needed.

Everything must be handled in the browser, using SharePoint Services SOAP AJAX library.

Dropping files should automatically load them into a SharePoint Document Library.

Answer 1

Using Dropzone.js with SharePoint Services to upload files to a SharePoint Library.

This should work with IE 10+

First, the HTML:

 <!doctype html> <html> <head> <title>SharePoint Services w/ DropZone.js</title> <link rel="stylesheet" type="text/css" href="/sites/test_acme_development/acmeApps/Lib/dropzone/dropzone.css"> </head> <body> <div id="dz" class='dropzone'></div> <div id="message"></div> <script type="text/javascript" src="/sites/test_acme_development/acmeApps/Lib/jquery1.11.3/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="/sites/test_acme_development/acmeApps/Lib/SPServices2014.02/jquery.SPServices-2014.02.min.js"></script> <script type="text/javascript" src="/sites/test_acme_development/acmeApps/Lib/dropzone/dropzone.js"></script> <script type="text/javascript"> Dropzone.autoDiscover = false; /* Prevent Dropzone from doing auto stuff */ </script> <script type="text/javascript" src="/sites/test_acme_development/acmeApps/App/uploadApp/js/upload.js"></script> </body> </html>

Notice this bit right after including dropzone.js:

Dropzone.autoDiscover = false;

It seems to work best when immediately stipulated like this.

The JavaScript:

 (function (app, $, undefined) { }(window.app = window.app || {}, jQuery)); // setup app namespace window.onload = function(e) { app.init(e); }; app.init = function(e) { app.siteURL = 'https://portal.acme.com'; app.clientPath = '/sites/test_acme_development/'; app.fileLib = 'MySPLibrary'; app.loadDropzone(); }; app.loadDropzone = function() { var dz = new Dropzone(document.getElementById("dz"), { url: window.location.href, autoProcessQueue: true, uploadMultiple: true, dictDefaultMessage: 'Drop files here or Click to select...' }); dz.on("sendingmultiple", function(files, xhr, formData) { for (var i = 0; i < files.length; i++) { app.singleUpload(files[i], function() { /* upload done */ }); } }); dz.on("queuecomplete", function () { $('#message').html('Waiting for SharePoint to digest your files...').css('color', 'darkgreen'); setTimeout(function () { $('#message').html('Done Loading Files into SharePoint...').css('color', 'darkgreen'); /* Continue doing stuff */ }, 8500); }); }; app.singleUpload = function (readFile, cb) { var reader = new FileReader(); var currFile = readFile; reader.readAsArrayBuffer(currFile); reader.onload = (function (theFile) { // (IIFE) Immediately-Invoked Function Expression return function (e) { var fileStream = app.aryBufferToBase64(e.target.result); var destUrl = ['{0}{1}{2}/{3}'.f(app.siteURL, app.clientPath, app.fileLib, theFile.name)]; $().SPServices({ operation: "CopyIntoItems", SourceUrl: null, DestinationUrls: destUrl, Stream: fileStream, Fields: [], completefunc: function (xData, Status) { var err = $(xData.responseXML).find("CopyResult").first().attr("ErrorCode"); if (err && err === "Success") { cb(); } else { $('#message').html('Error: SharePoint Services failed during "singleUpload" process.').css('color', 'darkred'); } } }); }; })(currFile); }; app.aryBufferToBase64 = function(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 window.btoa(binary); }; String.prototype.f = function () { var args = arguments; return this.replace(/\\{(\\d+)\\}/g, function (m, n) { return args[n]; }); }; // like .net's string.format() function

How can I use dropzone.js to upload files to a SharePoint file Library using SPServices?

Question

1 answers

solution1
1 2017-05-30 20:48:34

How can I use dropzone.js to upload files to a SharePoint file Library using SPServices?

Question

1 answers

solution1 1 2017-05-30 20:48:34

solution1
1 2017-05-30 20:48:34