14th June 2020 ionicframework 1

IONIC Upload File to Server – Part 1

Halo semuanya!!….kali ini saya mau berbagi tutorial bagaimana cara upload file ke server. di tutorial ini saya menggunakan framework Yii2 pada backendnya. Jika ada yang belum tau apa itu framework Yii2 kalian bisa langsung ke websitenya https://www.yiiframework.com/.

Pertama kita buat sebuah project ionic. saya asumsikan kalian sudah install IONIC CLI nya. yang belum tau bisa baca di here . oke! sekarang buka Command promp kalian (CMD) dan masuk ke folder yang akan di-install project ionicnya. disini saya beri nama projectnya ionictutorialapp.

ionic start ionictutorialapp --type=angular

disini saya menggunakan angular sebagai codebase kita.

Pilih template yang sudah disiapkan oleh IONIC TEAM. disini saya menggunakan sidemenu lalu tekan Y pada CMD. kalian bebebas menggunakan yang mana aja asal ngerti ngotak-atiknya ;). kemudian tunggu sampai instalasi selesai.

cd /ionictutorialapp

jika sudah selesai, kita buka project nya. disini saya menggunakan VS CODE. bagi yang belum punya bisa install disini.

Tampilannya akan seperti ini.

Oke sekarang kita Run IONICnya. buka CMD kalian dan masuk ke dalam folder /ionictutorialapp kemudian ketik perintah ionic serve.

/ionictutorialapp/ionic serve

Pada IONIC versi terbaru, secara otomatis browser akan membuka aplikasi kita. jika tidak, kalian bisa buka web browser kalian dan masukan URL http://localhost:8100.

Tampilan akan seperti ini.

Sekarang kita akan membuat halaman untuk upload file. kalian bisa menggunakan terminal pada Editor VS CODE.

Ketik ionic generate page pages/uploadfile

Klik file uploadfile.page.html, kemudian kita buat button untuk upload filenya.

Tambah Button upload.

Buka browser kalian http://localhost:8100/uploadfile dan….tarrraaa! 🙂

Button Upload File

Kemudian kita buat function uploadnya. buka file uploadfile.page.ts dan edit seperti ini.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpEventType, HttpResponse } from '@angular/common/http';

@Component({
  selector: 'app-uploadfile',
  templateUrl: './uploadfile.page.html',
  styleUrls: ['./uploadfile.page.scss'],
})
export class UploadfilePage implements OnInit {

  // declare
  fileName: string;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
  }

  // on Change function
  upload(files: File[]) {
    this.fileName = files[0].name;
    this.uploadFiles(files);
  }

  // upload function
  uploadFiles(files: File[]) {
    const formData = new FormData();
    Array.from(files).forEach(f => {
      formData.append('file', f);
    });
    // kalian gunakan url kalian sendiri ya :)
    this.http.post('https://bontet.com/file/upload/uploadvideo', formData, {
      reportProgress: true,
      observe: 'events'
    })
      .subscribe(async event => {
        if (event instanceof HttpResponse) {
          alert('Successfully!');
        }
      });
  }

}

Kita import module HttpClientModule pada file app.module.ts.

import { HttpClientModule } from '@angular/common/http'

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http'; // tambahkan

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule //tambahkan ini
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Kemudian kita akan membuat file upload pada backend kita (Yii2 framework). Disini saya membuat UploadController.php.

public function actionUploadvideo()
    {
        $dir =  "D:/dir/video";
        $target_path = $dir;
        $target_path = $target_path . basename($_FILES["file"["name"]);
        $tmp_name = $_FILES["file"]["tmp_name"];
        move_uploaded_file($_FILES["file"]["tmp_name"], $target_path);
    }

Mudahkan!…Buka browser kalian ketik http://localhost:8100/uploadfile. lalu coba upload filenya. Sekian tutorial kali ini. Jika ada pertanyaan atau yang belum paham bisa komeng..Cmiwww

Happy Coding…!!

Part 2: Upload File With Progress Bar



About the Author

bontet: