Primeng File Uploader to Firebase

Question

私は角度2のアプリで正しくprimengを設定することができました。私は、この制御http://www.primefaces.org/primeng/#/fileuploadを使用していると私は、このコードでは、URLに入れてのか分からない：

<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple" accept="image/*" maxFileSize="1000000"></p-fileUpload> 

私はfirebaseストレージを使用していると私はそのためのURLのか分かりません。誰でも私を助けたり、正しい方向に向けることができます。

私はすでに、primengの​​コントロールではなく、入力タグだけでさまざまなアプローチを使用してイメージをfirebaseストレージにアップロードできます。ここに私のfirebaseコードがあり、動作しています。

var storageRef = firebase.storage().ref().child('images/myImage.png'); 
storageRef.put(this.theImageFile).then((res)=>{ 
console.log("uploaded!"); 
//do something else here. 
} 

は私がfirebaseにアップロードしていたときので、firebase.storage（）のp-するFileUpload内部の「URL」に入れて私のためにすべての作業を行うにはどのような見当がつかない。 私はprimengファイルアップローダーを使いたかったので、動かすことができません。

Answer 1

Firebaseについてはわかりませんが、指定されたURLがアップロードを処理することになります。つまり、アップロードしたファイルで何をしたいのですか。私はWeb APIを使用しています。現在、私の開発者URLはhttp://localhost:51200/api/uploadです。

    <p-fileUpload name="myfile[]" url="http://localhost:51200/api/upload" multiple="multiple" 
            maxFileSize="1000000" (onUpload)="onUpload($event)" (onBeforeUpload)="onBeforeUpload($event)"> 
        </p-fileUpload> 

私は、次のAPIコントローラメソッドを使用してWeb APIでこれを処理しています：

[HttpPost, Route("api/upload")] 
    public async Task<IHttpActionResult> Upload() 
    { 
     //Put code here that's going to save the file and record the details in the database. 
    } 

Answer 2

P-uploadFileは、特にURLの一部トリッキーです。私は自分のアプリでpUploadを使用しましたが、ファイルセレクタとしてのみ使用しました。私.TSで今

<p-fileUpload name="myClientFile[]" (onSelect)="onSelect($event)" 
    multiple="multiple" accept=".json" maxFileSize="1000000" 
    [showUploadButton]="false" (onClear)="onCancelClick()"> 
<ng-template *ngIf="hasFile" pTemplate type="content"> 
    <ul> 
     <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li> 
    </ul> 
</ng-template>   

、私はpFileUploadが付属していますにonSelect（イベント）機能で自分のAPI（あなたのケースでFirebase）にアップロードする機能を発射。

onSelect(event) { 
//Execute the actual UPDATES here. 
    for(let file of event.files) { 
    this.uploadedFiles.push(file); 
    } 
    this.hasFile = true; 

} 

少し余分な、これは複数のファイル

をアップロードするときngTemplateに対処する必要がある

onCancelClick() { 
this.uploadedFiles.splice(0, this.uploadedFiles.length); 
this.hasFile = false;} 

PrimeNGバージョン：4.1.3