Plain javascript media selector.
npm i simple-media-manager
// OR
yarn add simple-media-manager
<section class="app"></section>
<button id="selectImages">Open</button>
import MediaManager from 'simple-media-manager'
import 'simple-media-manager/src/media-manager.sass'
const mediaManager = new MediaManager()
mediaManager.init({
elements: {
wrapper: document.querySelector('.wrapper')
},
settings: {
// Default: true, Show dark overlay over entire screen to highlight media-manager popup
showOverlay: true,
// Default: -1, Limit the amount of items that can be selected. -1 indicates an unlimited amount of selected items
maxSelectedItems: -1
},
source: {
resources: [{path: 'https://unsplash.it/100/100?random'}, {path: 'https://unsplash.it/100/100?random'}]
},
events: {
// Fires when the user presses "Confirm". The callback receives an array with the paths of all selected items.
onConfirm: selectedPaths => {
console.log(selectedPaths)
},
// Fires when the file input field fires a "change" event. The callback receives the event object
onFileSelectionChanged: changeEvent => {
console.log(changeEvent)
},
// Fires when the user presses "Cancel".
onCancel: () => {
console.log('Closed media manager popup')
},
}
})
// Toggle media manager when the button is clicked.
document.querySelector('#selectImages').addEventListener('click', () => {
mediaManager.toggle()
})
If you prefer importing the styles in a separate sass file use the following import statement.
@import "~simple-media-manager/src/media-manager"
1: Fork the repository
2: Install the dependencies
npm install
// or
yarn install
3: start webpack
npm run dev
// or
yarn dev
- Yarn
- Webpack
- babel-loader
- css-loader
- sass-loader