barisbikmaz/filepicker.html

## filepicker.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

        <title>file picker</title>

        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                display: flex;
                justify-content: center;
            }

            iframe {
                border: 1px;
            }
        </style>

        <script
            type="text/javascript"
            src="https://res.cdn.office.net/teams-js/2.12.0/js/MicrosoftTeams.min.js"
        ></script>
    </head>
    <body>
        <iframe id="pickerFrame" width="80%" height="50%"></iframe>

        <script type="text/javascript">
            var originDomain='https://localhost:9000';
            var sharePointDomain='tenant.sharepoint.com';
            var accessToken='a valid accessToken with files.read.all Sites.Read.All scope';

            microsoftTeams.app.initialize().then(function () {
                const pickerFrame = document.getElementById('pickerFrame');

                const options = {
                    sdk: '8.0',
                    entry: {
                        sharePoint: {},
                    },
                    messaging: {
                        origin: originDomain,
                        channelId: '1234567',
                    },
                    typesAndSources: {
                        mode: 'folders',
                    },
                };

                const queryString = new URLSearchParams({
                    filePicker: JSON.stringify(options),
                });

                const pickerUrl = `https://${sharePointDomain}/_layouts/15/FilePicker.aspx?${queryString}`;

                const form = pickerFrame.contentDocument.createElement('form');
                form.setAttribute('action', pickerUrl);
                form.setAttribute('method', 'POST');

                const tokenInput =
                    pickerFrame.contentDocument.createElement('input');
                tokenInput.setAttribute('type', 'hidden');
                tokenInput.setAttribute('name', 'access_token');
                tokenInput.setAttribute('value', accessToken);
                form.appendChild(tokenInput);

                pickerFrame.contentDocument.body.append(form);
                form.submit();
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

	<title>file picker</title>

	<style>
	html,
	body {
	height: 100%;
	width: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	}

	iframe {
	border: 1px;
	}
	</style>

	<script
	type="text/javascript"
	src="https://res.cdn.office.net/teams-js/2.12.0/js/MicrosoftTeams.min.js"
	></script>
	</head>
	<body>
	<iframe id="pickerFrame" width="80%" height="50%"></iframe>

	<script type="text/javascript">
	var originDomain='https://localhost:9000';
	var sharePointDomain='tenant.sharepoint.com';
	var accessToken='a valid accessToken with files.read.all Sites.Read.All scope';

	microsoftTeams.app.initialize().then(function () {
	const pickerFrame = document.getElementById('pickerFrame');

	const options = {
	sdk: '8.0',
	entry: {
	sharePoint: {},
	},
	messaging: {
	origin: originDomain,
	channelId: '1234567',
	},
	typesAndSources: {
	mode: 'folders',
	},
	};

	const queryString = new URLSearchParams({
	filePicker: JSON.stringify(options),
	});

	const pickerUrl = `https://${sharePointDomain}/_layouts/15/FilePicker.aspx?${queryString}`;

	const form = pickerFrame.contentDocument.createElement('form');
	form.setAttribute('action', pickerUrl);
	form.setAttribute('method', 'POST');

	const tokenInput =
	pickerFrame.contentDocument.createElement('input');
	tokenInput.setAttribute('type', 'hidden');
	tokenInput.setAttribute('name', 'access_token');
	tokenInput.setAttribute('value', accessToken);
	form.appendChild(tokenInput);

	pickerFrame.contentDocument.body.append(form);
	form.submit();
	});
	</script>
	</body>
	</html>