3

I'm working on a web page that displays a pdf file that needs to be updatable via a (JSF) file upload. My question is, how can I set my webpage up so that this new uploaded file actually takes the place of the old one?

I have the file upload working so that an admin user can upload a different pdf file to replace the one currently displayed, sending the pdf to a folder in my tomcat server, with the same filename as the one previously displayed. I did this because I know you can't save the pdf to a resource file within the web application, as these are not dynamically loaded while the application is running. I am using the following HTML to display the pdf: 

<object id="pdf" data="uploads/folder/replaceable.pdf" type="application/pdf" width="100%" height="100%">
      <p>It appears you don't have a PDF plugin for this browser.
      No biggie... you can <a hRef="uploads/folder/replaceable.pdf" onClick="updatePDF();">click here to
      download the PDF file.</a></p>
</object>

I've seen Uploaded image only available after refreshing the page and How I save and retrieve an image on my server in a java webapp and see that this can be accomplished using <Context> tag to retrieve the file similarly to how I have data="uploads/folder/replaceable.pdf", but I don't know anything about the <Context> tag and haven't been able to get this to work

Community
  • 1
  • 1
Jake Long
  • 706
  • 3
  • 7
  • 17

2 Answers2

0

Not sure if this will work, but I've done an asynchronous upload script using JQuery and Ajax that updates images on the run on a page. This might work with your scenario also.

The basic principle: Create an upload script with JQuery and Blueimp upload library: http://blueimp.github.com/jQuery-File-Upload/

Point the upload to a servlet, JSP page or the such that handles the upload. This page will store the file and what ever is needed, and then provide a callback with JSON or XML data back to the page where the upload was sent from, including the filename of the stored file. Then use JQuery to update the contents of your object on the JSF page.

Note that the filename should change for each upload; Otherwise the browser might try to fetch the old PDF file from cache and there is no change. I can't figure out how to go around this as I'm writing this, so you might need to do some more research on it.

For your convenience, I also wrote a blog post about it that might help you.

Endy
  • 698
  • 3
  • 11
0

I think the problem that you are having is that the browser is caching the PDF file, and even though there is a new file available on the server, the browser is not fetching it. In order to force the browser to fetch the latest version of the PDF file you need to set the expiration header in the HTTP response to a very short time. More information for setting this up in Tomcat can be found here. I believe this is a feature only available since Tomcat 7. For previous versions of Tomcat, you need to roll your own Servlet that modifies the response header, which you can easily find with a bit of googling.

To take a look at the actual HTTP response header, you can use the developer tool built into Chrome or Firebug with Firefox.

Here's the relevant entry in web.xml that you will need:

<!-- EXPIRES FILTER -->
<filter>
    <filter-name>ExpiresFilter</filter-name>
    <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
    <init-param>
        <param-name>ExpiresByType application/pdf</param-name>
        <param-value>access plus 1 minutes</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>ExpiresFilter</filter-name>
    <url-pattern>uploads/folder/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
</filter-mapping>
herrtim
  • 2,697
  • 1
  • 26
  • 36