- Website • - Quick Start • - Docs • - Blog • - Discord • - Twitter + Website • + Quick Start • + Docs • + Blog • + Discord • + Twitter
-# 📦 Uploadcare Blocks Examples +# Uploadcare File Uploader Examples -This repository contains a collection of examples demonstrating the integration of the [Uploadcare Blocks](https://github.com/uploadcare/blocks) library with various front-end stacks. Each example is designed to provide a clear and practical guide on implementing file-uploading features using Blocks in your projects. +This repository provides examples of integrating the [Uploadcare File Uploader](https://github.com/uploadcare/file-uploader) into various environments and frameworks. -## Examples - -Each directory in this repository represents a different framework maintained by Blocks and contains fully functional file-uploading applications: +Our File Uploader is built using Web Components, which makes it **framework-agnostic**. That means you can integrate it into any project, whether working with React, Vue, Angular, or a plain JavaScript setup. The examples aim to help you implement the uploader into any workflows and use cases, regardless of the specific tech stack. * [JavaScript](./examples/js-uploader/) * [React](./examples/react-uploader/) -* [React via Adapter](./examples/react-uploader-adapter/) * [Angular](./examples/angular-uploader/) * [Vue](./examples/vue-uploader/) * [Svelte](./examples/svelte-uploader/) * [Next.js](./examples/next-uploader/) + +We’re always looking to improve and find the best solutions. That’s why we created the [React wrapper](https://github.com/uploadcare/react-components/blob/main/packages/react-uploader/README.md)—to support familiar development patterns and approaches: + +* [React via Adapter](./examples/react-uploader-adapter/) * [Next.js via Adapter](./examples/next-uploader-adapter/) +## Lack an example? -Each example provides a live demo, instructions to run it locally, and helpful tips right in the code. +If you need help with your stack or have a specific question or use case, feel free to [create an issue](https://github.com/uploadcare/file-uploader-examples/issues). We’re here to explore more integrations and help you out. ## Contribution You’re always welcome to contribute: -* Create [issues](https://github.com/uploadcare/blocks-examples/issues) every time you feel something is missing or goes wrong. +* Create [issues](https://github.com/uploadcare/file-uploader-examples/issues) every time you feel something is missing or goes wrong. * Provide your feedback or drop us a support request at hello@uploadcare.com. * Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well. * Fork project, make changes and send it as pull request. diff --git a/examples/angular-uploader/README.md b/examples/angular-uploader/README.md index 3da7f2c..66f1def 100644 --- a/examples/angular-uploader/README.md +++ b/examples/angular-uploader/README.md @@ -16,11 +16,11 @@ Twitter -# Angular File Uploader with Uploadcare Blocks +# Angular file uploading examples -[](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/angular-uploader/) +[](https://codesandbox.io/s/github/uploadcare/file-uploader-examples/tree/main/examples/angular-uploader/) -This is an example project of implementing a file uploader in an Angular application with [Uploadcare Blocks](https://github.com/uploadcare/blocks). +This is an example project of implementing a file uploader in an Angular application with [Uploadcare File Uploader](https://github.com/uploadcare/file-uploader). ## Run this demo locally @@ -51,7 +51,7 @@ Please, read the [File Uploader documentation](https://uploadcare.com/docs/file- ### Angular + Web Components -Blocks are native to the Web but not to Angular. However, Angular does everything to make solutions based on Web Components +File Uploader is native to the Web but not to Angular. However, Angular does everything to make solutions based on Web Components to work properly with it. To help Angular to figure out where you're using Web Components, you have to set @@ -64,7 +64,7 @@ if you want to know more about using custom elements in Angular. ### Styling -If your styling solution may provide class string or style object, feel free to use them on blocks like +If your styling solution may provide class string or style object, feel free to use them on components like `uc-file-uploader-regular` and override default class using CSS variables. Otherwise you may go “full override” way and pass a string with styles to a File Uploader type of your choice. diff --git a/examples/angular-uploader/src/app/app.component.html b/examples/angular-uploader/src/app/app.component.html index bd5af18..76b7997 100644 --- a/examples/angular-uploader/src/app/app.component.html +++ b/examples/angular-uploader/src/app/app.component.html @@ -3,7 +3,8 @@