https://github.com/miljan-code/ngx-uploadthing
Unofficial Uploadthing SDK for Angular 17
https://github.com/miljan-code/ngx-uploadthing
angular ngx-uploadthing uploadthing
Last synced: 3 months ago
JSON representation
Unofficial Uploadthing SDK for Angular 17
- Host: GitHub
- URL: https://github.com/miljan-code/ngx-uploadthing
- Owner: miljan-code
- Created: 2024-06-20T16:30:07.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-02T19:55:18.000Z (over 1 year ago)
- Last Synced: 2025-10-01T13:54:20.888Z (8 months ago)
- Topics: angular, ngx-uploadthing, uploadthing
- Language: TypeScript
- Homepage:
- Size: 513 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: .github/README.md
Awesome Lists containing this project
README
# ngx-uploadthing
An unofficial Angular 17+ wrapper for [Uploadthing](https://github.com/pingdotgg/uploadthing).
## Prerequisites
- Angular 17
## Installation
To install ngx-uploadthing, run the following command in your project directory:
```bash
npm install ngx-uploadthing
```
## Getting started
To begin using ngx-uploadthing in your project, follow these steps:
1. Import the uploadthing provider inside your app.config.ts file:
```typescript
import { provideUploadthing } from "ngx-uploadthing";
import { OurFileRouter } from "~server/uploadthing.ts";
export const appConfig: ApplicationConfig = {
providers: [
...,
provideUploadthing({
// Replace with your own uploadthing endpoint
url: "http://localhost:3000/api/uploadthing",
}),
],
};
```
2. Use UploadthingDirective in your template to create a file uploader:
```typescript
import { Component } from "@angular/core";
import {
type UploadedFileData,
type UploaderConfig,
UploadthingDirective,
UploadthingService
} from "ngx-uploadthing";
@Component({
selector: "app-uploader",
standalone: true,
imports: [UploadthingDirective],
providers: [UploadthingService],
template: `
`,
})
export class UploaderComponent {
config: UploaderConfig = {
// Replace with your own uploadthing endpoint
endpoint: "videoAndImage",
// Set to true to enable uploads on input change
instantUpload: true,
...,
};
handleUploadCompleted(files: UploadedFileData[]) {
console.log(files);
}
handleSelectedFiles(files: FileList) {
console.log(files);
}
}
```
## Features
- **UploadthingService**: This service is a central part of the ngx-uploadthing library. It provides methods for uploading files and managing the upload state.
- uploadFiles$: A Subject that emits an object containing the upload options and files.
- files(): A signal that returns an array of uploaded files.
- status(): A signal that returns the current upload status.
- error(): A signal that returns the upload error if any.