2017-12-21 54 views
3

ファイアベースのストレージにファイルをアップロードし、URLをデータベースに保存します。私はこの例で見つけた例に従った。link。私は2つの異なるTSクラスを持っています。私はpushFileToStorage機能にエラーがありました。私が送信ボタンを押したときにはTypeError: Cannot read property 'file' of undefinedと言いました。誰も私がこれを解決するのを助けることができますか?TypeError:未定義のプロパティ 'File'を読み取ることができません

//these are from two different class files 
 
//fileUpload.ts 
 
export class FileUpload { 
 
    name: string; 
 
    Url: string; 
 
    File: File; 
 

 
    constructor(prdFile: File) { 
 
    this.prdFile = prdFile; 
 
    } 
 
} 
 

 
//product.ts 
 
export class Product { 
 
    $prdKey: string; 
 
    prdName: string; 
 
    prdImage: string; 
 
    prdDescription: string; 
 
}

//product.service.ts 
 

 
basePath = '/Product'; 
 
pushFileToStorage(fileUpload: FileUpload, Product: Product, progress: { 
 
    percentage: number 
 
}) { 
 
    const storageRef = firebase.storage().ref(); 
 
    const uploadTask = storageRef.child(`${this.basePath}/${fileUpload.File.name}`).put(fileUpload.File); 
 

 
    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
 
    (snapshot) => { 
 
     // in progress 
 
     const snap = snapshot as firebase.storage.UploadTaskSnapshot 
 
     progress.percentage = Math.round((snap.bytesTransferred/snap.totalBytes) * 100) 
 
    }, 
 
    (error) => { 
 
     // fail 
 
     console.log(error) 
 
    }, 
 
    () => { 
 
     // success 
 
     this.productList.push({ 
 
     prdName: Product.prdName, 
 
     prdImage: Product.prdImage = fileUpload.Url = uploadTask.snapshot.downloadURL, 
 
     prdDescription: Product.prdDescription, 
 
     }) 
 
     this.saveFileData(fileUpload) 
 
    } 
 
); 
 
} 
 

 
private saveFileData(fileUpload: FileUpload) { 
 
    this.firebase.list(`${this.basePath}/`).push(fileUpload); 
 
}

//product.component.ts 
 
currentFileUpload: FileUpload; 
 
onSubmit(form: NgForm) { 
 

 
    this.ProductService.pushFileToStorage(this.currentFileUpload, this.ProductService.selectedProduct, this.progress); 
 
}

+0

ここで、 'product.component.ts'ファイルに' this.currentFileUpload'プロパティを設定していますか? – Saravana

+0

このような 'currentFileUpload:FileUpload;' CMIIW –

答えて

0

あなたはアーカンソーcurrentFileUpload: FileUpload;行うとそれに対して価値がない場合は、currentFileUploadのタイプのみを提供しています。値はまだundefinedになります。初期化するには、インスタンスに設定する:

currentFileUpload: FileUpload = fileUploadInstance; // Get the instance somehow 
関連する問題