CODEWITHSUNDEEP
angularfirebasefirebase-storageprimeng
brijmcq
brijmcq

Reputation: 3418

Primeng File Uploader to Firebase

I was able to setup primeng correctly in my angular 2 app. I am using this control http://www.primefaces.org/primeng/#/fileupload and I don't know what to put in the url in this code :

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

I am using firebase storage and I don't know what's the url for that. Can anyone help me or just point me to the right direction.

Note that I can already upload images to my firebase storage using different approach with just an input tag and not the primeng controls. Here's my firebase code and it is working.

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

I have no idea what to put in the "url" inside the p-fileUpload because when I'm uploading to firebase, firebase.storage() do all the work for me. I just wanted to use the primeng file uploader and I can't seem to get it working.

Upvotes: 1

Views: 1465

Answers (3)

Jamal Eddine Naamani
Jamal Eddine Naamani

Reputation: 456

I use prime Fileupload in my react app with firebase,

const handleFireBaseUpload = (e) => {
// for one file
 const myFile = e.files[0]
 ...
 const uploadTask = // firebase upload task here with e.g /images/${myFile.name}`
// and if you want to clear the input after ulpoad done use
e.options.clear()
}


<FileUpload auto mode='basic'  customUpload uploadHandler={handleFireBaseUpload}/>

Upvotes: 0

Chau Tran
Chau Tran

Reputation: 5088

p-uploadFile is tricky, especially the URL part. I used pUpload in my app but only as a file selector. 

<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>

Now in my .ts, I fire a function to upload to my API (Firebase in your case) with onSelect(event) function that comes with pFileUpload.

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

}

Little extra, this has to deal with the ngTemplate when you upload multiple files

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

PrimeNG version: 4.1.3

Upvotes: 1

thegunner
thegunner

Reputation: 7163

I'm not sure about Firebase, but the URL specified is going to handle the upload i.e. what you want to do with the uploaded file(s). I'm using Web API and currently, my dev URL is 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>

I'm handling this in Web API with the following api controller method:

    [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.
    }

Upvotes: 0

Related Questions