Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
angular-media-preview
Advanced tools
Readme
create a preview for each media file given in input
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.
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.
<media-preview preview-class="img-thumbnail" preview-container="mediaHere" multiple></media-preview>
<div id="myContainer"></div>
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.
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
FAQs
Don't let your users upload the wrong media!
The npm package angular-media-preview receives a total of 5 weekly downloads. As such, angular-media-preview popularity was classified as not popular.
We found that angular-media-preview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.