Dosya Yükleme Componenti Kullanımı / File Upload¶

Tekli ve çoklu olarak dosya yükleme işlemi GlobalTekliResimYuklemeModule ve GlobalCokluResimYuklemeModule ile kullanılabilir. Dosya yükleme işlemleri component yapılarak işlemlerin kolaylaştırılması sağlanmıştır.

Dosya yükleme işlemi CMS modulunde fazlaca yapılmıştır. Projeden örnek bakılmak istenirse burası kullanılabilir.

Dosya yükleme componentleri sayfada istenildiği kadar kullanılabilir. Her bir component ayrı olarak çalışacak ve birbirini etkilemeyecektir. Sadece bind edilen propertylerin farklı olması yeterlidir.

Tekli Dosya Yükleme¶

Tekli dosya yükleme işlemleri için GlobalTekliResimYuklemeModule kullanılır. GlobalTekliResimYuklemeModule import edilir.
modulAdi => dosyaların yükleneceği proje adı, 'Order' gibi string olarak verilebilir.
guid => Bu değere dosyalar yüklenir mutlaka verilmelidir. Bu değer kullanılarak yüklenen dosyalar sunucuda klasörlenmektedir.
yuklenenResim => two way binding yüklenen resmin path bilgisidir
itemId => item.Id bilgisi. Silme işleminde sunucudan da silinmesi için gereklidir

HTML Tararafında tanımlama işlemi

<app-global-tekli-resim-yukleme
  [itemId]="item.Id"
  [required]="false"
  [modulAdi]="projectName.Intranet"
  [(yuklenenResim)]="item.YuklenenDosyalar"
  [guid]="item.Guid"
>
</app-global-tekli-resim-yukleme>

// Sayfada 2. Bir dosya yükleme kullanılmak istenirse
<app-global-tekli-resim-yukleme
  [required]="false"
  [modulAdi]="projectName.Intranet"
  [(yuklenenResim)]="item.YuklenenDosyalarYuklenenDosyalar"
  [guid]="item.Guid"
>
</app-global-tekli-resim-yukleme>

NOT : [(yuklenenResim)] property sine setlenen değişkende yüklenen resmin path bilgisi yer almaktadır. Bu değer alınıp direk olarak kullanılabilir.

Çoklu Dosya Yükleme¶

Çoklu dosya yükleme işlemleri için GlobalCokluResimYuklemeModule kullanılır. GlobalCokluResimYuklemeModule import edilir.
modulAdi => dosyaların yükleneceği proje adı, 'Order' gibi string olarak verilebilir.
guid => Bu değere dosyalar yüklenir mutlaka verilmelidir. Bu değer kullanılarak yüklenen dosyalar sunucuda klasörlenmektedir.

=> HTML Tararafında tanımlama işlemi

<app-global-coklu-resim-yukleme
  #globalCokluResimYukleme
  [required]="true"
  [modulAdi]="projectName.Intranet"
  [guid]="this.item.Guid"
  [yuklenenResimler]="item._yuklenenResimler"
>
</app-global-coklu-resim-yukleme>

=> TS Kullanımı

// component içerisindeki dosyalara erişim ve setlemek için bu şekilde tanımlanmalıdır
@ViewChild("globalCokluResimYukleme", { static: false }) globalCokluResimYuklemeComponent: GlobalCokluResimYuklemeComponent;

// yüklenmiş olan resimleri verir.
getUploadedFileList(): string[] { 
  return this.globalCokluResimYuklemeComponent?.yuklenenResimler; 
}

// listede daha önce olan verilere veri setlemek için kullanılır. Daha önce setlenen verileri sıfırlar
setUploadedFileList() {
    var temp: any[] = [
    "private/1/intranet/c81941f0-db9c-ec67-a95d-630131dbabd6/a58d296d-cec4-4b9d-92e5-efab82112ebf.jpg",
    "private/1/intranet/c81941f0-db9c-ec67-a95d-630131dbabd6/89ae4c01-6c87-421f-b9ef-95c147bd6e75.jpg"
    ];

    this.globalCokluResimYuklemeComponent.yuklenenResimler = temp;
}