Convert Base64 String to File

Introduction

In this article, you'll learn how to convert a base64 string into a file attachment that can be conveniently downloaded. This approach is useful for transforming encoded data into a usable file format within a form submission.

How does it work?

1. In Form Builder, create a new form, set the FormID and database table name to 'request', and save the form.
2. Add a Text Field, set the ID to 'data'.
   
3. Add a Text Field, set the ID to 'file_name', and configure the Placeholder (i.e. image.png, document.pdf).
   
4. Add a Custom HTML, and configure the Custom HTML by inserting the next step instruction. 
   
5. Add a File Upload in a new Section, set the ID to 'attachment', and enable both the Readonly and Download as Attachment options.
   
6. Go to Settings → Advanced, and choose BeanShell for Post Processing Tool and Both data creation and update for Run Tool on options. 
   
7. Click Next > and paste the provided code below.
   
   

   import java.io.File;
   import java.io.IOException;
   import org.apache.commons.io.FileUtils;
   import org.joget.apps.form.service.FileUtil;
   import org.joget.commons.util.SetupManager;
   import org.joget.commons.util.LogUtil;
   import java.util.Base64;
   import org.joget.apps.app.model.AppDefinition;
   import org.joget.apps.app.service.AppService;
   import org.joget.apps.app.service.AppUtil;
   import org.joget.apps.form.model.FormRow;
   import org.joget.apps.form.model.FormRowSet;
   import org.springframework.context.ApplicationContext;
     
   String formDefId = "request";
   String fileName = "#form.request.file_name#";
   String tableName = "request";
   String id = "#form.request.id#";
   String formUploadField = "attachment";
    
   //generate file from base64
   String base64String = "#form.request.data#";
   byte[] data = Base64.getDecoder().decode(base64String);
    
   //store pdf
   String path = FileUtil.getUploadPath(tableName, id);
   final File file = new File(path + fileName);
   try {
       //save the file into default folder
       FileUtil.storeFile(file, tableName, tableName);
       FileUtils.writeByteArrayToFile(file, data);
        
       //file saved successfully, update the form record to store the file name
       ApplicationContext ac = AppUtil.getApplicationContext();
       AppService appService = (AppService) ac.getBean("appService");
       AppDefinition appDef = AppUtil.getCurrentAppDefinition();
       FormRowSet set = appService.loadFormData(appDef.getAppId(), appDef.getVersion().toString(), formDefId, id);
       FormRow row = set.get(0);
       row.put(formUploadField, fileName);
       set.remove(0);
       set.add(0, row);
       appService.storeFormData(appDef.getAppId(), appDef.getVersion().toString(), formDefId, set, id);
        
   } catch (IOException ex) {
       LogUtil.error("base64ToPDF App", ex, "Cannot generate file");
   }

8. In the List Builder, configure the Formatter for attachment columns by selecting the File Link Datalist Formatter, choose the Request form, and enable the Download as Attachment? options.
   

Expected Outcome

After form submission, the Base64 string is decoded into a file, saved in Joget’s upload directory, the form record is updated, and the file becomes available as a downloadable attachment. This method ensures that any base64 encoded data can be converted into a file and attached to the form submission, making the data easily accessible and downloadable.

Video Tutorial

Download sample app