Unsupported file type when importing previously exported zip into PageBuilder pages

[hemzet]

Version

5.37.1

Operating System

Win10

Browser

Firefox

What are the steps to reproduce this bug?

1. export one or more published pages in PageBuilder
2. download Webiny zip file containing exported pages
3. click page import button in PageBuilder
4. select Webiny zip file
5. Upload previously downloaded Webiny zip file into FileManager
6. Error message "unsupported file type"

What is the expected behavior?

file can be uploaded and pages will be restored

What do you see instead?

error message "unsupported file type"

https://files.slack.com/files-pri/T0140N4DP36-F05N7N4HPNF/image.png

Additional information

No response

Possible solution

No response

[mattsollie]

Workaround that worked for me is to use the URL import instead of file upload

[Pavel910]

@mattsollie we finally got to investigating this, since no one on the team uses Windows, it was a bit of a challenge.
The fix is already there and will be released with 5.42.1. The problem was that we only whitelisted application/zip on the input, and on Windows, when you download a ZIP file, it ends up being application/x-zip-compressed, which we were unaware of.

If you're not planning to upgrade to 5.42.1, there's a way to fix this in your project using component decoration. Here's how you would approach it:

// apps/admin/src/App.tsx

import React from "react";
import { Admin } from "@webiny/app-serverless-cms";
import { FileManagerRenderer } from "@webiny/app-admin";
import { Cognito } from "@webiny/app-admin-users-cognito";
import { Extensions } from "./Extensions";
import "./App.scss";

const WhitelistZipMimeTypes = FileManagerRenderer.createDecorator(
  (Original) => {
    const otherZipTypes = ["application/x-zip-compressed", "application/x-zip"];

    const withZipTypes = (accept: string[] | undefined) => {
      if (!Array.isArray(accept)) {
        return undefined;
      }

      return accept.includes("application/zip")
        ? [...accept, ...otherZipTypes]
        : accept;
    };

    return function WhitelistZipMimeTypes(props) {
      // Here you can intercept all props being passed to the FileManager.

      // For example: if `accept` prop contains "application/zip", add other ZIP mime types.
      return <Original {...props} accept={withZipTypes(props.accept)} />;
    };
  }
);

export const App = () => {
  return (
    <Admin>
      <Cognito />
      <Extensions />
      <WhitelistZipMimeTypes />
    </Admin>
  );
};