Convert a local resource link (file:///) to an accesible link (http://) in portlet

Question

How to convert a directory to a link? While I tried to display image using galleria plugin on liferay, it display nothing. The "Inspect element" mode on Google Chrome shows:

enter image description here

I get this message on Chrome:

Not allowed to load local resource: file:///E:/Liferay/liferay-portal-6.1.1-ce-ga2/tomcat-7.0.27/webapps/Xplor-…et/WEB-INF/files/images/130621_JimmJuli_IO9032193908/IO9032193908_0001.jpg

Here is the code:

<div style="background-color: white; padding: 5px; border: 1px black solid;">
    <p:commandButton type="button" value="Show Images" onclick="dialogImg.show()" />
</div>
<p:dialog header="Images" widgetVar="dialogImg" modal="true" draggable="false" resizable="false" width="540" height="370">
    <p:galleria value="#{viewBacking.images}" var="image" panelWidth="510" panelHeight="310" showCaption="true">  
        <p:graphicImage value="#{image}" title="description"/>  
    </p:galleria>
</p:dialog>

The backing bean:

public class ViewBacking {
    private List<String> images;
    public List<String> getImages() {
        return images;
    }

    public ViewBacking() {
        try {
            getImageList();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public void getImageList() {
        images = new ArrayList<String>();
        File[] imageList = getFileList("//images//imgfolder//"); 
        //--> It will returns: E:\Liferay\liferay-portal-6.1.1-ce-ga2\tomcat-7.0.27\webapps\Xplor-portlet\WEB-INF\files\images\imgfolder\IMAGE_NAME.EXT

        for (int i = 0; i < imageList.length; i++) {
            if (imageList[i].isFile())
                images.add("/files/images/" + imageList[i].getName()); //UPDATE
        }
    }

    //This is how I get a directory path
    public File[] getFileList(String path) {
        File folder = new File(getPath(path));
        File[] listOfFiles = folder.listFiles();
        return listOfFiles;
    }
    public String getPath(String fileName) {
        ExternalContext extContext = FacesContext.getCurrentInstance().getExternalContext();
        return extContext.getRealPath("//WEB-INF//files//" + fileName);
    }
}

As you see on the code above, the image source will filled with something like: E:\Liferay\liferay-portal-6.1.1-ce-ga2\tomcat-7.0.27\webapps\Xplor-portlet\WEB-INF\files\images\imgfolder\IMAGE_NAME.EXT, how to make it like http://localhost:8080/IMAGE_LINK? Thanks.

UPDATE

I have tried to change the directory become:

WebContent
 |-- META-INF
 |-- WEB-INF
 |    |-- files
 |    |    `-- ...
 |    `-- web.xml
 |-- files
 |    |-- images
 |    |    `-- foo.png
 |    |    `-- bar.png
 |    |    `-- baz.png
 :

and the galleria still doesn't display the image. While I tried to access it like: http://localhost:8080/files/images/foo.png, the browser returns The requested resource was not found.. And as you see on the code above, the images[] will filled with something like:

/files/images/foo.png
/files/images/bar.png
/files/images/baz.png

But while I am checking on view source mode on Chrome, it returns:

/Xplor-portlet/files/images/foo.png
/Xplor-portlet/files/images/bar.png
/Xplor-portlet/files/images/baz.png

Instead of adding imageList[i].getPath() as a image path, you can use "/Xplor-portlet/WEB-INF/files/images/imgfolder/"+imageList[i].getName() — Pankaj Kathiriya

BalusC BalusC · Accepted Answer · 2013-06-22T13:29:23

Just put them outside /WEB-INF to make them publicly accessible.

E.g.

WebContent
 |-- META-INF
 |-- WEB-INF
 |    |-- files
 |    |    `-- ...
 |    `-- web.xml
 |-- images
 |    |-- foo.png
 |    |-- bar.png
 |    `-- baz.png
 :

This way you can access them like

<p:graphicImage value="/images/foo.png" />
<p:graphicImage value="/images/bar.png" />
<p:graphicImage value="/images/baz.png" />

Just generate exactly those paths "/images/foo.png", "/images/bar.png", "/images/baz.png", etc instead of local disk file system paths. This makes indeed no sense as the endusers visiting your website doesn't necessarily have those files at exactly the same locations of their own disk file system.

Unrelated to the concrete problem, using ExternalContext#getRealPath() for this purpose is a poor practice. It may return null on some server configurations whereby the WAR file is not been expanded on disk, but instead in memory. Rather use ExternalContext#getResourcePaths().

Convert a local resource link (file:///) to an accesible link (http://) in portlet

UPDATE

1 Answers