Geek Answers Handbook

Download BLOB / ArrayBuffer with Dropzone.js

Using the SharePoint 2013 REST API, I successfully upload files, such as .docxor .png, to a folder inside the document library using Dropzone.js. I have a function where I initialize my dropzone as follows:

myDropzone = new Dropzone("#dropzone");

myDropzone.on("complete", function (file) {
    myDropzone.removeFile(file);
});

myDropzone.options.autoProcessQueue = false;

myDropzone.on("addedfile", function (file) {
    $('.dz-message').hide();
    myDropzone.options.url = String.format(
    "{0}/{1}/_api/web/getfolderbyserverrelativeurl('{2}')/files" +
    "/add(overwrite=true, url='{3}')",
    _spPageContextInfo.siteAbsoluteUrl, _spPageContextInfo.webServerRelativeUrl, folder.d.ServerRelativeUrl, file.name);
});

myDropzone.options.previewTemplate = $('#preview-template').html();

myDropzone.on('sending', function (file, xhr, fd) {
    xhr.setRequestHeader('X-RequestDigest', $('#__REQUESTDIGEST').val());
});

The problem I ran into is that almost all files (only PDFs are not shown) are displayed as corrupted files on loading. This is most likely due to the fact that SharePoint requires the upload file to be sent as an ArrayBuffer . MSDN source

AJAX POST , SharePoint . , Dropzone.js, .

uploadFiles() dropzone.js, . , accept options, .

- , , , -, , "", .

- Base64.

1 - XHR ArrayBuffer

2 - Base64 Dropzone.js

, - , , arraybuffer, POST Dropzone.js?

+4
2

, , , .

dropzone.js , $.ajax().

, HTML5 FileReader

var reader = new FileReader();
reader.onloadend = function(e) {
    resolve(e.target.result);
};
reader.onerror = function(e) {
    reject(e.target.error);
};
reader.readAsArrayBuffer(file);

data ajax.

+3

, Dropzone.

SharePoint/Office 365, Dropzone.prototype.submitRequest(), , getArrayBuffer, ArrayBuffer API FileReader, Dropzone XMLHttpRequest.

Dropzone API.

, .

Dropzone.prototype.submitRequest = function (xhr, formData, files) {
    getArrayBuffer(files[0]).then(function (buffer) {
        return xhr.send(buffer);
    });
};

getArrayBuffer

function getArrayBuffer(file) {
    return new Promise(function (resolve, reject) {
        var reader = new FileReader();

        reader.onloadend = function (e) {
            resolve(e.target.result);
        };
        reader.onerror = function (e) {
            reject(e.target.error);
        };
        reader.readAsArrayBuffer(file);
    });
}

, SharePoint, "Dropbox" .

0

More articles:


All Articles