User Guide - Web Persist

6. Storing File objects

This exercise will demonstrate how to store a File object. The following demo includes a file uploader and an identifier field for the file. After you enter a file identifier and click 'Store File', you should observe logs in the browser console that the File record was stored; you can expand the JSON object returned in the console to inspect its content.


                
               <!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
            
               <html lang = "en-AU"> <!-- Set the primary language to en-AU -->
    
                  <head>

                     <title>Store File</title> <!-- Set the page title -->
                     
                     <meta name = "robots" content = "noindex, follow">
  
                  </head>


                  <body>

                     <!-- Add the UI elements to the page -->

                     <div style = "margin-top: 7px;">

                        <input id = "input-1" size = "35" type = "text" placeholder = "Identifier (ID)">

                     </div>
                     
                     
                     <div style = "margin-top: 7px;">

                        <input id = "input-2" type = "file" />

                     </div>

    
                     <div style = "margin-top: 20px;">

                        <button id = "button-1">Store File</button>

                     </div>


                     <!-- Include the framework script tag -->
    
                     <script type = "module" src = "https://www.javaika.com/frame/web-persist@main/api.js"></script>
    
    
                     <!-- Run the demo as an ES Module -->

                     <script type = "module">
      
                        const input1 = document.getElementById('input-1');

                        const input2 = document.getElementById('input-2');
            
                  
                        const button1 = document.getElementById('button-1');
                  
                  
                        // Initialize a shorter prefix for referencing.
            
                        const jwp = window.javaika.webPersist;
                        
                        
                        // Listener for button click event.
            
                        button1.addEventListener('click', () => {
                    
                           jwp.storeFileRecord(input1.value, input2.files[0]);
                
                        });
                     
                     
                        // File record stored callback handler.
                     
                        function onFileRecordStored(event)
                        {
                           console.log('[Web Persist] File record stored callback:', event);
                        }
                        
                        
                        // Callback event after file storage.
            
                        document.addEventListener
                        (
                           'javaika.webPersist.fileRecordStored', onFileRecordStored
                        );
     
                     </script>
 
                  </body>
   
               </html>

View Demo Download Demo

Next capability: Discuss how to fetch the stored File record from IndexedDB.