From 51e29c567d2531fef37ce40932bc56641b20a255 Mon Sep 17 00:00:00 2001 From: Anthony Rivas Date: Fri, 27 Dec 2019 15:54:13 -0700 Subject: [PATCH 1/4] Modifying the existing element to support the native drag and drop for the file input --- .../src/lib/file-input/file-input.component.css | 9 ++++----- .../src/lib/file-input/file-input.component.html | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/libs/material-file-input/src/lib/file-input/file-input.component.css b/libs/material-file-input/src/lib/file-input/file-input.component.css index 5041d90..77a92fd 100755 --- a/libs/material-file-input/src/lib/file-input/file-input.component.css +++ b/libs/material-file-input/src/lib/file-input/file-input.component.css @@ -1,17 +1,16 @@ :host { display: inline-block; + width: 100%; } :host:not(.file-input-disabled) { cursor: pointer; } input { - width: 0px; - height: 0px; opacity: 0; - overflow: hidden; - position: absolute; - z-index: -1; + display: block; + height: 100%; + width: 100%; } .filename { diff --git a/libs/material-file-input/src/lib/file-input/file-input.component.html b/libs/material-file-input/src/lib/file-input/file-input.component.html index 2a4e7a6..a9f4ff9 100755 --- a/libs/material-file-input/src/lib/file-input/file-input.component.html +++ b/libs/material-file-input/src/lib/file-input/file-input.component.html @@ -1,2 +1,2 @@ - + {{ fileNames }} From 7018d32e8a23ecabd03ac337e922ead0680c8865 Mon Sep 17 00:00:00 2001 From: Anthony Rivas Date: Thu, 14 Jan 2021 13:01:30 -0700 Subject: [PATCH 2/4] adding prepare script --- libs/material-file-input/package.json | 8 ++++---- package.json | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/libs/material-file-input/package.json b/libs/material-file-input/package.json index 9c2c987..3455712 100644 --- a/libs/material-file-input/package.json +++ b/libs/material-file-input/package.json @@ -17,10 +17,10 @@ }, "dependencies": {}, "peerDependencies": { - "@angular/cdk": "^8.1.1 || ^9.0.0", - "@angular/common": "^8.1.3 || ^9.0.0", - "@angular/core": "^8.1.3 || ^9.0.0", - "@angular/material": "^8.1.1 || ^9.0.0" + "@angular/cdk": "^8.1.1 || ^9.0.0 || ^10.0.0", + "@angular/common": "^8.1.3 || ^9.0.0 || ^10.0.0", + "@angular/core": "^8.1.3 || ^9.0.0 || ^10.0.0", + "@angular/material": "^8.1.1 || ^9.0.0 || ^10.0.0" }, "ngPackage": { "lib": { diff --git a/package.json b/package.json index 8081748..54c4b53 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "clean": "rm -rf dist", "build": "ng build", "build:lib": "ng-packagr -p libs/material-file-input/package.json && cp README.md dist/material-file-input", + "prepare": "npm run build:lib", "test": "ng test", "test:once": "ng test material-file-input --watch=false", "lint": "./node_modules/.bin/nx workspace-lint && ng lint", From a265974443e078c1376ad93e359f6856eefab580 Mon Sep 17 00:00:00 2001 From: Anthony Rivas Date: Thu, 14 Jan 2021 13:31:30 -0700 Subject: [PATCH 3/4] Packaging a custom version --- README.md | 34 +++------------------------ libs/material-file-input/package.json | 10 ++++---- package.json | 6 ++--- 3 files changed, 11 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 278e121..38eeb3a 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,11 @@ -[![Build Status](https://travis-ci.org/merlosy/ngx-material-file-input.svg?branch=master)](https://travis-ci.org/merlosy/ngx-material-file-input) -[![npm](https://img.shields.io/npm/dt/ngx-material-file-input.svg)](https://www.npmjs.com/package/ngx-material-file-input) -[![](http://img.badgesize.io/https://unpkg.com/ngx-material-file-input@latest/bundles/ngx-material-file-input.umd.min.js?label=full%20size%20as%20min.js&compression=gzip&style=square&color=02adff)](https://www.npmjs.com/package/ngx-material-file-input) -[![Coverage Status](https://coveralls.io/repos/github/merlosy/ngx-material-file-input/badge.svg)](https://coveralls.io/github/merlosy/ngx-material-file-input) -[![Known Vulnerabilities](https://snyk.io/test/github/merlosy/ngx-material-file-input/badge.svg)](https://snyk.io/test/github/merlosy/ngx-material-file-input) - # material-file-input -This project provides : - -* `ngx-mat-file-input` component, to use inside Angular Material `mat-form-field` -* a `FileValidator` with `maxContentSize`, to limit the file size -* a `ByteFormatPipe` to format the file size in a human-readable format - -For more code samples, have a look at the [DEMO SITE](https://merlosy.github.io/ngx-material-file-input) +This is a custom fork of the original ngx-material-file-input by merlosy. find the original here: https://www.npmjs.com/package/ngx-material-file-input ## Install ``` -npm i ngx-material-file-input +npm i @kamikazebot/ngx-mat-file-input ``` ## API reference @@ -25,7 +13,7 @@ npm i ngx-material-file-input ### MaterialFileInputModule ```ts -import { MaterialFileInputModule } from 'ngx-material-file-input'; +import { MaterialFileInputModule } from '@kamikazebot/ngx-mat-file-input'; @NgModule({ imports: [ @@ -81,19 +69,3 @@ _Output:_ 100 MB | Name | Description | Error structure | | ---------------------------------------------- | ----------------------------------------------- | ----------------------------------------- | | maxContentSize(value: `number`): `ValidatorFn` | Limit the total file(s) size to the given value | `{ actualSize: number, maxSize: number }` | - -# About me - -[@jereyleg](https://twitter.com/jereyleg) - -☆ to show support :) - -# Roadmap - -* drop event to add files -* _ideas?_ - -# Kudos to - -* https://github.com/dherges/ng-packagr -* Jason Aden - Packaging Angular Libraries https://www.youtube.com/watch?v=QfvwQEJVOig diff --git a/libs/material-file-input/package.json b/libs/material-file-input/package.json index 11c268b..94011c4 100644 --- a/libs/material-file-input/package.json +++ b/libs/material-file-input/package.json @@ -1,19 +1,19 @@ { - "name": "ngx-material-file-input", - "version": "2.1.1", + "name": "@kamikazebot/ngx-material-file-input", + "version": "2.1.3", "license": "MIT", "author": { "name": "Jeremy Legros" }, "description": "File input management for Angular Material", - "homepage": "https://merlosy.github.io/ngx-material-file-input/", + "homepage": "https://anthonyrivas.github.io/ngx-material-file-input/", "keywords": ["angular", "material", "file", "input", "mat-form-field"], "bugs": { - "url": "https://github.com/merlosy/ngx-material-file-input/issues" + "url": "https://github.com/anthonyrivas/ngx-material-file-input/issues" }, "repository": { "type": "git", - "url": "https://github.com/merlosy/ngx-material-file-input" + "url": "https://github.com/anthonyrivas/ngx-material-file-input" }, "dependencies": {}, "peerDependencies": { diff --git a/package.json b/package.json index b9c7165..5f9d1d5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "material-file-input", - "version": "2.1.1", + "name": "custom-material-file-input", + "version": "2.1.3", "license": "MIT", "scripts": { "ng": "ng", @@ -18,7 +18,7 @@ "push:demo": "git subtree push --prefix dist/apps/demo-packaged origin gh-pages", "erase:demo": "git push origin --delete gh-pages", "deploy:demo": "npm run commit:demo && npm run push:demo", - "publish:lib": "npm publish dist/material-file-input", + "publish:lib": "npm publish --access public dist/material-file-input", "affected:apps": "./node_modules/.bin/nx affected:apps", "affected:build": "./node_modules/.bin/nx affected:build", "affected:e2e": "./node_modules/.bin/nx affected:e2e", From a9ff300c4f2e149f35c57b56c50f0d9ccf003009 Mon Sep 17 00:00:00 2001 From: Anthony Rivas Date: Thu, 14 Jan 2021 13:31:56 -0700 Subject: [PATCH 4/4] Packaging a custom version --- libs/material-file-input/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/material-file-input/package.json b/libs/material-file-input/package.json index 94011c4..21cff18 100644 --- a/libs/material-file-input/package.json +++ b/libs/material-file-input/package.json @@ -6,7 +6,7 @@ "name": "Jeremy Legros" }, "description": "File input management for Angular Material", - "homepage": "https://anthonyrivas.github.io/ngx-material-file-input/", + "homepage": "https://anthonyrivas.dev/", "keywords": ["angular", "material", "file", "input", "mat-form-field"], "bugs": { "url": "https://github.com/anthonyrivas/ngx-material-file-input/issues"