Angular File Uploader

Welcome to the Simple File Upload Angular Uploader documentation. This documentation provides guidance on how to add the Simple File Upload Angular Uploader to your projects. Let's get started! 

1. Add the JavaScript snippet

Add the following script tag to the `head` section of your application.

This replaces'YOUR_BUCKET_UUID' with your actual bucket UUID:

<script src="https://app.simplefileupload.com/buckets/YOUR_BUCKET_UUID.js"></script>

2. Add a hidden input field

In your Angular component template, add the following hidden input field. This input will be automatically enhanced by the Simple File Upload script:

<input type="hidden" name="uploaded_file_url" class="simple-file-upload">

3. Add a hidden input field

Use Angular's template reference variables and `@ViewChild` decorator to access the uploaded file's URL in your component.

In your template:

<input type="hidden" name="uploaded_file_url" id="uploaded_file_url" 
class="simple-file-upload" #fileInput>

‍

In your component's TypeScript file:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  @ViewChild('fileInput') fileInput: ElementRef;

  getUploadedFileUrl(): string {
    return this.fileInput.nativeElement.value;
  }
}

‍

These steps will add an Angular file uploader to your web app and allow you to retrieve the uploaded file's URL.