Generating PDF and uploading to My Uploads

Answered

Anton Shumin

• October 31, 2018 15:52

I have a HTML/JS application that i am running in showpad. 

At some point, i am generating a JSPDF file, and want to store it inside My Uploads. 

I found a like with samples 
https://showpad.pages.showpad.io/showpad-js-lib/examples/#create-a-pdf-file-and-upload-it-to-my-uploads

But i just can't get it to work. 

The first sample, Displaying users info, never loads onShowpadLibLoaded (i am running it on iPad). So the JS code does absolutely nothing in my build. 
Download example app loads a different project that does nothing except redirecting you to this website. 

Second example Create a PDF file and upload it to My Uploads doesn't even let you to download an example app. The JS code doesnt do anything as well. 

Am i missing some library, do i need to authenticate something? How do i save my freshly created PDF file to My Uploads? 

0

• Official comment

  

  Travis Estill

  • November 15, 2018 17:00
  • Edited

  Hi Anton,

  To close the loop on this thread I wanted to recap what needed to be addressed which we did offline:

  1. The API needed to be enabled. 
  2. The Showpad.js framework also needed to be enabled. 
  3. The Showpad.js framework v7 which contains libraries for uploading files is not yet supported on iOS, so a different approach was needed. Conventional JavaScript and REST API calls would need to be used instead for compatibility on iOS.

  Cheers!
• 

  Travis Estill

  • October 31, 2018 23:52
  • Edited

  Hi Anton, 

  There are a few parts to your question and I want to make sure I don't miss anything :)

   For the inline code examples compared to the example apps, the former is intended only as a reference to demonstrate how you would use the methods listed in https://showpad.pages.showpad.io/showpad-js-lib/reference-v7.html in the context of an existing ES6 Script. The latter is a fully developed example that can be run in Showpad as is. 

  You mentioned you are running the app in Showpad so authentication should already be established. When I upload the "Displaying the user’s info" example app to Showpad and view it from the Web App or via the Showpad iOS app, it works great. I can see that it's getting the current user's info because it says Welcome <my email address> with the option to choose if I'm an admin or a user which is what it's supposed to do. I believe the links used to take you to the respective Admin or User sections of the Help Center, however, the addresses have since changed. 

  The process for generating the PDF for upload depends on how your project is structured. For example, the main.es6.js example provided assumes you are using Node with the 'whatwg-fetch' module and 'jspdf'. The purpose of the example is to show how you would then incorporate the Showpad.js framework along with the Showpad API to post the constructed PDF to the current viewers my uploads. 

  • The first function demonstrates how to conditionally show the "Create" button if the Showpad.js lib is loaded. 
  • The second function demonstrates how to utilize jspdf to create the PDF in memory
  • The third function demonstrates how to pass the config.url from the Showpad.js framework to the correct API endpoint for the current users "My Files" area and how to then send the PDF in memory to a new POST API call. 
  • The fourth function demonstrates how to poll for the status of the file in the processing queue (using whatwg-fetch) and upon completion returns a message to the user that it completed. 

  I hope this helps! If you're willing to share some more information about your project structure, I'd be happy to take a closer look. 

   

  0
• 

  Anton Shumin

  • November 01, 2018 10:33

  Hey Travis, 

  thanks for the fast reply. 
  I am going to rewind a bit. First example

  Displaying the user’s info

  when i download example app , index.html is actually showing a different implementation than thes sample code. There is no Welcome ... 

  This is what the html file generates 

  

   

  That aside, i am just trying to reproduce the result of the first example in showpad. 
  I want to call ShowpadLib.getUserInfo()

  But, 

  window.onShowpadLibLoaded

  
  never seems to fire. 
  
  I've moved all the code inline for simplicity. 
  I even included a button to fire addUserName function in case showpad libraries load much later. 

  This is the file that i am running on showpad 
  https://drive.google.com/file/d/1_7B3tD_5Og107h-ZkfZhPr9gf-66TD-q/view?usp=sharing
  
  This is the code that i've zipped and uploaded to showpad 

  <!-- index.html -->
  <html>
  <head>
      <!-- styles -->
  </head>
  <body>
  <h1>Welcome <span id="name"></span></h1>
  <p  id="loaded">I am not loaded</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <button onclick="addUserName()">Add user name</button>
  
  <script>
  
      // main.es6.js
      window.onShowpadLibLoaded = () => addUserName();
  
      function addUserName () {
          document.getElementById('loaded').innerHTML = 'i am loaded';
          const userInfo = window.ShowpadLib.getUserInfo();
          document.getElementById('name').innerHTML = userInfo.user_name;
      }
  
  
  </script>
  </body>
  </html>
  
  

  The last line never works

  document.getElementById('name').innerHTML = userInfo.user_name;

  What am i missing? 

  0
• 

  Travis Estill

  • November 01, 2018 17:39

  Hi Anton, 

   

  From your screenshot, it looks like that example was taken from running the app locally from your machine's file system.

  To be able to access the Showpad.js framework, you would need to upload the app to Showpad and run it from there. "userInfo.user_name" is defined by the Showpad.js framework so if the framework isn't loaded, the value is undefined. 

  I reviewed the code you provided and it looks like it should work so I uploaded it to my dev environment and sure enough, it works great (after I changed your font color to white since by default, Showpad Apps have a black canvas):

  

  Here's my change:

  <!-- index.html -->
  <html>
  <head>
   <style>
   body {
   color: white;
   }
   </style> 
  </head>
  <body>
  <h1>Welcome <span id="name"></span></h1>
  <p id="loaded">I am not loaded</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <button onclick="addUserName()">Add user name</button>
  
  <script>
  
   // main.es6.js
   window.onShowpadLibLoaded = () => addUserName();
  
   function addUserName () {
   document.getElementById('loaded').innerHTML = 'i am loaded';
   const userInfo = window.ShowpadLib.getUserInfo();
   document.getElementById('name').innerHTML = userInfo.user_name;
   }
  
  
  </script>
  </body>
  </html>

   

  One possibility that could explain why it's not working in your Showpad Account is that API access has not been enabled. This is something the Showpad Support team can help you with. Since this is a public forum, I suggest the following next steps:

  1. Send an email to support@showpad.com
  2. Include the email address that you use to log into Showpad with.
  3. Provide the organization/subdomain
  4. Ask if API access has been enabled. 

  We'll check to make sure it's been enabled for you and if it's not, we can turn it on :)

   

  Cheers! 

  0

Please sign in to leave a comment.