Recently, I incorporated a customized directive into my Angular app to allow file uploads via drag and drop. However, I encountered an issue where the command line kept throwing an error stating that my function does not exist within my component.
Property 'fileBrowseHandler' does not exist on type 'UploadResumeComponent'.
I attempted to resolve this by adding it to my exports in my app.module.ts file, but unfortunately, that did not solve the problem. Any suggestions on how to fix this issue?
(Name of customized directive = DndDirective)
Thank you!
@NgModule({
declarations: [
AppComponent,
UploadResumeComponent,
HeaderComponent,
BannerComponent,
SideMenuComponent,
MainBodyComponent,
FooterComponent,
DndDirective,
RhsWidgetComponent,
ResumePreviewComponent,
SkillsProfileComponent
],
exports : [
DndDirective
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
[NgxDocViewerModule],
PdfViewerModule
],
providers: [
{provide: COMPILER_OPTIONS, useValue: {}, multi: true},
{provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
{provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]},
],
bootstrap: [AppComponent]
})
HTML FILE --
<div class="upload">
<div class="drag-area" appDnd *ngIf="!main.uploadedResume">
<input
type="file"
#fileDropRef
id="fileDropRef"
multiple
(change)="fileBrowseHandler($event.target.files)"
hidden
>
Custom Directive (TS file) --
import { Directive, HostBinding, HostListener, Input } from '@angular/core';
// import { url } from 'inspector';
import { ApiService } from './services/api.service';
import { MainService } from './services/main.service';
@Directive({
selector: '[appDnd]'
})
// @Input
export class DndDirective {
@HostBinding('class.fileover') fileOver: boolean;
// Dragover Listener
@HostListener('dragover',['$event']) onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.fileOver = true;
console.log('Drag Over')
}
// Dragleave Listener
@HostListener('dragleave',['$event']) public onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
console.log('Drag Leave')
}
// Drop Listener
@HostListener('drop', ['$event']) public ondrop(evt){
evt.preventDefault();
evt.stopPropagation();
this.fileOver = false;
const files = evt.dataTransfer.files;
if(files.length > 0){
//Do some stuff here
// this.fileDropped.emit(files)
this.getPreSignedUrl();
this.main.uploadedResume = true;
console.log("files", files)
console.log(`You dropped ${files.length} files.`)
}
}