angular-media-preview

Don't let your users upload the wrong media!

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