# How to export all children of all selected artboards in an async manner

**URL:** <https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819>\
**Category:** UXP Plugin API\
**Tags:** javascript\
**Created:** [May 10, 2019, 6:10am UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819 "2019-05-10T06:10:05Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![saud](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/saud/32/695_2.png) [@saud](https://forums.creativeclouddeveloper.com/u/saud)\
**Post date:** [May 10, 2019, 6:10am UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/1 "2019-05-10T06:10:05Z")

</div>

I need to first export all selected artboards (their children) in an async manner.  
Can anyone help me out with this?  
much appreciated!  
Edit:  
Further on after the exports are done I’d like to upload them to amazon s3.  
Edit: Can I also see each child’s groupname have a group name?

---

<div class="post-metadata">

**Author:** ![saud](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/saud/32/695_2.png) [@saud](https://forums.creativeclouddeveloper.com/u/saud)\
**Post date:** [May 11, 2019, 2:41am UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/2 "2019-05-11T02:41:16Z")

</div>

@stevekwak Help appreciated!

---

<div class="post-metadata">

**Author:** ![stevekwak](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/stevekwak/32/48_2.png) [@stevekwak](https://forums.creativeclouddeveloper.com/u/stevekwak)\
**Post date:** [May 13, 2019, 2:29pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/3 "2019-05-13T14:29:36Z")

</div>

Try this

```auto
const application = require("application");
const fs = require("uxp").storage.localFileSystem;

async function exportRendition(selection) {
	const folder = await fs.getFolder();
	const arr = await selection.items.map(async item => {
		const file = await folder.createFile(`${item.guid}.png`);
		let obj = {};
		obj.node = item;
		obj.outputFile = file;
		obj.type = "png";
		obj.scale = 2;
		return obj
	})
	const renditions = await Promise.all(arr);
	await application.createRenditions(renditions)
}

module.exports = {
	commands: {
		exportRendition
	}
};

```

---

<div class="post-metadata">

**Author:** ![saud](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/saud/32/695_2.png) [@saud](https://forums.creativeclouddeveloper.com/u/saud)\
**Post date:** [May 14, 2019, 10:01am UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/4 "2019-05-14T10:01:55Z")

</div>

It’s exporting all artboards like this, not their child elements as induviduals. (image attached below)

 ![fb9abb36-46d7-4037-8e13-c56422165932](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/40efb8aecc241f5b309f7eb09d171050e1723c16.png)

---

<div class="post-metadata">

**Author:** ![gdreyv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/gdreyv/32/358_2.png) [@gdreyv](https://forums.creativeclouddeveloper.com/u/gdreyv)\
**Post date:** [May 14, 2019, 1:07pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/5 "2019-05-14T13:07:03Z")

</div>

I suppose you have to do the same for all children, like scenegraph.root.children.map, them the same of all nested children and so on. Classic tree walk 🙂

---

<div class="post-metadata">

**Author:** ![saud](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/saud/32/695_2.png) [@saud](https://forums.creativeclouddeveloper.com/u/saud)\
**Post date:** [May 15, 2019, 9:27am UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/6 "2019-05-15T09:27:53Z")

</div>

Can you give me some example how i can do that.  
My data looks like this

```auto
Artboard ('ui') {
  width: 1920, height: 1080
  global X,Y: -20, 0
  parent: RootNode
  children: [Rectangle, Rectangle, Rectangle, Rectangle, Rectangle]
  fill: ffffffff
} 

```

---

<div class="post-metadata">

**Author:** ![gdreyv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/gdreyv/32/358_2.png) [@gdreyv](https://forums.creativeclouddeveloper.com/u/gdreyv)\
**Post date:** [May 15, 2019, 1:59pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/7 "2019-05-15T13:59:52Z")

</div>

Sure, if you task is that straight forward - just export children of specific artboard then exportRendition function should be updated a bit:  
const folder = await fs.getFolder();  
const scenegraph = require(“scenegraph”);  
const artboard = scenegraph.root.children.filter(ab =\> ab.name === “Name of your artboard”);  
const arr = await artboard.children.map(async …  
and rest of the function goes here.  
Or if you need to export elements from only selected artboards:  
const folder = await fs.getFolder();  
const scenegraph = require(“scenegraph”);  
const artboards = selection.items.filter(node =\> node instanceof scenegraph.Artboard);  
const arr = await artboards.reduce(async (all, ab) =\> {  
const currentTask = ab.children.map(async item =\> { const file … return obj; });  
const current = await Promise.all(currentTask);  
return all.concat(current);  
}; []);  
…  
Code might contain some errors as I didn’t run it.

---

<div class="post-metadata">

**Author:** ![saud](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/saud/32/695_2.png) [@saud](https://forums.creativeclouddeveloper.com/u/saud)\
**Post date:** [May 15, 2019, 4:22pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/8 "2019-05-15T16:22:39Z")

</div>

Thanks a ton for the reply. The code seems to be not working, has some syntax errors.  
Can you please explain at the end of the code what’s this for?

```auto
}; []);

```

---

<div class="post-metadata">

**Author:** ![gdreyv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/gdreyv/32/358_2.png) [@gdreyv](https://forums.creativeclouddeveloper.com/u/gdreyv)\
**Post date:** [May 15, 2019, 4:25pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/9 "2019-05-15T16:25:58Z")

</div>

sorry, of course it should be `}, []);` I just can’t find how to format code here. So in general it’s the of reduce function which looks like collection.reduce(async (all, current) =\> {…}, []); where final [] is an initial value.

---

<div class="post-metadata">

**Author:** ![saud](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/saud/32/695_2.png) [@saud](https://forums.creativeclouddeveloper.com/u/saud)\
**Post date:** [May 15, 2019, 4:28pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/10 "2019-05-15T16:28:17Z")

</div>

I’ll try again.  
here’s how you can format the code.

 ![Screenshot_1](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/c296183a56726bcc32e963fa0e3647431ffb5779.png)

---

<div class="post-metadata">

**Author:** ![saud](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/saud/32/695_2.png) [@saud](https://forums.creativeclouddeveloper.com/u/saud)\
**Post date:** [May 15, 2019, 4:37pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/11 "2019-05-15T16:37:10Z")

</div>

@gdreyv the code is working fine with a single artboard.  
but when selected two artboards it gives this error:

```auto
Plugin TypeError: all.concat is not a function
    at artboards.reduce (C:\Users\Saud\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\develop\draftxr-react\main.js:35175:14)

```

The code looks like this:

```auto
async function exportRendition(selection) {
	const folder = await fs.getFolder();
	const artboards = selection.items.filter(node => node instanceof scenegraph.Artboard);
	const arr = await artboards.reduce(async (all, ab) => {
		const currentTask = ab.children.map(async item => {
			const file = await folder.createFile(`${item.guid}.png`);
			let obj = {};
			obj.node = item;
			obj.outputFile = file;
			obj.type = 'png';
			obj.scale = 2;
			return obj;
		});
		const current = await Promise.all(currentTask);
		return all.concat(current);
	}, []);
	const renditions = await Promise.all(arr);
	await application.createRenditions(renditions);
}

```

---

<div class="post-metadata">

**Author:** ![gdreyv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/gdreyv/32/358_2.png) [@gdreyv](https://forums.creativeclouddeveloper.com/u/gdreyv)\
**Post date:** [May 15, 2019, 5:28pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/13 "2019-05-15T17:28:59Z")

</div>

```auto
const folder = await fs.getFolder();
	const artboards = selection.items.filter(node => node instanceof scenegraph.Artboard);
	const arr = await artboards.reduce(async (all, ab) => {
		const currentTask = ab.children.map(async item => {
			const file = await folder.createFile(`${item.guid}.png`);
			let obj = {};
			obj.node = item;
			obj.outputFile = file;
			obj.type = 'png';
			obj.scale = 2;
			return obj;
		});
                const current = await Promise.all(currentTask);
		return (await all).concat(current);
	}, []);
	const renditions = await Promise.all(arr);
	await application.createRenditions(renditions);

```

---

<div class="post-metadata">

**Author:** ![saud](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/saud/32/695_2.png) [@saud](https://forums.creativeclouddeveloper.com/u/saud)\
**Post date:** [May 15, 2019, 5:35pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/14 "2019-05-15T17:35:10Z")

</div>

You the man…it’s working!