Download All Images From PowerApps To Local Computer Using Script

Introduction

In this article, we will learn how to save or download all images from PowerApps using javascript. Sometimes you may need to save all images from PowerApps to your local computer. It is difficult to inspect each image from debugger tool or manually downloading the images. Even if you save the .msapp file, you will need to manually rename the files to match the name with the name of images used in app.

In this article, we will run a small script in the browser console which will download all images from PowerApps in single execution that too with the image names preserved.

Implementation

Step 1 - Open the app in Edit mode and open the debugger tools

To open the debugger tools, right click anywhere on the app in gray color area as shown below and click on Inspect.

Step 2 - Set the JavaScript Context

PowerApps loads all images in preloadStudio context. So select the same in your debugger tool as shown below:

Note: Sometimes, your script might not work on this context, so try with null context which will be available just below this preloadStudio context in that dropdown. Watch the GIF animation in the below steps.

Step 3

Load FileSaver script

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js";
$("head").append(s);

Step 4

Script to Download Images

function pause(msec) {
    return new Promise(
        (resolve, reject) => {
            setTimeout(resolve, msec || 1000);
        });
}
async function downloadAll(elements) {
    var count = 0;
    for (var e in elements) {
        var name = $(elements[e]).find('label').text();
        var ImgLink = $(elements[e]).find('img').attr('src');
        if (name && name !== '') {
            saveAs(ImgLink, name);
        }
        if (++count >= 10) {
            await pause(1000);
            count = 0;
        }
    }
}
downloadAll($(".ms-List-cell"));

Steps in GIF

Output