How to import

For full code, check out our live demo

We support importing the following formats

• MJML (xml format)
• MJML (json format)
• easy-email json (open source version)
• easy-email-pro json (business version)

EditorHeader.tsx

const { values, submit, setFieldValue, mergetagsData, reset, dirty } =
  useEditorContext();

const onImportMJML = async () => {
  const uploader = new Uploader(() => Promise.resolve(""), {
    accept: "text/mjml",
    limit: 1,
  });

  const [file] = await uploader.chooseFile();
  const reader = new FileReader();
  const pageData = await new Promise<[string, EmailTemplate["content"]]>(
    (resolve, reject) => {
      reader.onload = function (evt) {
        if (!evt.target) {
          reject();
          return;
        }
        try {
          const pageData = mjmlToJson(evt.target.result as any);
          resolve([file.name, pageData]);
        } catch (error) {
          reject();
        }
      };
      reader.readAsText(file);
    }
  );

  reset({
    subject: pageData[0],
    content: pageData[1],
  });
};

const onImportMJMLJSON = async () => {
  const uploader = new Uploader(() => Promise.resolve(""), {
    accept: "application/json",
    limit: 1,
  });

  const [file] = await uploader.chooseFile();
  const reader = new FileReader();
  const pageData = await new Promise<[string, EmailTemplate["content"]]>(
    (resolve, reject) => {
      reader.onload = function (evt) {
        if (!evt.target) {
          reject();
          return;
        }
        try {
          const pageData = mjmlToJson(
            JSON.parse(evt.target.result as any) as any
          );
          resolve([file.name, pageData]);
        } catch (error) {
          reject();
        }
      };
      reader.readAsText(file);
    }
  );

  reset({
    subject: pageData[0],
    content: pageData[1],
  });
};

const onImportJSON = async () => {
  const uploader = new Uploader(() => Promise.resolve(""), {
    accept: "application/json",
    limit: 1,
  });

  const [file] = await uploader.chooseFile();
  const reader = new FileReader();
  const emailTemplate = await new Promise<EmailTemplate>((resolve, reject) => {
    reader.onload = function (evt) {
      if (!evt.target) {
        reject();
        return;
      }
      try {
        const template = JSON.parse(evt.target.result as any) as EmailTemplate;
        resolve(template);
      } catch (error) {
        reject();
      }
    };
    reader.readAsText(file);
  });

  reset({
    subject: emailTemplate.subject,
    content: emailTemplate.content,
  });
};

const onImportEasyEmailJSON = async () => {
  const uploader = new Uploader(() => Promise.resolve(""), {
    accept: "application/json",
    limit: 1,
  });

  const [file] = await uploader.chooseFile();
  const reader = new FileReader();
  const emailTemplate = await new Promise<EmailTemplate>((resolve, reject) => {
    reader.onload = function (evt) {
      if (!evt.target) {
        reject();
        return;
      }
      try {
        const template = JSON.parse(evt.target.result as any);
        const content = easyEmailToEasyEmailPro(template.content);
        if (!template.content) {
          Message.error(`Invalid template, need content params`);
          reject();
          return;
        }

        resolve({
          subject: template.subject,
          content: content,
        });
      } catch (error) {
        console.log(error);
        reject();
      }
    };
    reader.readAsText(file);
  });

  reset({
    subject: emailTemplate.subject,
    content: emailTemplate.content,
  });
};