-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #36 from uploadcare/feat/rename-to-file-uploader
feat: Updated Readme.md and renamed to file-uploader
- Loading branch information
Showing
22 changed files
with
100 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| <p align="center"> | ||
| <a href="https://uploadcare.com/?ref=github-blocks-examples-readme"> | ||
| <a href="https://uploadcare.com/?ref=github-file-uploader-examples-readme"> | ||
| <picture> | ||
| <source media="(prefers-color-scheme: light)" srcset="https://ucarecdn.com/1b4714cd-53be-447b-bbde-e061f1e5a22f/logo-safespace-transparent.svg"> | ||
| <source media="(prefers-color-scheme: dark)" srcset="https://ucarecdn.com/3b610a0a-780c-4750-a8b4-3bf4a8c90389/logo-transparent-inverted.svg"> | ||
|
|
@@ -8,38 +8,40 @@ | |
| </a> | ||
| </p> | ||
| <p align="center"> | ||
| <a href="https://uploadcare.com?ref=github-blocks-examples-readme">Website</a> • | ||
| <a href="https://uploadcare.com/docs/start/quickstart?ref=github-blocks-examples-readme">Quick Start</a> • | ||
| <a href="https://uploadcare.com/docs?ref=github-blocks-examples-readme">Docs</a> • | ||
| <a href="https://uploadcare.com/blog?ref=github-blocks-examples-readme">Blog</a> • | ||
| <a href="https://discord.gg/mKWRgRsVz8?ref=github-blocks-examples-readme">Discord</a> • | ||
| <a href="https://twitter.com/Uploadcare?ref=github-blocks-examples-readme">Twitter</a> | ||
| <a href="https://uploadcare.com?ref=github-file-uploader-examples-readme">Website</a> • | ||
| <a href="https://uploadcare.com/docs/start/quickstart?ref=github-file-uploader-examples-readme">Quick Start</a> • | ||
| <a href="https://uploadcare.com/docs?ref=github-file-uploader-examples-readme">Docs</a> • | ||
| <a href="https://uploadcare.com/blog?ref=github-file-uploader-examples-readme">Blog</a> • | ||
| <a href="https://discord.gg/mKWRgRsVz8?ref=github-file-uploader-examples-readme">Discord</a> • | ||
| <a href="https://twitter.com/Uploadcare?ref=github-file-uploader-examples-readme">Twitter</a> | ||
| </p> | ||
|
|
||
| # 📦 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 <a href="mailto:[email protected]">[email protected]</a>. | ||
| * 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. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,9 +16,11 @@ | |
| <a href="https://twitter.com/Uploadcare?ref=github-js-example-readme">Twitter</a> | ||
| </p> | ||
|
|
||
| # JS File Uploader with Uploadcare Blocks | ||
| # JS file uploading example | ||
|
|
||
| [](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/js-uploader/) | ||
| [](https://codesandbox.io/s/github/uploadcare/file-uploader-examples/tree/main/examples/js-uploader/) | ||
|
|
||
| This is an example project of implementing a file uploader in an JacaScript application with [Uploadcare File Uploader](https://github.com/uploadcare/file-uploader) | ||
|
|
||
| ## Run this demo locally | ||
|
|
||
|
|
@@ -39,7 +41,7 @@ $ npm run start | |
|
|
||
| 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 <a href="mailto:[email protected]">[email protected]</a>. | ||
| * Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well. | ||
| * Star this repo if you like it ⭐️ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,9 +16,11 @@ | |
| <a href="https://twitter.com/Uploadcare?ref=github-next-example-readme">Twitter</a> | ||
| </p> | ||
|
|
||
| # Next.js File Uploader with Uploadcare Blocks | ||
| # Next.js file uploading example | ||
|
|
||
| [](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/next-uploader-adapter/) | ||
| [](https://codesandbox.io/s/github/uploadcare/file-uploader-examples/tree/main/examples/next-uploader-adapter/) | ||
|
|
||
| This is an example project of implementing a file uploader in a Next.js application with [Uploadcare React Uploader](https://github.com/uploadcare/react-components/blob/main/packages/react-uploader) | ||
|
|
||
| ## Run this demo locally | ||
|
|
||
|
|
@@ -38,7 +40,7 @@ $ npm run start | |
|
|
||
| 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 <a href="mailto:[email protected]">[email protected]</a>. | ||
| * Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well. | ||
| * Star this repo if you like it ⭐️ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,9 +16,11 @@ | |
| <a href="https://twitter.com/Uploadcare?ref=github-next-example-readme">Twitter</a> | ||
| </p> | ||
|
|
||
| # Next.js File Uploader with Uploadcare Blocks | ||
| # Next.js file uploading example | ||
|
|
||
| [](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/next-uploader/) | ||
| [](https://codesandbox.io/s/github/uploadcare/file-uploader-examples/tree/main/examples/next-uploader/) | ||
|
|
||
| This is an example project of implementing a file uploader in a Next.js application with [Uploadcare File Uploader](https://github.com/uploadcare/file-uploader) | ||
|
|
||
| ## Run this demo locally | ||
|
|
||
|
|
@@ -38,7 +40,7 @@ $ npm run start | |
|
|
||
| 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 <a href="mailto:[email protected]">[email protected]</a>. | ||
| * Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well. | ||
| * Star this repo if you like it ⭐️ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,11 +16,11 @@ | |
| <a href="https://twitter.com/Uploadcare?ref=github-react-example-readme">Twitter</a> | ||
| </p> | ||
|
|
||
| # React File Uploader with Uploadcare Blocks | ||
| # React file uploading example | ||
|
|
||
| [](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/react-uploader-adapter/) | ||
| [](https://codesandbox.io/s/github/uploadcare/file-uploader-examples/tree/main/examples/react-uploader-adapter/) | ||
|
|
||
| This is an example project of implementing a file uploader in a React application with [Uploadcare Blocks](https://github.com/uploadcare/blocks). | ||
| This is an example project of implementing a file uploader in a Next.js application with [Uploadcare React Uploader](https://github.com/uploadcare/react-components/blob/main/packages/react-uploader) | ||
|
|
||
| ## Run this demo locally | ||
|
|
||
|
|
@@ -49,14 +49,14 @@ Please, read the [File Uploader documentation](https://uploadcare.com/docs/file- | |
|
|
||
| ## Integration notes | ||
|
|
||
| Blocks are native to the Web but not to React. It's easy to use Blocks in a React app, but note that a part of your solution will encapsulate non-React code. | ||
| File Uploader is native to the Web but not to React. It's easy to use File Uploader in a React app, but note that a part of your solution will encapsulate non-React code. | ||
|
|
||
| E.g. in one of the examples we created a [FileUploader](src/components/FileUploader/FileUploader.tsx) component | ||
| which provides React-friendly API for the rest of the view. There are Blocks inside of this component and nowhere else. | ||
| which provides React-friendly API for the rest of the view. There is a File Uploader inside this component and nowhere else. | ||
|
|
||
| ### 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. | ||
|
|
@@ -67,7 +67,7 @@ Otherwise you may go “full override” way and pass a string with styles to a | |
|
|
||
| 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 <a href="mailto:[email protected]">[email protected]</a>. | ||
| * Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well. | ||
| * Star this repo if you like it ⭐️ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.