Usage of PrimeNG component will not give the files data on the api. Why?


#1

Dear Friends,

I am using Angular 5 as Front end and Laravel 5.6 as backend (for api support for front end).
I need to upload files using PrimeNG component from File upload . I added the component and it shows as fine

on fileview.component.html

<div class="card wraper" id="rte">
      <form #newNoteForm="ngForm">
      <div class="card-header">
          <div class="card-header-right" style="top: 4px;">
                <card-controls cardId="rte"></card-controls>
          </div>
      </div>
      <div class="card-block">
            <editor [(ngModel)]="fileNote" name="fileNotes"></editor>
            <p-fileUpload name="myfile[]" url="http://127.0.0.1:8000/api/items" multiple="multiple"
                maxFileSize="1000000"> <!-- 1 MB-->
                <!--<ng-template pTemplate="content"> 
                    <ul *ngIf="uploadedFiles.length">
                        <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                    </ul>
                </ng-template>-->
          </p-fileUpload>
        <!-- <angular-tinymce [(ngModel)]='content'></angular-tinymce> -->
          
        <div class="wraper btns_spc text-center">
            <input class="filBtns" type="button" value="Save" (click)="updateNote(newNoteForm)" >
            <input class="filBtns" type="button" value="Edit">
            <input class="filBtns" type="button" value="Update">
        </div>
      </div>
      </form>
  </div>

It’s corresponding ts file is

import { Component, OnInit, Input, EventEmitter, Output, OnDestroy } from '@angular/core';
import { Location } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import {Routes, RouterModule, Router, ActivatedRoute} from "@angular/router";
import {OfficialService} from '../../shared/official.service';
import {CommonService} from '../../../../../shared/services/common.service';
@Component({
  selector: 'app-file-view',
  templateUrl: './file-view.component.html',
  styleUrls: ['./file-view.component.css']
})
export class FileViewComponent implements OnInit {

  uploadedFiles: any[] = [];

  onUpload(event) {
      //alert("event is: "+event);
      for(let file of event.files) {
          this.uploadedFiles.push(file);
      }
  }    
  //@Input() id: string;
  //@Input() maxSize: number;
  //@Output() pageChange: EventEmitter<number>;
  public scrollbarOptions = { axis: 'yx'};
  page: number = 1;
  fileNote: any;
  pdfList = [];
  p: number = 1;
  showLess: boolean = true;
  toggleButtonText: string = 'View All';
  prilimnary:any={};
  sticker:any={};
  notesdet:any={};
  attachments:any={};
  draftnote:any={};
  notes=[];
  attchmnt:any={};
  ParamFileId:any={};
  lang:string;
  noteattach:any={};
  refer:any={};
  proceedings:any={};
  fieldrpt:any={};
  res:any={};
  notesList = [];
  //displayComments: boolean = false;
  showEditor: boolean = false;
  showEditorType: string;
  NoteId:number;

  

  action = {};
  actionList ={
    "userId": 0,
    "userCode": 432678,
    "userName": "sachin tendulkar",
    "roleList": {
      "roleId": 1005,
      "roleName": "APPROVER"
    },
    "screenList": {
      "screenId": 1003,
      "screenName": "file view",
      "url": "/official/v1/filemgmt/fileview",

      "controlList": [
        {
          "controlId": 1033,
          "controlName": "APPROVE",
          "controlType": "Button"
        },
        {
          "controlId": 1006,
          "controlName": "COMMENT NOTE",
          "controlType": "Button"
        },
        {
          "controlId": 1023,
          "controlName": "REJECT",
          "controlType": "Button"
        }
      ],
  

      "dropdown": {
        "overview": [{
            "id": "0",
            "name": "Overview"
          },
          {
            "id": "1",
            "name": "Reference"
          },
          {
            "id": "2",
            "name": "Valuable"
          },
          {
            "id": "3",
            "name": "Enclosure"
          },
          {
            "id": "4",
            "name": "Attachment"
          },
          {
            "id": "5",
            "name": "Correspondence"
          }
        ],
        "activities": [{
            "id": "0",
            "name": "Activities"
          },
          {
            "id": "1",
            "name": "Drafting"
          },
          {
            "id": "2",
            "name": "Agenda Note"
          },
          {
            "id": "3",
            "name": "Linking"
          },
          {
            "id": "4",
            "name": "Arising"
          },
          {
            "id": "5",
            "name": "Parking"
          },
          {
            "id": "6",
            "name": "New Attachment"
          },
          {
            "id": "7",
            "name": "Change Custodian"
          },
          {
            "id": "8",
            "name": "Send for Remarks"
          },
          {
            "id": "9",
            "name": "Send for information"
          }
        ],
        "utilities": [{
            "id": "0",
            "name": "Utilities"
          },
          {
            "id": "1",
            "name": "Sticker"
          },
          {
            "id": "2",
            "name": "Event"
          },
          {
            "id": "3",
            "name": "Reminder"
          },
          {
            "id": "4",
            "name": "Task Planner"
          },
          {
            "id": "5",
            "name": "Movement Register"
          },
          {
            "id": "6",
            "name": "Sms"
          },
          {
            "id": "7",
            "name": "Email"
          }
        ],
        "other": [{
            "id": "0",
            "name": "Other"
          },
          {
            "id": "1",
            "name": "Reference"
          },
          {
            "id": "2",
            "name": "Valuable"
          },
          {
            "id": "3",
            "name": "Enclosure"
          },
          {
            "id": "4",
            "name": "Attachment"
          },
          {
            "id": "5",
            "name": "Correspondence"
          }
        ]
      }
    }
  };

  noteFilter: any = { note: '', user: '' };
  showSticker: boolean = false;
  constructor(private location: Location, private route: ActivatedRoute,
    private router: Router,
    private http: HttpClient,private translate:TranslateService,
    private officialService:OfficialService, private commonService: CommonService) {
      this.lang = this.translate.currentLang ? this.translate.currentLang : this.translate.getBrowserLang();
      this.route.params.subscribe(params => {       
      this.ParamFileId=params.id;      
      });     
     }


  public ngOnInit() {
      let fileDetails={
      fileId: this.ParamFileId,
      language:this.lang,
      fnName :'showFile'
    };

    if(this.commonService.isToggled()){
      this.commonService.toggleSidebar();
    }
    
    if(this.actionList.screenList.controlList.length > 0){
      for (var value of this.actionList.screenList.controlList) {
        let controlName = value.controlName.replace(/ /g, '').toLowerCase();
        this.action[controlName] = true;
      }
    }
    this.officialService.postApiServices(fileDetails).subscribe(res => {

     this.res=res;
     this.prilimnary=this.res.data.Priliminarydet[0];
     this.notesdet=this.res.data.Notes_det;
     this.notes=this.res.data.Notes_det;
     if(this.res.data.attachment_det.length>0){
     this.attchmnt=JSON.parse(this.res.data.attachment_det[0].atchmnts);
     this.noteattach=this.attchmnt.Note;
     this.proceedings=this.attchmnt.proceedings;
     this.fieldrpt=this.attchmnt.FieldReport;
     this.refer=this.attchmnt.Reference;  
    }  
     var i:number;   

for (i = 0; i < this.noteattach.length; i++) {
  if(this.noteattach[i].name!=null) { 
    this.pdfList.push( {"name": this.noteattach[i].name, "url": this.noteattach[i].path});
  }
}
for (i = 0; i < this.proceedings.length; i++) {
  if(this.proceedings[i].name!=null){
    this.pdfList.push( {"name": this.proceedings[i].name, "url": this.proceedings[i].path});
  }
}
for (i = 0; i < this.fieldrpt.length; i++) {
  if(this.fieldrpt[i].name!=null){
    this.pdfList.push( {"name": this.fieldrpt[i].name, "url": this.fieldrpt[i].path});
  }
 }
for (i = 0; i < this.refer.length; i++) {
  if(this.refer[i].name!=null){
    this.pdfList.push( {"name": this.refer[i].name, "url": this.refer[i].path});
  }
 }
    this.notesList = this.notes.slice(0,4);
     
  },
      err => {
      console.log("Error occured");
      }
      );
  }

  toggleViewAll() {
    this.showLess = !this.showLess;
    this.toggleButtonText = (this.showLess)? 'View All' : 'Back';
  }

  goBack() {
    this.location.back();
  }
/*
author      : Sreeja C
Date        : 2018-07-05
Description : code to format comments which is split to array 
              based  on concatenated string ||

*/
  public getcheck(formatData){   
    var formatedDet;
    formatedDet=formatData.replace(/[{}"]/g,'').split("||");
    formatedDet= formatedDet.filter(v=>v!='');
    console.log(formatedDet);
    return formatedDet;  
  }

  updateNote(shortNote,noteComment){    
    if (this.showEditorType == 'note'){     
      console.log(shortNote);
    }
    else{
    let fileDetails={'fileId':this.ParamFileId,'cmtForId':this.NoteId,'note':noteComment,'fnName':'saveComments'};
    this.officialService.postApiServices(fileDetails).subscribe((resp) => {
      
    });  
      console.log(noteComment);
    }    
  }

  onScrollDown(){
    console.log("scrolled!!!");
    if(this.notesList.length < this.notes.length){  
      let len = this.notesList.length;
  
      for(let i = len; i < len+4; i++){
      this.notesList.push(this.notes[i]);
      }
    }
  }

  toggleSticker() {
    this.showSticker = !this.showSticker;
  }

  notesSearch(container){
    let notesDom: any = document.querySelector('#'+container+' .key-search');
    notesDom.classList.add('open');
    let notesDomElem: any = document.querySelector('#'+container+' .key-search .form-control');
    notesDomElem.style.width = "200px";
    //console.log(dom.classList);
  }

  closeSearch(container){
    let notesDom: any = document.querySelector('#'+container+' .key-search');   
    let notesDomElem: any = document.querySelector('#'+container+' .key-search .form-control');
    notesDomElem.style.width = "0px";
    notesDom.classList.remove('open');
    //console.log(dom.classList);
  }

  showComments(elemId){
    let dom: any = document.querySelector('#note-'+elemId);
    dom.classList.toggle('open');
    //this.displayComments = !this.displayComments;
  }

  toggleEditor(editorType, noteId){
    this.showEditor = !this.showEditor;
    this.showEditorType = (editorType == 'note') ? 'note' : 'comment';
    this.NoteId=noteId;
  }

  newNote(editorType, noteId){
    this.toggleEditor(editorType, noteId);
  }

  ngOnDestroy() {
    this.commonService.toggleSidebar();
  }
}

The corresponding module added in module.ts file

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IntegratedWorkspaceComponent } from './integrated-workspace.component';
import { IntegratedWorkspaceRoutingModule } from './integrated-workspace-routing.module';
import { DataTablesModule } from 'angular-datatables';
import { FileListComponent } from './components/file-list/file-list.component';
import { FileViewComponent } from './components/file-view/file-view.component';
import { PdfViewerComponent } from 'ng2-pdf-viewer';
import { NgxPaginationModule } from 'ngx-pagination';
import { EditorModule } from '@tinymce/tinymce-angular';
import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
import { SharedModule } from '../../../shared/shared.module';
import { InfiniteScrollModule } from "ngx-infinite-scroll";
import { OfficialService } from './shared/official.service';
//import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
//import { TinyMceModule, tinymceDefaultSettings } from 'angular-tinymce';
import {TooltipModule} from "ngx-tooltip";
import { SafePipe } from '../../../shared/pipes/safe.pipe';
// Upload part
import { FileUploadModule } from 'primeng/fileupload';


@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
    IntegratedWorkspaceRoutingModule,
    DataTablesModule,
    NgxPaginationModule,
    EditorModule,
    MalihuScrollbarModule.forRoot(),
    SharedModule,
    //FroalaEditorModule.forRoot(),
    //FroalaViewModule.forRoot(),
    //TinyMceModule.forRoot(tinymceDefaultSettings()),
    TooltipModule,
    FormsModule,
    ReactiveFormsModule,
    FileUploadModule,
    InfiniteScrollModule
  ],
  
  providers: [
    OfficialService
  ],
  declarations: [
    IntegratedWorkspaceComponent,
    FileListComponent,
    FileViewComponent,
    PdfViewerComponent,
    SafePipe
  ]
})
export class IntegratedWorkspaceModule { }

But in my laravel backend i did not get any added file …

<?php

namespace App\Http\Controllers;


use Illuminate\Support\Facades\File;
use Illuminate\Support\Str;
use Carbon\Carbon;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\URL;
use Illuminate\Http\Request;
use App\Item;

class ItemController extends Controller
{
    public function store(Request $request)
    {
        /*$item = new Item([
          'name' => $request->get('name'),
          'price' => $request->get('price')
        ]);
    return $request->all(); // null value here
    }
}

Any body please advise . I am running hours on this problem . But no solution yet

Thanks

Anes


#2

Is this a Meteor question? it looks like a Laravel question to me.

I suggest posting it in SO.


#3

Yes Rob its an angular question itself. I did not get the api values which supposed to send by angular front end part. Please try to help

Thanks
Anes


#4

This is not a forum for general Angular help. If you are using Meteor with Angular, it may be someone will be able to assist, but you will likely get a better response from SO.


#5

In addition to StackOverflow, PrimeNG also has a forum where you may be able to get troubleshooting assistance.