[Solution for] Create renditions of all children of artboards on the document without using selection

Adobe XD UXP Plugin API
1

In plugin component

const exportRendition = async (selection, documentRoot) => {
	const folder = await fs.getTemporaryFolder();
	let artboardList = [];
	await documentRoot.children.forEach(e => {
		artboardList.push(e);
	});
	const artboardChildren = artboardList.filter(node => node instanceof scenegraph.Artboard);
	const arr = await artboardChildren.reduce(async (all, ab) => {
		const currentTask = ab.children.map(async item => {
			const file = await folder.createFile(`${item.guid}.png`, { overwrite: true });
			const obj = {};
			obj.node = item;
			obj.outputFile = file;
			obj.type = 'png';
			obj.scale = 1;
			return obj;
		});
		const current = await Promise.all(currentTask);
		return (await all).concat(current);
	}, []);
	const renditions = await Promise.all(arr);
	await application.createRenditions(renditions);

	const entries = await folder.getEntries();
	const renderedEntries = [];
	const obj = {};
	let flag = false;
	entries.forEach(entry => {
		for (let i = 0; i < entry.name.length; i++) {
			obj.name = entry.name;
			obj.nativePath = entry.nativePath;
		}
		renderedEntries.push(obj);
		flag = true;
	});

	const images = [];
	if (flag && renderedEntries) {
		const entries = await folder.getEntries();
		entries.forEach(entry => images.push(entry));
	}

	const data = new FormData();
	// data.append('name', 'test value here');
	for (let i = 0; i < images.length; i++) {
		data.append('image', images[i], images[i].name);
	}

	Axios.post(`${devApiURI}/upload`, data, {
		headers: { 'Content-Type': 'multipart/form-data' },
	}).then(res => {
		console.log(res.data);
	});

	// // Display the key/value pairs
	// for (var pair of data.entries()) {
	// 	console.log(pair[0] + ', ' + pair[1]);
	// }
};

This snippet doesn’t include clearing temporary dir after you are done with the data, but you should as XD suggests you to do so.

On the server

const storage = multer.memoryStorage({
	destination: function(req, file, callback) {
		callback(null, '');
	},
});
const multipleUpload = multer({ storage: storage }).array('image');
const upload = multer({ storage: storage }).single('image');

// Router.post('/upload', multipleUpload, function(req, res) {
// 	// console.log(req.body);
// 	console.log(req.file);
// });

Router.post('/upload', multipleUpload, function(req, res) {
	const file = req.files;
	console.log(file);
	let s3bucket = new AWS.S3({
		accessKeyId: process.env.AWS_ACCESS_KEY_ID,
		secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
		region: process.env.AWS_REGION,
	});
	const ResponseData = [];
	s3bucket.createBucket(function() {
		//file storing array for response

		console.log(process.env.AWS_BUCKET_NAME);
		file.map(item => {
			const params = {
				Bucket: process.env.AWS_BUCKET_NAME,
				Key: item.originalname,
				Body: item.buffer,
				ACL: 'public-read',
			};
			s3bucket.upload(params, function(err, data) {
				if (err) {
					SentryErrorHandler(err);
				} else if (data) {
					console.log(data, "'im here'");

					//send res socket here
				}
			});
			console.log(ResponseData);
		});
	});
});

Hope this helps someone!

3 Likes
2

Thanks for sharing this!

2 Likes
3

no worries! You were a ton of help and so was @gdreyv

1 Like