Backand
ファイルのアップロードを実装しようとしましたが、次のエラーが発生します。
「次のアクション: 「ファイル」の実行に失敗しました: オブジェクト参照がオブジェクトのインスタンスに設定されていません」.
javascript
アクションがデフォルトのドキュメントからテンプレートをコピーして貼り付けるだけです。クライアント側filename
でfiledata
は正しいです。サーバー側のエラーだと思いますが、理解できません。
コントローラーコード
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-init="pets.initCtrl()">
<form role="form" name="uploadForm">
<img ng-src="" ng-show="imageUrl" />
<input id="fileInput" type="file" accept="*/*" ng-model="filename" />
<input type="button" value="x" class="delete-file" title="Delete file" ng-disabled="!imageUrl" ng-click="deleteFile()" />
</form>
</div>
// Display the image after upload
self.imageUrl = null;
// Store the file name after upload to be used for delete
self.filename = null;
// input file onchange callback
function imageChanged(fileInput) {
//read file content
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
upload(file.name, e.currentTarget.result).then(function(res) {
self.imageUrl = res.data.url;
self.filename = file.name;
}, function(err){
alert(err.data);
});
};
reader.readAsDataURL(file);
};
// register to change event on input file
function initUpload() {
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
imageChanged(fileInput);
});
}
// call to Backand action with the file name and file data
function upload(filename, filedata) {
// By calling the files action with POST method in will perform
// an upload of the file into Backand Storage
return $http({
method: 'POST',
url : 'https://api.backand.com/1/objects/action/fotos',
params:{
name: 'files'
},
headers: {
'Content-Type': 'application/json'
},
// you need to provide the file name and the file data
data: {
filename: filename,
filedata: filedata.substr(filedata.indexOf(',') + 1, filedata.length) //need to remove the file prefix type
}
});
};
self.deleteFile = function(){
if (!self.filename){
alert('Please choose a file');
return;
}
// By calling the files action with DELETE method in will perform
// a deletion of the file from Backand Storage
$http({
method: 'DELETE',
url : baseActionUrl + objectName,
params:{
"name": filesActionName
},
headers: {
'Content-Type': 'application/json'
},
// you need to provide the file name
data: {
"filename": self.filename
}
}).then(function(){
// Reset the form
self.imageUrl = null;
document.getElementById('fileInput').value = "";
});
}
self.initCtrl = function() {
initUpload();
}