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