Joyfill Platform supports Image and PDF handling. You can either utilize your own static asset service (AWS S3, etc.) to generate image urls or you can utilize the Joyfill Platform asset hosting services.

Joyfill Managed

The Joyfill Platform provides Image Upload and PDF to PNG Converter conversion.

Image Uploads

The Image Upload allows you to host image assets that can be used with image fields, page backgrounds, etc. directly with Joyfill.

PDF Uploads

The PDF to PNG Converter allows you to convert a PDF into PNG images and then utilize those images as page backgrounds.

SDK Examples


const Form = () => {
  return (
    <JoyDoc
      mode="edit"
      doc={doc}
      onUploadAsync={async ({ identifier }, fileUploads) => {
        
        //Option 1: Handle PDF Conversion and Image Upload
        if (fileUploads[0]?.type === 'application/pdf') {

          const dataUri = await getDataUriForFileUpload(fileUpload);
          const base64DataUris = await convertPDFPagesToBase64Async(dataUri);
          const fileUploadPromises = base64DataUris?.items?.map(({ url }) => uploadFileAsync(identifier, url));

          const asyncResult = Promise.all(fileUploadPromises);
          
          return asyncResult; //[{url: String}, {url: String}, ...]

        } 
        //Option 2: Handle image field upload
        else {

          const imageUpload = fileUploads[0];
          const dataUri = await getDataUriForFileUpload(imageUpload);
          
          const asyncResult = uploadFileAsync(identifier, dataUri);
          
          return asyncResult; //{url: String}

        }

      }}
    />
  );
  
}

const getDataUriForFileUpload = async (fileUpload) => {

  return new Promise((ful, rej) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileUpload);
    reader.onloadend = async () => {
      ful(reader.result);
    };
  });

};

const convertPDFPagesToBase64Async = async (dataUri) => {

  try {

    const response = await fetch(`${apiUrl}/v1/utilities/pdf/to/png/datauri`, {
      method: 'POST',
      mode: 'cors',
      headers: {
        "Authorization": `Bearer ${userAccessToken}`,
        "Content-Type": 'application/json'
      },
      body: JSON.stringify({ file: dataUri })
    });

    return await response.json();

  } catch (error) {

    console.log(error);
    throw error;

  }

};

const uploadFileAsync = async (docIdentifier, dataUri) => {

  const response = await fetch(`${apiUrl}/v1/documents/${docIdentifier}/files/datauri`, {
    method: 'POST',
    mode: 'cors',
    headers: {
      "Authorization": `Bearer ${userAccessToken}`,
      "Content-Type": 'application/json'
    },
    body: JSON.stringify({ file: dataUri })
  });

  const data = await response.json();

  return data;

};

JS Example: How To Generate Data URI

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
  console.log(reader.result); //Reader.result is the data uri of the file
};