<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## AssetManager

You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]

```js
const editor = grapesjs.init({
 assetManager: {
   // options
 }
})
```

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

```js
const assetManager = editor.AssetManager;
```

## Available Events

*   `asset:add` - Added new asset. The [Asset] is passed as an argument to the callback.
*   `asset:remove` - Asset removed. The [Asset] is passed as an argument to the callback.
*   `asset:update` - Asset updated. The updated [Asset] and the object containing changes are passed as arguments to the callback.
*   `asset:upload:start` - Before the upload is started.
*   `asset:upload:end` - After the upload is ended.
*   `asset:upload:error` - On any error in upload, passes the error as an argument.
*   `asset:upload:response` - On upload response, passes the result as an argument.
*   `asset` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.

## Methods

*   [add][2]
*   [get][3]
*   [getAll][4]
*   [getAllVisible][5]
*   [remove][6]
*   [store][7]
*   [load][8]
*   [getContainer][9]
*   [getAssetsEl][10]
*   [addType][11]
*   [getType][12]
*   [getTypes][13]

[Asset]: asset.html

## open

Open the asset manager.

### Parameters

*   `options` **[Object][14]?** Options for the asset manager. (optional, default `{}`)

    *   `options.types` **[Array][15]<[String][16]>** Types of assets to show. (optional, default `['image']`)
    *   `options.select` **[Function][17]?** Type of operation to perform on asset selection. If not specified, nothing will happen.

### Examples

```javascript
assetManager.open({
 select(asset, complete) {
   const selected = editor.getSelected();
   if (selected && selected.is('image')) {
     selected.addAttributes({ src: asset.getSrc() });
     // The default AssetManager UI will trigger `select(asset, false)` on asset click
     // and `select(asset, true)` on double-click
     complete && assetManager.close();
   }
 }
});
// with your custom types (you should have assets with those types declared)
assetManager.open({ types: ['doc'], ... });
```

## close

Close the asset manager.

### Examples

```javascript
assetManager.close();
```

## add

Add new asset/s to the collection. URLs are supposed to be unique

### Parameters

*   `asset` **([String][16] | [Object][14] | [Array][15]<[String][16]> | [Array][15]<[Object][14]>)** URL strings or an objects representing the resource.
*   `opts` **[Object][14]?** Options (optional, default `{}`)

### Examples

```javascript
// As strings
assetManager.add('http://img.jpg');
assetManager.add(['http://img.jpg', './path/to/img.png']);

// Using objects you can indicate the type and other meta informations
assetManager.add({
 // type: 'image',	// image is default
	src: 'http://img.jpg',
	height: 300,
width: 200,
});
assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);
```

Returns **[Asset]** 

## get

Return asset by URL

### Parameters

*   `src` **[String][16]** URL of the asset

### Examples

```javascript
const asset = assetManager.get('http://img.jpg');
```

Returns **([Asset] | null)** 

## getAll

Return the global collection, containing all the assets

Returns **Collection<[Asset]>** 

## getAllVisible

Return the visible collection, which contains assets actually rendered

Returns **Collection<[Asset]>** 

## remove

Remove asset

### Parameters

*   `asset` **([String][16] | [Asset])** Asset or asset URL
*   `opts`  

### Examples

```javascript
const removed = assetManager.remove('http://img.jpg');
// or by passing the Asset
const asset = assetManager.get('http://img.jpg');
assetManager.remove(asset);
```

Returns **[Asset]** Removed asset

## store

Store assets data to the selected storage

### Parameters

*   `noStore` **[Boolean][18]** If true, won't store

### Examples

```javascript
var assets = assetManager.store();
```

Returns **[Object][14]** Data to store

## load

Load data from the passed object.
The fetched data will be added to the collection.

### Parameters

*   `data` **[Object][14]** Object of data to load (optional, default `{}`)

### Examples

```javascript
var assets = assetManager.load({
	assets: [...]
})
```

Returns **[Object][14]** Loaded assets

## getContainer

Return the Asset Manager Container

Returns **[HTMLElement][19]** 

## getAssetsEl

Get assets element container

Returns **[HTMLElement][19]** 

## render

Render assets

### Parameters

*   `assts`  
*   `assets` **[array][15]** Assets to render, without the argument will render all global assets

### Examples

```javascript
// Render all assets
assetManager.render();

// Render some of the assets
const assets = assetManager.getAll();
assetManager.render(assets.filter(
 asset => asset.get('category') == 'cats'
));
```

Returns **[HTMLElement][19]** 

## addType

Add new type. If you want to get more about type definition we suggest to read the [module's page][20]

### Parameters

*   `id` **[string][16]** Type ID
*   `definition` **[Object][14]** Definition of the type. Each definition contains
    `model` (business logic), `view` (presentation logic)
    and `isType` function which recognize the type of the
    passed entity

### Examples

```javascript
assetManager.addType('my-type', {
 model: {},
 view: {},
 isType: (value) => {},
})
```

## getType

Get type

### Parameters

*   `id` **[string][16]** Type ID

Returns **[Object][14]** Type definition

## getTypes

Get types

Returns **[Array][15]** 

[1]: https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js

[2]: #add

[3]: #get

[4]: #getall

[5]: #getallvisible

[6]: #remove

[7]: #store

[8]: #load

[9]: #getcontainer

[10]: #getassetsel

[11]: #addtype

[12]: #gettype

[13]: #gettypes

[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

[19]: https://developer.mozilla.org/docs/Web/HTML/Element

[20]: /modules/Assets.html