How to display uploaded image via CSS

Question

i want to upload an image via primefaces:fileUpload and then display it on a div for example with css.
I can already save the image on the server:

public void upload() throws IOException, URISyntaxException {
        if (logo != null) {
            File fileImage = new File(System.getProperty("jboss.server.data.dir"), "uploads.png");
            BufferedImage img = ImageIO.read(new ByteArrayInputStream(logo.getContents()));
            if (fileImage.exists()) {
                fileImage.delete();
            }
            ImageIO.write(img, "png", fileImage);
        }
    }

And then i tried to get the web path to the file but that didn't worked:

public String getImagePath(){
        File fileImage = new File(System.getProperty("jboss.server.data.dir"), "uploads.png");
        Set<String> set = FacesContext.getCurrentInstance().getExternalContext().getResourcePaths(fileImage.getAbsolutePath());
        return set.iterator().next();
    }

I need something like this:

/ewarehouse/javax.faces.resource/dynamiccontent.properties.xhtml?ln=primefaces&v=6.2&v=6.2&pfdrid=f52e395e4f38c09a1990e8f9d0c5806d&pfdrt=sc&pfdrid_c=true

Can someone help me or has a other way to do this ?

@JasperdeVries I dont think that will help. I just need to generate the webpath to a file.Or maybe it does help but i dont get it — Z3RP, Dec 07 '18 at 08:38
Yes, @JasperdeVries is right. You decide where you place the file so you can decide how to access it. Nothing special to it. Only thing is that if you need a 'dynamic' path in CSS it is better to put that css part in the xhtml file. A little easier to get it parsed/processed then. https://stackoverflow.com/questions/6925733/how-to-reference-jsf-image-resource-as-css-background-image-url — Kukeltje, Dec 07 '18 at 08:49
@Kukeltje Can i save a image in the resources at runtime? I thought that didn't work. — Z3RP, Dec 07 '18 at 08:54
It sometimes works,but you should not do that. I posted the link as an example on how to use images in CSS. You should not always take things litterally but also look at the 'concepts'. You can save them anywhere in the filesystem or in a database and via a servlet (like @JasperdeVries mentioned) provide a virtual path for it to be downloaded. — Kukeltje, Dec 07 '18 at 08:59
Hi, 'answers' should be in answers and not in edits to the question. And your 'url' with EL in it indeed looks weird and does not seem to be needed at all that way. Why do you do it like that (and 'it does not work other ways' is not the right answer ;-)) Especially since in one location your do `//` instead of `#{'/'}` — Kukeltje, Dec 07 '18 at 09:51
@Kukeltje i did it like cause my url has 2 slashe. I dont know where that comes from but i need to call `/ewarehouse/images//dynamic#/?file=uploads.png` and i didn't know how to escape 2 slashes in a row. Maybe you have a solution for that. — Z3RP, Dec 07 '18 at 11:04

score 0 · Accepted Answer · edited Jan 07 '19 at 09:34

0

It worked for me to create a servlet and refered to the file position.

background-image: url('#{'/'}ewarehouse#{'/'}images//dynamic#{'/'}?file=uploads.png')

In css it look a bit weird but this way it worked Thanks for the answer to @JasperdeVries and @Kukeltje

edited Jan 07 '19 at 09:34

Kukeltje

12,223
4
24
47

answered Dec 07 '18 at 11:05

Z3RP

328
1
16

1

Why do you have the single slashes in 'EL' ? I fail to see the need for that – Kukeltje Dec 07 '18 at 11:22
I failed to escape a single slash so i did it this way – Z3RP Jan 07 '19 at 09:27
why do you (think you) **need** to escape a single slash? – Kukeltje Jan 07 '19 at 09:33

How to display uploaded image via CSS

1 Answers1