Making a Website Using Ionic & Firebase Hosting

How could I upload images with this website ?! @trevaun23 @saimon

I have a problem. The command "ionic cordova build android didn’t worked correctly. What can i do…

@trevaun23 @saimon @ihadeed
I’m building a website with ionic . I push data with navCtrl to another page and every thing is working as expected . I get the params form constructor . the problem is when I refresh this page with browser not from ionic app , I get error ‘undefined id for my collection in database’ that’s a result of no params any more . how could I solve this problem ? thanks in advance :slight_smile:

Hey! Apologies for my late reply but I hope this code answers your question:

Since I cant use the Ionic Plugins for uploading images, I use this:

In CMD:
npm install ng2-file-input

in page.module.ts
import { Ng2FileInputModule } from 'ng2-file-input';
in page.html

 <ion-item  >
      <ng2-file-input   [browse-text]="'Drop your files here'" [drop-text]="'📁 <br><br>'" [remove-text]="'Off you go'" [id]="'multiFilesInputWithPreview'" (onCouldNotRemove)="onCouldNotRemove($event)" [multiple]="true"  (onRemoved)="onRemoved($event)" (onAdded)="onAdded($event)" (onAction)="onAction($event)"></ng2-file-input>
 
 
 </ion-item>

in page.ts (Imports)
import { Ng2FileInputService, Ng2FileInputAction } from 'ng2-file-input';

in page.ts (Variable Declaration)

myFileInputIdentifier:string = "multiFilesInputWithPreview";
  public actionLog:string="";

in page.ts (Constructor)


  constructor(
    public ng2FileInputService: Ng2FileInputService,

in page.ts (Main)

public onAction(event: any){
    //console.log(event);
    this.actionLog += "\n currentFiles: " + this.getFileNames(event.currentFiles);
   // console.log(this.actionLog);

   
  }
  public onAdded(event: any){
    this.actionLog += "\n FileInput: "+event;
    this.actionLog += "\n Action: File added";
   //   let filename = this.eventData.getfilename(fileentry);
   //     let fileext = this.eventData.getfileext(fileentry);
   
      
    }
  public onRemoved(event: any){
    this.actionLog += "\n FileInput: "+event.id;
    this.actionLog += "\n Action: File removed";
  }
  public onInvalidDenied(event: any){
    this.actionLog += "\n FileInput: "+event.id;
    this.actionLog += "\n Action: File denied";
  }
  public onCouldNotRemove(event: any){
    this.actionLog += "\n FileInput: "+event.id;
    this.actionLog += "\n Action: Could not remove file";
  }
  resetFileInput() {
    this.ng2FileInputService.reset(this.myFileInputIdentifier);
  }
  logCurrentFiles(){
    let files=this.ng2FileInputService.getCurrentFiles(this.myFileInputIdentifier);
    this.actionLog += "\n The currently added files are: " + this.getFileNames(files);
       console.log(this.actionLog);
  }
  getFileNames(files:File[]){
    let names=files.forEach((file) => {
        var reader = new FileReader();
       let filedata =  reader.readAsDataURL(file)
    console.log(filedata);
        console.log(file.name);

        var reader = new FileReader();
        reader.onload = (function(theFile){
          var fileName = file.name;
          return function(e){
            console.log(fileName);
            console.log(e.target.result);
          };
        })(file);
        reader.readAsArrayBuffer(file);
       
    });
      
      
    //return names ? names.join(", "): "No files currently added.";


  }

To get the Files:
this.ng2FileInputService.getCurrentFiles(this.myFileInputIdentifier)

You can see this in action here: https://pjaguar.com/#/new-assignment

I used to have this problem because of the lifecycle hooks.

Instead of using ngOnInit() or the constructor to process the params, I use:

ngAfterViewInit(){
//code with id
}

Instead of using ionViewWillEnter(), I use:

ionViewDidEnter(){
//code with id
}

@trevaun23 thanks for your answer . I have watched vedio on youtube use input type file for implementing the uploading . what do you think of this way ?

I tried that too. Longer process. (I’m a lazy programmer, I go for the easiest and asthetically pleasing solution)

1 Like

In ng2-file-input docs they say that i should install bootstrap . so how did you install it ?

I didn’t put in bootstrap until a few weeks after adding in the file input. But you can use the CDN to get bootstrap.

1 Like

A vote of thanks :slight_smile:

no errors appears if the file is not in my extensions … what I should do ?

@Morad-Abdo did you get this to work with the method that @trevaun23 proposed i.e using ngAfterViewInit() and ionViewWillEnter() ? I’m looking into this area at the moment and keen to know the best way to go. Thanks!

Thanks for this. I’m looking into webifying my mobile app right now. I’m interested in the segment area. In Ionic’s Conference App they list their segments in app.module.ts (under Links within IonicModule) and they don’t have the segment entry in each Page component like you do. Why is that? Are the two approaches achieving the same thing?

NO , it doesn’t work . when I refresh the page from the browser I got the same error . I do not know how to handle this . I’m thinking of using model to view the detail page and provide it with a refresher in the header of the model to be a replacement , but it is not the best solution for this . Do you have any Idea ?

my code is :
ngAfterViewInit() { this.catId = this.navParams.get('cat').id }

everything is working as expected but when I refresh page using chrome refresher there is error

TypeError: Cannot read property 'id' of undefined
1 Like

Are you using segments? Like in the post above (or - as I mentioned - the way they do it in in the Conference app) ?

1 Like

I didn’t use segment . really I’m a junior . what’s the importance of segment ?

Take a look at app.module in the conference app and you’ll see a list of links with segments (which in some cases have paramaters passed). And also see the docs here:

1 Like

see the bit under Dynamic Links

1 Like

https://blog.ionicframework.com/navigating-lifecycle-events/

This would be of importance aswell.