Merge pull request #36 from uploadcare/feat/rename-to-file-uploader

feat: Updated Readme.md and renamed to file-uploader

Author: egordidenko

README.md

@@ -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.

examples/angular-uploader/README.md

@@ -16,11 +16,11 @@
   <a href="https://twitter.com/Uploadcare?ref=github-angular-example-readme">Twitter</a>
 </p>
 
-# Angular File Uploader with Uploadcare Blocks
+# Angular file uploading examples
 
-[![Edit angular-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/angular-uploader/)
+[![Edit angular-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](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.

examples/angular-uploader/src/app/app.component.html

@@ -3,7 +3,8 @@
     <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 18 18" width="30" height="30">
       <circle cx="9" cy="9" r="9" fill="url(#gradient)"></circle>
       <defs>
-        <radialGradient id="gradient" cx="0" cy="0" r="1" gradientTransform="rotate(149.216 9.368 7.42) scale(17.5848 20.2492)" gradientUnits="userSpaceOnUse">
+        <radialGradient id="gradient" cx="0" cy="0" r="1"
+          gradientTransform="rotate(149.216 9.368 7.42) scale(17.5848 20.2492)" gradientUnits="userSpaceOnUse">
           <stop stop-color="#FFC700"></stop>
           <stop offset="1" stop-color="#FFEDAB"></stop>
         </radialGradient>
@@ -13,41 +14,31 @@
 
   <ul class="menu">
     <li class="menu-item">
-      <a
-        class="link menu-link"
-        routerLink="form"
-        routerLinkActive="active"
-      >Real-life form</a>
+      <a class="link menu-link" routerLink="form" routerLinkActive="active">Real-life form</a>
     </li>
 
     <li class="menu-item">
-      <a
-        class="link menu-link"
-        routerLink="minimal"
-        routerLinkActive="active"
-      >Minimal uploader</a>
+      <a class="link menu-link" routerLink="minimal" routerLinkActive="active">Minimal uploader</a>
     </li>
 
     <li class="menu-item">
-      <a
-        class="link menu-link"
-        routerLink="regular"
-        routerLinkActive="active"
-      >Regular uploader</a>
+      <a class="link menu-link" routerLink="regular" routerLinkActive="active">Regular uploader</a>
     </li>
   </ul>
 
   <div class="source">
     <span class="source-title">
-      Built with Uploadcare Blocks and Angular
+      Built with Uploadcare File Uploader and Angular
     </span>
 
-    <a class="link" href="https://github.com/uploadcare/blocks-examples/tree/main/examples/angular-uploader">
+    <a class="link" href="https://github.com/uploadcare/file-uploader-examples/tree/main/examples/angular-uploader">
       <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" width="30" height="30">
-        <path fill="#24292f" style="fill: var(--ui-control-text-color)" stroke="none" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
+        <path fill="#24292f" style="fill: var(--ui-control-text-color)" stroke="none"
+          d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12">
+        </path>
       </svg>
     </a>
   </div>
 </nav>
 
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.html

@@ -1,7 +1,7 @@
 <div class="root">
   <!--
-    Note: `uc-config` is the main block we use to configure File Uploader.
-    It's important to all the context-related blocks to have the same `ctx-name` attribute.
+    Note: `uc-config` is the main component we use to configure File Uploader.
+    It's important to all the context-related File Uploader to have the same `ctx-name` attribute.
 
     See more: https://uploadcare.com/docs/file-uploader/configuration/
     Available options: https://uploadcare.com/docs/file-uploader/options/

examples/angular-uploader/src/styles.scss

@@ -1,6 +1,6 @@
 /*
   Go to https://uploadcare.com/docs/file-uploader/styling/
-  to read more about Blocks styling
+  to read more about File Uploader styling
  */
 @import '@uploadcare/file-uploader/web/uc-file-uploader-regular.min.css';
 @import '@uploadcare/file-uploader/web/uc-file-uploader-minimal.min.css';

examples/js-custom-tab/README.md

@@ -1,6 +1,6 @@
-# Blocks composition examples
+# File Uploader composition examples
 
-[![Edit composition](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/composition/)
+[![Edit composition](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/uploadcare/file-uploader-examples/tree/main/examples/composition/)
 
 
 ## Run this demo locally

examples/js-uploader/README.md

@@ -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
 
-[![Edit js-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/js-uploader/)
+[![Edit js-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](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 ⭐️

examples/next-uploader-adapter/README.md

@@ -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
 
-[![Edit next-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/next-uploader-adapter/)
+[![Edit next-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](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 ⭐️

examples/next-uploader/README.md

@@ -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
 
-[![Edit next-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/next-uploader/)
+[![Edit next-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](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 ⭐️

examples/react-uploader-adapter/README.md

@@ -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
 
-[![Edit react-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/react-uploader-adapter/)
+[![Edit react-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](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 ⭐️

examples/react-uploader-adapter/src/components/Layout/Layout.tsx

@@ -49,10 +49,10 @@ export default function Layout() {
 
         <div className={st.source}>
           <span className={st.sourceTitle}>
-            Built with Uploadcare Blocks and React
+            Built with Uploadcare File Uploader and React
           </span>
 
-          <a className={st.link} href="https://github.com/uploadcare/blocks-examples/tree/main/examples/react-uploader">
+          <a className={st.link} href="https://github.com/uploadcare/file-uploader-examples/tree/main/examples/react-uploader">
             <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" width="30" height="30">
               <path fill="#24292f" style={{ fill: 'var(--ui-control-text-color)' }} stroke="none" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
             </svg>