ファイルをアップロードするために、SharePointアプリケーションにドラッグアンドドロップ機能を追加する必要があります。dropzone.jsを使用してファイルをSharePointファイルにアップロードするにはどうすればよいですか？
dropzone.jsには既に必要な機能が多く含まれています。
SOAP AJAXライブラリSharePoint Servicesを使用して、すべてブラウザで処理する必要があります。
ファイルをドロップすると、ファイルが自動的にSharePointドキュメントライブラリに読み込まれます。
SharePoint ServicesでDropzone.jsを使用してSharePointライブラリにファイルをアップロードする。
これはIE 10+
まず、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>お知らせこのビット右dropzone.js含む後：
Dropzone.autoDiscover = false;
このようにすぐに規定されているとうまくいくようです。
はJavaScript：
(function (app, $, undefined) { }(window.app = window.app || {}, jQuery)); // setup app namespace
window.onload = function(e) { app.init(e); };
app.init = function(e) {
\t
app.siteURL = 'https://portal.acme.com';
app.clientPath = '/sites/test_acme_development/';
app.fileLib = 'MySPLibrary';
app.loadDropzone();
\t
};
app.loadDropzone = function() {
\t
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 */ \t });
}
});
\t
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