Impliment file upload for company Logo

src/Client/src/app/models/Company.ts

@@ -4,7 +4,7 @@ export class Company {
   public email: string = "";
   public emailVerified: boolean = false;
   public websiteURL: string = "";
-  public logoURL: string = "";
+  public logo: string = "";
   public phone: string = "";
   public postalCode: string = "";
   public country: string = ""; // 2 Letter Country Code

src/Client/src/app/pages/main/company/company.component.html

@@ -8,7 +8,7 @@
         <h1>{{ Comp.email }}</h1>
         <h1>{{ Comp.emailVerified }}</h1>
         <h1>{{ Comp.websiteURL }}</h1>
-        <h1>{{ Comp.logoURL }}</h1>
+        <h1>{{ Comp.logo }}</h1>
         <h1>{{ Comp.phone }}</h1>
         <h1>{{ Comp.postalCode }}</h1>
         <h1>{{ Comp.country }}</h1>

src/Client/src/app/pages/main/company/connect/companyconnect.component.html

@@ -37,7 +37,12 @@
         <div class="center">
             <div class="content-frame">
                 <label>Company Logo URL</label>
-                <input class="input-field" name="logoURL" [(ngModel)]="newListing.logoURL" type="text" placeholder="https://mistox.com/img/logo.png" />
+
+                <img [src]="newListing.logo" />
+                <!-- Need to fix for image file upload -->
+                <div id="FileUploadPlaceholder" ></div>
+                <input type="file" (change)="onFileSelected($event)" accept="image/*" />
+
                 <button type="button" (click)="prevStep()">Back</button>
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
@@ -126,7 +131,7 @@
                     <a href="mailto:{{ newListing.email }}">{{ newListing.email }}</a>
                     <a href="tel:{{ newListing.phone }}">{{ newListing.phone }}</a>
                 </div>
-                <div><img [src]="newListing.logoURL" /></div>
+                <div><img [src]="newListing.logo" /></div>
                 <div class="split">
                     <div class="half-frame">
                         <span>city: {{ newListing.city }}</span>

src/Client/src/app/pages/main/company/connect/companyconnect.component.ts

@@ -20,6 +20,7 @@ export class CompanyConnectComponent {
 
   public newListing: Company = new Company();
   public ErrorMsg: string = "";
+  MaxFileMB: number = 3;
 
   constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
     this.title.setTitle("Company - Connect | BoredCareers");
@@ -54,6 +55,30 @@ export class CompanyConnectComponent {
     }, 500);
   }
 
+  selectedFile: File | null = null;
+  onFileSelected(event: Event){
+    const fileInput = event.target as HTMLInputElement;
+    this.selectedFile = null;
+
+    if (!fileInput.files?.length){
+      return;
+    }
+
+    let file = fileInput.files[0];
+    if (file.size > this.MaxFileMB * 1024 * 1024){
+      this.ErrorMsg = "File exceeds max file size of 16MB";
+      return;
+    }
+    // No issues add file to the list
+    this.selectedFile = file;
+
+    const reader = new FileReader();
+    reader.onload= () => {
+      this.newListing.logo = reader.result as string;
+    }
+    reader.readAsDataURL(file);
+  }
+
   nextStep(){
     this.currentStep += 1;
     this.updateUI(0);
@@ -85,7 +110,7 @@ export class CompanyConnectComponent {
       return;
     }
 
-    if (this.isNullOrEmpty(company.logoURL)){
+    if (this.isNullOrEmpty(company.logo)){
       this.focusFrame(2, 0);
       return;
     }

src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.html

@@ -5,7 +5,7 @@
         <h1>{{ jobsCompany.email }}</h1>
         <h1>{{ jobsCompany.websiteURL }}</h1>
 
-        <h1>{{ jobsCompany.logoURL }}</h1>
+        <h1>{{ jobsCompany.logo }}</h1>
         <h1>{{ jobsCompany.phone }}</h1>
         
         <h1>{{ jobsCompany.city }}</h1>