Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
angular-media-preview
Advanced tools
Don't let your users upload the wrong media!
Weekly downloads
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 4 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
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.