https://github.com/actionanand/image-local-upload
it's about converting image into base64 and serving via local blob url
https://github.com/actionanand/image-local-upload
angular angular2 angular20
Last synced: 15 days ago
JSON representation
it's about converting image into base64 and serving via local blob url
- Host: GitHub
- URL: https://github.com/actionanand/image-local-upload
- Owner: actionanand
- Created: 2025-05-31T07:39:11.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-01T19:18:37.000Z (12 months ago)
- Last Synced: 2025-07-07T09:09:31.631Z (11 months ago)
- Topics: angular, angular2, angular20
- Language: TypeScript
- Homepage: https://actionanand.github.io/image-local-upload/
- Size: 581 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ImageLocalUpload
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.0.
## Running the Application
To run the application in development mode, use the following command:
```
yarn develop
```
Open your browser and navigate to `http://localhost:4203` to access the application.
## Cloning Guide
1. Clone only the remote primary HEAD (default: origin/main)
```bash
git clone --single-branch
```
2. Only specific branch
```bash
git clone --branch --single-branch []
```
```bash
git clone --branch
```
3. Cloning repositories using degit
- main branch is default.
```bash
npx degit github:user/repo#branch-name
```
4. Cloning this project with skeleton
```bash
git clone https://github.com/actionanand/image-local-upload.git --branch 1-skeleton angular-proj-name
```
```bash
npx degit github:actionanand/image-local-upload#1-skeleton angular-proj-name
```
## Automate using `Prettier`, `Es Lint` and `Husky`
1. Install the compatible node version
```bash
nvm install v22.16.0
```
2. Install and Configure Prettier
- Install prettier as below:
```bash
yarn add prettier -D
```
- Create a `.prettierrc.yml` file and write down the format as below: - [online ref](https://prettier.io/docs/en/options.html)
```yml
trailingComma: 'all'
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
bracketSpacing: true
bracketSameLine: true
arrowParens: 'avoid'
printWidth: 120
overrides:
- files:
- '*.js'
- '*.jsx'
options:
bracketSpacing: true
jsxSingleQuote: true
semi: true
singleQuote: true
tabWidth: 2
useTabs: false
- files:
- '*.ts'
options:
tabWidth: 2
```
- Create a `.prettierignore` file and write as below(sample)
```gitignore
# Ignore artifacts:
build
coverage
e2e
node_modules
dist
dest
reports
# Ignore files
*.lock
package-lock.json
yarn.lock
```
3. Install `Es Lint`, if not installed
```bash
ng add @angular-eslint/schematics
```
if error comes, use the below command
```shell
ng add @angular-eslint/schematics@20.0.0-alpha.1
# or
ng add @angular-eslint/schematics@next
```
4. Configure pre-commit hooks
Pre-commit hooks are a nice way to run certain checks to ensure clean code. This can be used to format staged files if for some reason they weren’t automatically formatted during editing. [husky](https://github.com/typicode/husky) can be used to easily configure git hooks to prevent bad commits. We will use this along with [pretty-quick](https://github.com/azz/pretty-quick) to run Prettier on our changed files. Install these packages, along with [npm-run-all](https://github.com/mysticatea/npm-run-all), which will make it easier for us to run npm scripts:
```bash
yarn add husky pretty-quick npm-run-all -D
```
To configure the pre-commit hook, simply add a `precommit` npm script. We want to first run Prettier, then run TSLint on the formatted files. To make our scripts cleaner, I am using the npm-run-all package, which gives you two commands, `run-s` to run scripts in sequence, and `run-p` to run scripts in parallel:
```json
"precommit": "run-s format:fix lint",
"format:fix": "pretty-quick --staged",
"format:check": "prettier --config ./.prettierrc --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
"format:all": "prettier --config ./.prettierrc --write \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
"lint": "ng lint",
```
5. Initialize husky
- Run it once
```bash
npx husky init
```
- Add a hook
```bash
echo "yarn run precommit" > .husky/pre-commit
echo "yarn run test" > .husky/pre-commit
```
- Make a commit
```bash
git commit -m "Keep calm and commit"
# `yarn run precommit and yarn test` will run every time you commit
```
6. How to skip prettier format only in particular file
1. JS
```js
matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
// prettier-ignore
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
```
2. JSX
```jsx
{/* prettier-ignore */}
```
3. HTML
```html
hello world
```
4. CSS
```css
/* prettier-ignore */
.my ugly rule
{
}
```
5. Markdown
```md
Do not format this
```
6. YAML
```yml
# prettier-ignore
key : value
hello: world
```
7. For more, please [check](https://prettier.io/docs/en/ignore.html)
## Resources
- [GitHub Actions for Angular](https://github.com/rodrigokamada/angular-github-actions)
- [Angular 20 – What’s New](https://angular.love/angular-20-whats-new)
- [Announcing Angular v20 - Official](https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301)
- [Angular 20—Let the Magic Flow](https://www.telerik.com/blogs/angular-20-let-magic-flow)
- [What's new in Angular 20.0?](https://blog.ninja-squad.com/2025/05/28/what-is-new-angular-20.0/)
- [Angular 20 is Here: Ultimate Guide—Everything You Need to Know About New Features and Performance](https://www.avidclan.com/blog/angular-20-is-here-ultimate-guide-everything-you-need-to-know-about-new-features-and-performance)
- [Angular Roadmap - Official](https://angular.dev/roadmap)
- [The `package.json` guide](https://flaviocopes.com/package-json/#author)