AngularJS Dosya Yükleme( PHP )

Bu yazıda AngularJS file upload işlemi için github üzerinde dağıtılan bir modülün basit kullanımını yazacağım. Aşağıdaki kodların yazılmış halini sayfanın sonunda indirebilirsiniz. Dosya yükleme işlemi için github üzerinde kullandığım eklentinin sitesine girip daha detaylı kullanımını inceleyebilirsiniz. https://github.com/nervgh/angular-file-upload/

Başka bir yazıda sadece javascript ve angularjs kullanarak farklı bir uploader yapacağım.(Eklentisi varken ayrı bir yükleyici yapmak çok gerekli mi tartışılacak bir konu 🙂 )

Eklentili AngularJS File Upload

Eklentisiz AngularJS File Upload

Eklentili Dosya Yükleyici

1.Adım : Github üzerinden yada uygulamanın bitmiş halinden script dosyalarını HTML sayfamıza dahil ediyoruz. Sayfanın daha düzgün görünmesi için bootstrap css kütüphanesini projeye cdn üzerinden dahil edilmiştir. controller.js dosyasını da oluşturuyoruz.


<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" >
<link rel="stylesheet" href="tasarim.css">
<script src="https://code.angularjs.org/1.2.0/angular.min.js"></script>
<script src="dist/angular-file-upload.js"></script>

2.Adım: controller.js dosyalarını aşağıdaki şekilde oluşturuyoruz.


'use strict';


angular.module('app', ['angularFileUpload'])
.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});

// FILTERS

// a sync filter
uploader.filters.push({
name: 'syncFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
console.log('syncFilter');
return this.queue.length < 10;
}
});


// CALLBACKS

uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};

console.info('uploader', uploader);
}]);

'use strict';

angular.module('app', ['angularFileUpload'])

.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {

var uploader = $scope.uploader = new FileUploader({

url: 'upload.php'

});

// FILTERS

// a sync filter

uploader.filters.push({

name: 'syncFilter',

fn: function(item /*{File|FileLikeObject}*/, options) {

console.log('syncFilter');

return this.queue.length < 10;

}

});

// CALLBACKS

uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {

console.info('onWhenAddingFileFailed', item, filter, options);

};

uploader.onAfterAddingFile = function(fileItem) {

console.info('onAfterAddingFile', fileItem);

};

uploader.onAfterAddingAll = function(addedFileItems) {

console.info('onAfterAddingAll', addedFileItems);

};

uploader.onBeforeUploadItem = function(item) {

console.info('onBeforeUploadItem', item);

};

uploader.onProgressItem = function(fileItem, progress) {

console.info('onProgressItem', fileItem, progress);

};

uploader.onProgressAll = function(progress) {

console.info('onProgressAll', progress);

};

uploader.onSuccessItem = function(fileItem, response, status, headers) {

console.info('onSuccessItem', fileItem, response, status, headers);

};

uploader.onErrorItem = function(fileItem, response, status, headers) {

console.info('onErrorItem', fileItem, response, status, headers);

};

uploader.onCancelItem = function(fileItem, response, status, headers) {

console.info('onCancelItem', fileItem, response, status, headers);

};

uploader.onCompleteItem = function(fileItem, response, status, headers) {

console.info('onCompleteItem', fileItem, response, status, headers);

};

uploader.onCompleteAll = function() {

console.info('onCompleteAll');

};

console.info('uploader', uploader);

}]);

3. Adım: controller içinde dosya yükleme için kullanılacak PHP dosyasını aşağıdaki şekilde oluşturuyoruz.( upload.php )

Upload.php dosyasının bulunduğu dizin içinde dosyalar klasörüne yükleme yapılacaktır. Bu nedenle dosyalar klasörünü de oluşturmak gerekiyor.


<?php

if ( !empty( $_FILES ) ) {

$tempPath = $_FILES[ 'file' ][ 'tmp_name' ];
$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . 'dosyalar' . DIRECTORY_SEPARATOR . $_FILES[ 'file' ][ 'name' ];

move_uploaded_file( $tempPath, $uploadPath );

$answer = array( 'answer' => 'Yükleme Tamamlandı' );
$json = json_encode( $answer );

echo $json;

} else {

echo 'Dosya Yok';

}

<?php

if ( !empty( $_FILES ) ) {

$tempPath = $_FILES[ 'file' ][ 'tmp_name' ];

$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . 'dosyalar' . DIRECTORY_SEPARATOR . $_FILES[ 'file' ][ 'name' ];

move_uploaded_file( $tempPath, $uploadPath );

$answer = array( 'answer' => 'Yükleme Tamamlandı' );

$json = json_encode( $answer );

echo $json;

} else {

echo 'Dosya Yok';

}

4.Adım: HTML dosyasının body kısmı. container class içinde kullanılan nv-file-drop özelliği ile bulunan gri alan üzerinde dosyalar bırakıldığında dosya yükleyici için dosyaları otomatik olarak bağlamaktadır.


<body id="ng-app" ng-app="app">

<div style="background:#dedede" class="container" ng-controller="AppController" nv-file-drop="" uploader="uploader">
<div class="col-md-3">

<h3>Dosyaları Seç</h3>

<div ng-show="uploader.isHTML5">
<div class="well dosya-alan" nv-file-over="" uploader="uploader">
Dosyaları Buraya Sürükleyin
</div>
</div>

Çoklu Dosya Seçme
<input type="file" nv-file-select="" uploader="uploader" multiple /><br>
</div>
<div class="col-md-9" style="margin-bottom: 40px">

<h3>Yüklenecek Dosyalar</h3>
<p>Dosya Sayısı: {{ uploader.queue.length }}</p>

<table class="table">
<thead>
<tr>
<th width="50%">Dosya Adı</th>
<th ng-show="uploader.isHTML5">Dosya Boyutu</th>
<th ng-show="uploader.isHTML5">Süreç</th>
<th>Durum</th>
<th>İşlem</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td><strong>{{ item.file.name }}</strong></td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Yükle
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> İptal
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Vazgeç
</button>
</td>
</tr>
</tbody>
</table>

<div>
<div>
Yükleme Durumu:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Hepsini Yükle
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Hepsini İptal Et
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Hepsini Sil
</button>
</div>

</div>
</div>


</body>

<h3>Dosyaları Seç</h3>

Dosyaları Buraya Sürükleyin

</div>

Çoklu Dosya Seçme

</div>

<h3>Yüklenecek Dosyalar</h3>

<p>Dosya Sayısı: {{ uploader.queue.length }}</p>

<thead>

<tr>

<th width="50%">Dosya Adı</th>

<th ng-show="uploader.isHTML5">Dosya Boyutu</th>

<th ng-show="uploader.isHTML5">Süreç</th>

<th>Durum</th>

<th>İşlem</th>

</tr>

</thead>

<tbody>

<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>

</div>

</td>

</td>

<span class="glyphicon glyphicon-upload"></span> Yükle

</button>

<span class="glyphicon glyphicon-ban-circle"></span> İptal

</button>

<span class="glyphicon glyphicon-trash"></span> Vazgeç

</button>

</td>

</tr>

</tbody>

</table>

<div>

Yükleme Durumu:

</div>

<span class="glyphicon glyphicon-upload"></span> Hepsini Yükle

</button>

<span class="glyphicon glyphicon-ban-circle"></span> Hepsini İptal Et

</button>

<span class="glyphicon glyphicon-trash"></span> Hepsini Sil

</button>

</div>

</body>

En basit hali ile angularjs file uplad örneğini indirip kullanbilirsiniz.

Eklentisiz Dosya Yükleyici

İnternette bulduğum tekli dosya yükleme örneğini çoklu olarak düzenleyip tekrar attım. Bulduğum kaynaktaki örnek çalışmamasına rağmen kodların çoğu yazıldığı için referans olarak sayfanın altında belirttim.

1.Adım: HTML Dosyasını Oluşturulması


<body ng-app="myApp">

<div ng-controller = "myCtrl">
<input type ="file" file-model="dosya" multiple /><!-- çoklu dosya yükleme -->
<button ng-click = "dosyaYukleyici()">Dosya Yükle</button>
</div>
</body>

<button ng-click = "dosyaYukleyici()">Dosya Yükle</button>

</div>

</body>

2.Adım: Angularjs kütüphanesini dahil etme, diretifleri ve kontroller hazırlama


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);

myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;

element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files); 
});
});
}
};
}]);

myApp.service('dosyaYukle', ['$http', function ($http) {
this.uploadFileToUrl = function(dosyalar, yuklemeAdres){

/*döngü ile seçilen dosyaları yukleme klasörüne tek tek yüklüyoruz.*/
for (var i in dosyalar) 
{
var fdata = new FormData();
fdata.append("file", dosyalar[i]); /*$_FILES['file'] olarak çağrılacak kısım*/
console.log(dosyalar[i]);

$http.post(yuklemeAdres, fdata, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})

.success(function(data){
console.log(data);
})

.error(function(data){
console.log(data);
}); 
} 
}
}]);
//upload.php dosyasını oluşturmayı unutmayın.
myApp.controller('myCtrl', ['$scope', 'dosyaYukle', function($scope, fileUpload){
$scope.dosyaYukleyici = function(){
var file = $scope.dosya;

var yuklemeAdres = "upload.php";
fileUpload.uploadFileToUrl(file, yuklemeAdres);
};
}]);

</script>

var myApp = angular.module('myApp', []);

myApp.directive('fileModel', ['$parse', function ($parse) {

return {

restrict: 'A',

link: function(scope, element, attrs) {

var model = $parse(attrs.fileModel);

var modelSetter = model.assign;

element.bind('change', function(){

scope.$apply(function(){

modelSetter(scope, element[0].files);

});

}

};

}]);

myApp.service('dosyaYukle', ['$http', function ($http) {

this.uploadFileToUrl = function(dosyalar, yuklemeAdres){

/*döngü ile seçilen dosyaları yukleme klasörüne tek tek yüklüyoruz.*/

for (var i in dosyalar)

{

var fdata = new FormData();

fdata.append("file", dosyalar[i]); /*$_FILES['file'] olarak çağrılacak kısım*/

console.log(dosyalar[i]);

$http.post(yuklemeAdres, fdata, {

transformRequest: angular.identity,

headers: {'Content-Type': undefined}

})

.success(function(data){

console.log(data);

})

.error(function(data){

console.log(data);

});

}

}]);

//upload.php dosyasını oluşturmayı unutmayın.

myApp.controller('myCtrl', ['$scope', 'dosyaYukle', function($scope, fileUpload){

$scope.dosyaYukleyici = function(){

var file = $scope.dosya;

var yuklemeAdres = "upload.php";

fileUpload.uploadFileToUrl(file, yuklemeAdres);

};

}]);

</script>

3.Adım: Dosya Yükleyicisi olan upload.php sayfasını oluşturma. UNUTMAYIN dosyalar klasörünün upload.php dosyası ile aynı yerde olması gerekiyor.


<?php

if ( !empty( $_FILES ) ) {

$tempPath = $_FILES[ 'file' ][ 'tmp_name' ];
$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . 'dosyalar' . DIRECTORY_SEPARATOR . $_FILES[ 'file' ][ 'name' ];

move_uploaded_file( $tempPath, $uploadPath );

$answer = array( 'answer' => 'Yükleme Tamamlandı' );
$json = json_encode( $answer );

echo $json;

} else {

echo 'Dosya Seçilmedi';

}

<?php

if ( !empty( $_FILES ) ) {

$tempPath = $_FILES[ 'file' ][ 'tmp_name' ];

$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . 'dosyalar' . DIRECTORY_SEPARATOR . $_FILES[ 'file' ][ 'name' ];

move_uploaded_file( $tempPath, $uploadPath );

$answer = array( 'answer' => 'Yükleme Tamamlandı' );

$json = json_encode( $answer );

echo $json;

} else {

echo 'Dosya Seçilmedi';

}

KAYNAK

https://www.tutorialspoint.com/angularjs/angularjs_upload_file.htm

AngularJS Dosya Yükleme( PHP )

Eklentili Dosya Yükleyici

Eklentisiz Dosya Yükleyici

İlgili

1 Yorum

AngularJS Dersleri – Yazılım Bilişim Programlama için bir cevap yazın X

Eklentili Dosya Yükleyici

Eklentisiz Dosya Yükleyici

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

AngularJS Dersleri – Yazılım Bilişim Programlama için bir cevap yazın X