|
1 | 1 | <h1 align="center"> |
2 | 2 | <a href="https://upload.io/uploader"> |
3 | | - <img alt="Angular Uploader" width="264" height="100" src="https://raw.githubusercontent.com/upload-io/angular-uploader/main/.github/assets/logo.svg"> |
| 3 | + <img alt="Angular Uploader" width="264" height="106" src="https://raw.githubusercontent.com/upload-io/angular-uploader/main/.github/assets/logo.svg"> |
4 | 4 | </a> |
5 | 5 | </h1> |
6 | | - |
7 | 6 | <p align="center"><b>Angular File Upload Widget</b><br/> (With Integrated Cloud Storage)</p> |
8 | | - |
9 | | -<p align="center">Angular Wrapper for <a href="https://upload.io/uploader">Uploader</a> • Developed by <a href="https://upload.io/">Upload.io</a><br/><br/></p> |
10 | | - |
| 7 | +<br/> |
11 | 8 | <p align="center"> |
12 | 9 | <a href="https://github.com/upload-io/angular-uploader/"> |
13 | | - <img src="https://img.shields.io/badge/gzipped-29%20kb-4ba0f6" /> |
| 10 | + <img src="https://img.shields.io/badge/gzipped-6%20kb-4ba0f6" /> |
14 | 11 | </a> |
15 | 12 |
|
16 | 13 | <a href="https://www.npmjs.com/package/angular-uploader"> |
17 | | - <img src="https://img.shields.io/badge/angular--uploader-npm-4ba0f6" /> |
| 14 | + <img src="https://img.shields.io/badge/upload--js-npm-4ba0f6" /> |
18 | 15 | </a> |
19 | 16 |
|
20 | 17 | <a href="https://github.com/upload-io/angular-uploader/actions/workflows/ci.yml"> |
|
39 | 36 | </a> |
40 | 37 |
|
41 | 38 | </p> |
42 | | - |
43 | 39 | <h1 align="center"> |
44 | | - Quick Start — |
45 | | - <a href="https://codesandbox.io/s/angular-uploader-urtrmz?file=/src/app/app.component.ts">Try Live Demo</a> |
| 40 | + Get Started — |
| 41 | + <a href="https://codepen.io/upload-js/pen/popWJpX?editors=0010"> |
| 42 | + Try on CodePen |
| 43 | + </a> |
46 | 44 | </h1> |
47 | 45 |
|
48 | 46 | <p align="center"><a href="https://upload.io/uploader"><img alt="Upload Widget Demo" width="100%" src="https://raw.githubusercontent.com/upload-io/angular-uploader/main/.github/assets/demo.webp"></a></p> |
49 | 47 |
|
50 | | -<p align="center">To implement the above widget:</p> |
51 | | - |
52 | | -```shell |
53 | | -npm install angular-uploader |
54 | | -``` |
55 | | - |
56 | | -**app.module.ts** |
| 48 | +<p align="center">100% Serverless File Upload Widget <br /> Powered by <a href="https://upload.io/">Upload.io</a><br/><br/></p> |
57 | 49 |
|
58 | | -```typescript |
59 | | -import { NgModule } from "@angular/core"; |
60 | | -import { BrowserModule } from "@angular/platform-browser"; |
61 | | -import { UploaderModule } from "angular-uploader"; |
62 | | - |
63 | | -import { AppComponent } from "./app.component"; |
64 | | - |
65 | | -@NgModule({ |
66 | | - declarations: [AppComponent], |
67 | | - imports: [ |
68 | | - BrowserModule, |
69 | | - UploaderModule // <-- Add the Uploader module here. |
70 | | - ], |
71 | | - bootstrap: [AppComponent] |
72 | | -}) |
73 | | -export class AppModule {} |
74 | | -``` |
| 50 | +<hr/> |
75 | 51 |
|
76 | | -**app.component.ts** |
77 | | - |
78 | | -```typescript |
79 | | -import { Component } from "@angular/core"; |
80 | | -import { Uploader, UploadWidgetConfig, UploadWidgetResult } from "uploader"; |
| 52 | +<p align="center"><a href="https://upload.io/dmca" rel="nofollow">DMCA Compliant</a> • <a href="https://upload.io/dpa" rel="nofollow">GDPR Compliant</a> • <a href="https://upload.io/sla" rel="nofollow">99.9% Uptime SLA</a> |
| 53 | + <br/> |
| 54 | + <b>Supports:</b> Rate Limiting, Volume Limiting, File Size & Type Limiting, JWT Auth, and more... |
| 55 | + <br /> |
| 56 | +</p> |
81 | 57 |
|
82 | | -@Component({ |
83 | | - selector: "app-root", |
84 | | - template: ` |
85 | | - <button uploadButton |
86 | | - [uploadComplete]="onComplete" |
87 | | - [uploadOptions]="options" |
88 | | - [uploader]="uploader"> |
89 | | - Upload a file... |
90 | | - </button> |
91 | | - ` |
92 | | -}) |
93 | | -export class AppComponent { |
94 | | - uploader = new Uploader({ |
95 | | - apiKey: "free" // <-- Get production-ready API keys from Upload.io |
96 | | - }); |
97 | | - options: UploadWidgetConfig = { |
98 | | - multi: false |
99 | | - }; |
100 | | - onComplete = (files: UploadWidgetResult[]) => { |
101 | | - alert(files.map(x => x.fileUrl).join("\n")); |
102 | | - }; |
103 | | -} |
104 | | -``` |
| 58 | +<hr/> |
| 59 | +<br /> |
| 60 | +<br /> |
105 | 61 |
|
106 | 62 | # Installation |
107 | 63 |
|
@@ -277,9 +233,11 @@ Upload.io benefits developers with: |
277 | 233 | - Powerful Rules Engine (Rate Limiting, Traffic Limiting, IP Blacklisting, Expiring Links, etc) |
278 | 234 | - File Transformations (Image Resizing, Cropping, Optimization, etc) |
279 | 235 |
|
280 | | -### 🔧 Can I bring my own file storage? |
| 236 | +## 🔧 Can I bring my own file storage? |
| 237 | + |
| 238 | +**Yes!** [Upload.io](https://upload.io) supports custom S3 buckets. |
281 | 239 |
|
282 | | -Uploader's USP is to provide the fastest way to integrate end-to-end file uploads into a web app, while remaining customizable. As such, Uploader will always be closely integrated with the Upload.io platform, and there are currently no plans to support custom backends. You may, however, sync files from your Upload.io account to a custom storage target. |
| 240 | +You still need [an Upload.io account](https://upload.io) to use the widget. |
283 | 241 |
|
284 | 242 | ## Contribute |
285 | 243 |
|
|
0 commit comments