angular-media-preview - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "angular-media-preview",
-  "version": "1.0.0",
-  "description": "create a preview for each media present in input type file",
+  "version": "1.0.1",
+  "description": "create a preview for each media file given in input",
   "main": "index.js",
   "directories": {
-    "example": "example",
-    "test": "test"
+    "example": "example"
   },
@@ -19,4 +18,9 @@ "scripts": {
     "angularjs",
-    "image-preview",
-    "media-preview"
+    "media-preview",
+    "images",
+    "preview",
+    "html",
+    "input",
+    "type",
+    "file"
   ],
@@ -23,0 +27,0 @@ "author": "codekraft-studio",

README.md

 # angular-media-preview
-### create a preview for each selected file
+### create a preview for each media file given in input
+## [DEMO](http://www.codekraft.it/demos/angular-media-preview/)
 
-**Getting started:**
-
-Change to the directive file with your module appname.
-
-```javascript
-angular.module('myApp')
-
-  .directive(...)
+## Getting started:
+Download it using npm with the following command:
+```bash
+npm i angular-media-preview
 ```
-and load the script it in your HTML.
+or clone it from GitHub.
+Load the script to your HTML page:
 ```html
-<script type="text/javascript" src="mediapreview.directive.js"></script>
+<script type="text/javascript" src="angular-media-preview.module.js"></script>
 ```
+and add the module to your app dependencies:
 
-**Basic setup:**
+```javascript
+angular.module('app', ['angular-media-preview')
+```
+and you are ready to go.
 
-Add the directive to input where you want to listen.
+---
 
+## Basic usage:
+
+Add the directive to the input where you want to preview media files.
+
 ```html
 <input type="file" ng-model="myUpload" media-preview>
 ```
-Now when some files are selected, the directive will create a preview and display in a container.
-You can specify a custom container adding the attribute: __preview-container__, like so:
+
+Now when some files are selected, the directive will create a preview and display (by default) in a container above the input tag.
+
+You can specify a custom container using the attribute __preview-container__ in the directive. You use in the attribute both a HTML element or a ID that refers to it.
+
+#### Passing element ID
+
 ```html
 <input type="file" ng-model="myUpload" preview-container="myContainer" media-preview>
+
+<div id="myContainer"></div>
 ```
+#### Passing a $scope HTML element
 
-The directive will add or override the __accept__ attribute to match only the following accepted media types: audio, image, videos.
+If you want to pass a element from the $scope:
 
-And that's it, with this basic configuration you can start trying it by selecting some media file on your computer.
+```javascript
+app.controller(function($scope) {
+  $scope.theContainer = angular.element(document.createElement('div'));
+  $scope.theContainer.addClass('myClass');
+  // do what you want
+})
+```
+and in the HTML template:
+```html
+<input type="file" ng-model="myUpload" preview-container="theContainer" media-preview>
+```
 
+The directive will add or override if not found the input __accept__ attribute to match only the following accepted media types: audio files, images, videos.
+
+And __that's it__, you can try it in the demo page.
+
 **Customizations:**
@@ -40,10 +68,7 @@ * __preview-container__: the container that holds the preview elements
 
-If one of the attributes above is specified will override the default behaviours.
+---
 
 __IMPORTANT: be sure to have a model bind to your input (attribute ng-model), otherwise the directive will not work!__
 
-__The directive takes care to update your model value, so you don't have to write your own one.__
-
-Check the [example](https://github.com/codekraft-studio/angular-media-preview/tree/master/example) too see how it works!
-
-Developed by [codekraft-studio](http://codekraft.it)
+__The directive takes care to update your model value on change, so you don't have to write your own one.__
+See the issue: [#1375](https://github.com/angular/angular.js/issues/1375)

Fixed alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

74

increased by51.02%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

461168

decreased by-30.29%

Number of package files

5

decreased by-44.44%

Lines of code

1924

decreased by-57.37%

No dependency changes