Flutter Web Display Microsoft Documents Firebase

Question

I am trying to embed MS Documents in a Flutter Web App. Documents are stored on Firebase Storage. I am using MS Web Viewer to display them in browser.

This works without any problem:

https://view.officeapps.live.com/op/embed.aspx?src=https://file-examples.com/wp-content/uploads/2017/08/file_example_PPT_250kB.ppt

The following two versions where the documents are hosted on Firebase are not working:

https://view.officeapps.live.com/op/embed.aspx?src=https://firebasestorage.googleapis.com/v0/b/tutor-and-learn.appspot.com/o/public%2Ffile_example_PPT_250kB.ppt?alt=media&token=6e293eb9-9f3b-41ab-9969-f936b3c54384

https://view.officeapps.live.com/op/embed.aspx?src=https://storage.googleapis.com/tutor-and-learn.appspot.com/public/file_example_PPT_250kB.ppt?GoogleAccessId=firebase-adminsdk-t47jn%40tutor-and-learn.iam.gserviceaccount.com&Expires=1597309385&Signature=VHbm8U8xlf%2BYybwalAveZtl8FsmEmr6Uml%2BwX%2FR7TOFNqlj%2B8QW1FFSJUNB4qcAzVpEcntLzipT15Zj73B%2FLlSZlQwEU10s5RkJdR5CZeZ6MuF2DUptUbqfnNobdLkizEmwlQ6Bkk4DkDWCd9nRL%2BQ0GLYypBr%2Bxs39bpd8JSuxxACWCjq0Of8qLTBMZQmD%2BgbE8JkMdqvBVOV75A7EQyy1IWqHrRBD7RgVc46IEq4TaO2ZT9h56joJgawqZOt81%2Fkq95YmNWZNOeU9kVRuLpSFsqZru8Ku7aapiFcUXjrjuMWZeC1XCrTK7fwU6A8shNIyHq3bE8RB9a%2BCQnS0llA%3D%3D

Either via Firebase directly nor Google Cloud Storage I get it to work.

The individual links in the above example work without any problems and you can download the file.

https://firebasestorage.googleapis.com/v0/b/tutor-and-learn.appspot.com/o/public%2Ffile_example_PPT_250kB.ppt?alt=media&token=6e293eb9-9f3b-41ab-9969-f936b3c54384

https://storage.googleapis.com/tutor-and-learn.appspot.com/public/file_example_PPT_250kB.ppt?GoogleAccessId=firebase-adminsdk-t47jn%40tutor-and-learn.iam.gserviceaccount.com&Expires=1597309385&Signature=VHbm8U8xlf%2BYybwalAveZtl8FsmEmr6Uml%2BwX%2FR7TOFNqlj%2B8QW1FFSJUNB4qcAzVpEcntLzipT15Zj73B%2FLlSZlQwEU10s5RkJdR5CZeZ6MuF2DUptUbqfnNobdLkizEmwlQ6Bkk4DkDWCd9nRL%2BQ0GLYypBr%2Bxs39bpd8JSuxxACWCjq0Of8qLTBMZQmD%2BgbE8JkMdqvBVOV75A7EQyy1IWqHrRBD7RgVc46IEq4TaO2ZT9h56joJgawqZOt81%2Fkq95YmNWZNOeU9kVRuLpSFsqZru8Ku7aapiFcUXjrjuMWZeC1XCrTK7fwU6A8shNIyHq3bE8RB9a%2BCQnS0llA%3D%3D

I presume the MS Web Viewer can not cope with the URLs. Is there any way I can adapt or change anything in Firebase to get it to work? Looking in Firebase Storage Console the files are listed with the correct type as application/vnd.ms-powerpoint.

Answer 1

Encode the signed URL before adding it to https://view.officeapps.live.com/op/embed.aspx?src=. You can use online tools to encode URLs like https://www.urlencoder.org/