Я могу загрузить файл изображения в SharePoint, но он не распознается как изображение. Я попытался использовать следующую директиву, основанную на исследовании, согласно которой изображения должны быть закодированы в base64 при загрузке в SharePoint, но он все равно загружает файл, который выглядит поврежденным: https://github.com/adonespitogo/angular-base64-upload
Я рад использовать эту директиву, но не знаю, как передать то, что мне нужно, в API REST SharePoint.
Исходная итерация, которую я использовал, не использует эту директиву, но скорее попытка прямой загрузки.
Мне нужно достичь:
1) Успешно загрузите изображение без его "искажения", и для этого требуется кодировка base64/как это сделать?
2) Загружайте изображения по их имени (а не "test.jpg" ) и располагайте некоторыми метаданными (например, загружайте изображение с названием или названием отдела, к которому оно принадлежит)
Итерация 1: Нет директивы Вот мой HTML (обратите внимание, что контроллер привязан к странице через ng-route):
<div class="col-md-12">
<form>
<input type="file" onchange="angular.element(this).scope().filesChanged(this)" data-ng-model="files" multiple>
<button data-ng-click="upload()">Submit</button>
<li data-ng-repeat="file in files">{{file.name}}</li>
</form>
</div>
Вот мой контроллер:
$scope.filesChanged = function (elm) {
$scope.files = elm.files
$scope.$apply();
}
$scope.upload = function () {
var fd = new FormData()
angular.forEach($scope.files,function(file){
fd.append('file',file)
})
$http.post("/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='test.jpg',overwrite='true')", fd,
{
transformRequest: angular.identity,
headers: {
'Content-Type':undefined, 'X-RequestDigest': $("#__REQUESTDIGEST").val()}
}).success(function (d) {
console.log(d);
});
}
ОБНОВЛЕНИЕ: Я полагаю, что проблема изолирована от моей почты $http до SharePoint. Используя указанную выше директиву, я могу выводить base64, но я не уверен, как передать это в мой пост для загрузки.
Итерация 2: Использование директивы Вот мой текущий HTML, используя директиву https://github.com/adonespitogo/angular-base64-upload:
<form>
<input type="file" data-ng-model="files" base-sixty-four-input>
<button data-ng-click="upload()">Submit</button>
</form>
Мой контроллер, который отправляет поврежденные файлы изображений в SharePoint:
$scope.upload = function () {
console.log($scope.files); // Output result from upload directive
$http({
method: 'POST',
url: "/sites/ens/_api/web/lists/getByTitle('Report Images')/RootFolder/Files/add(url='" + $scope.files.filename +"',overwrite='true')",
headers: {
'Content-Type': false ,
'X-RequestDigest': $("#__REQUESTDIGEST").val()
},
data: $scope.files,
}).success(function (data) {
console.log(data);
});
}
Обновление 2: Использование SP.RequestExecutor следующим образом создает тот же результат. Загрузка файла, но не рендеринг. Это происходит для изображений и документов:
Итерация 3: Использование директивы и SP.RequestExecutor
$scope.upload = function () {
var dataURL = 'data:' + $scope.files.filetype + ';' + 'base64,' + $scope.files.base64;
var createitem = new SP.RequestExecutor("/sites/asite");
createitem.executeAsync({
url: "/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='" + $scope.files.filename + "')",
method: "POST",
binaryStringRequestBody: true,
body: dataURL,
success: fsucc,
error: ferr,
state: "Update"
});
function fsucc(data) {
alert('success');
}
function ferr(data) {
alert('error\n\n' + data.statusText + "\n\n" + data.responseText);
}
}
Обновление 3: Используя .ajax следующим образом, он успешно разместит изображение, но при использовании $http он искажает изображение.
Итерация 3: Использование .Ajax(работает)
function uploadFileSync(spWebUrl , library, filename, file)
{
var reader = new FileReader();
reader.onloadend = function(evt)
{
if (evt.target.readyState == FileReader.DONE)
{
var buffer = evt.target.result;
var completeUrl = spWebUrl
+ "/_api/web/lists/getByTitle('"+ library +"')"
+ "/RootFolder/Files/add(url='"+ filename +"',overwrite='true')?"
+ "@TargetLibrary='"+library+"'&@TargetFileName='"+ filename +"'";
$.ajax({
url: completeUrl,
type: "POST",
data: buffer,
async: false,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-length": buffer.byteLength
},
complete: function (data) {
//uploaded pic url
console.log(data.responseJSON.d.ServerRelativeUrl);
$route.reload();
},
error: function (err) {
alert('failed');
}
});
}
};
reader.readAsArrayBuffer(file);
}
Итерация 4: Использование $http (искажает изображение)
function uploadFileSync(spWebUrl , library, filename, file)
{
var reader = new FileReader();
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
var buffer = evt.target.result;
var completeUrl = spWebUrl
+ "/_api/web/lists/getByTitle('" + library + "')"
+ "/RootFolder/Files/add(url='" + filename + "',overwrite='true')?"
+ "@TargetLibrary='" + library + "'&@TargetFileName='" + filename + "'";
$http({
url: completeUrl,
method: "POST",
data: buffer,
processData: false,
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-length": buffer.byteLength
}
}).success(function (data) {
//uploaded pic url
//console.log(data.responseJSON.d.ServerRelativeUrl);
$route.reload();
}).error(function (err) {
alert(err);
});
}
};
reader.readAsArrayBuffer(file);
}