Socket
Socket
Sign inDemoInstall

angular-media-preview

Package Overview
Dependencies
1
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-media-preview

Don't let your users upload the wrong media!


Version published
Maintainers
1
Weekly downloads
4

Weekly downloads

Readme

Source

angular-media-preview

create a preview for each media file given in input

DEMO

Getting started:

Download it using npm with the following command:

npm i angular-media-preview

or clone it from GitHub.

Add the script to your HTML page:

<script type="text/javascript" src="angular-media-preview.module.js"></script>

and add the module to your app dependencies:

angular.module('app', ['angular-media-preview')

and you are ready to use the new directive.


Basic usage:

Add the directive to the input where you want to preview media files.

<!-- without ng-model -->
<media-preview></media-preview>

<!-- with ng-model -->
<media-preview model="myModel"></media-preview>

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 can use in the attribute both a HTML element or a ID that refers to it.

If the image load fails the module will use a default icon, called "broken image" taken from Google Icons under the CC-BY License.

Passing element ID:
<media-preview preview-class="img-thumbnail" preview-container="mediaHere" multiple></media-preview>
<div id="myContainer"></div>
Passing a $scope HTML element:

If you want you can pass a HTML Element created in the $scope:

app.controller('MainCtrl', function($scope) {
  $scope.theContainer = angular.element(document.createElement('div'));
  $scope.theContainer.addClass('myClass');
})

and in the HTML template:

<media-preview 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:
  • preview-container: the container that holds the preview elements
  • container-class: the class to be added to the preview container
  • preview-class: the class to be added to the preview element
  • multiple: specify when the input should accept multiple files

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

Keywords

FAQs

Last updated on 12 Oct 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc