angular-media-preview

angular-media-preview

create a preview for each selected file

Getting started:

Change to the directive file with your module appname.

angular.module('myApp')

  .directive(...)

and load the script it in your HTML.

<script type="text/javascript" src="mediapreview.directive.js"></script>

Basic setup:

Add the directive to input where you want to listen.

<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:

<input type="file" ng-model="myUpload" preview-container="myContainer" media-preview>

The directive will add or override the accept attribute to match only the following accepted media types: audio, image, videos.

And that's it, with this basic configuration you can start trying it by selecting some media file on your computer.

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

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 too see how it works!

Developed by codekraft-studio