2

I'm writing this post because I need some help. I'm having trouble display an image depending on a specific path in my App.

Basically what it's doing: I have a module named Sector, and each Sector can have an image related to it. When I use the Upload component of Vaadin, I save the path of the image to a table in my database so that it can display the picture chosen before.

The actual path of the image is weird, it seems that Vaadin copies the image to a dynamic random folder. It seems logical that it can't use the actual path of the image.

But here's the problem: The path is well entered in the Database, but when I reload the page (F5), Vaadin can't shows the image anymore. Which upsets me since it should display it well.

The path that Vaadin creates with the uploaded image : VAADIN/dynamic/resource/2/c1ef7b9d-8f2b-4354-a97e-fe1fd4e868e7/551434.jpg

I can put some code if it can help.

The screenshots show what it's doing once I'm refreshing the browser page.

The image is being uploaded

After refreshing the page

Here is the part of the code where I handle the upload image:

upload.addSucceededListener(e -> { Component component = createComponent(e.getMIMEType(), e.getFileName(), buffer.getInputStream()); showOutput(e.getFileName(), component, output); //imgUpload = (Image) component; InputStream inputStream = buffer.getInputStream(); targetFile = new File(PATH + currentProjetId + "\\secteur" + currentSecId + "\\photoSec.png"); try { FileUtils.copyInputStreamToFile(inputStream, targetFile); } catch (IOException e1) { e1.printStackTrace(); Notification.show("Error"); } System.out.println("PATH : " + targetFile.getPath()); });
Improve this question
3
  • You have to store the uploaded image. This is just a temporary URL Commented May 5, 2021 at 12:38
  • Can you modify the question and share the code of how you're handling the upload? Commented May 5, 2021 at 13:13
  • I've added the part of the code where I handle the upload. Commented May 6, 2021 at 7:14

1 Answer 1

Reset to default
3

I think you are using an in-memory resource that's discarded when you refresh the view. You have to take the contents of the file and save it in a file inside a directory in the server's file system. Here's an example:

FileBuffer receiver = new FileBuffer(); Upload upload = new Upload(receiver); upload.setAcceptedFileTypes("text/plain"); upload.addSucceededListener(event -> { try { InputStream in = receiver.getInputStream(); File tempFile = receiver.getFileData().getFile(); File destFile = new File("/some/directory/" + event.getFileName()); FileUtils.moveFile(tempFile, destFile); } catch (IOException e) { e.printStackTrace(); Notification.show("Error"). } });
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Okay, thanks. I've succeeded in saving the image into a specific folder inside the app directory (actualy it's in src/main/resources/META-INF/resources/photos). I read on that link that it was the place for static images. But I can't create an Image out of that path now. It's like it doesn't know where to look for the image. I can put some screens about the path and how I create the image if it helps you understand it. I'm sorry if my english isn't great.
During project compilation src/main/resources is copied to the target/classes folder (in this case to target/classes/META-INF/resources/photos) so during execution you won't get the uploaded file as a resource through there. The file should be stored somewhere else on the file system and loaded from there and made into a StreamResource for serving during execution.
Okay, it's a bit blurry for me, would it be possible to have an example using the StreamResource thing? Because, from what I understand, I can't create an image from the copied File because it's not stored at a correct place. But where and how should I store it?
The target file could be anywhere on the disk and then you can read it to a inputStream File imageFile = new File("my/downloaded/file.jgp"); -> InputStream targetStream = FileUtils.openInputStream(imageFile); that is then used for the StreamResource
Okay so if I understand correctly: - When the user uploads an image, I copy the file to a directory /home/user/photos as an example. - I store the path of the File in my Database - When he goes to the view where I need to display the image: I create an InputStream with the image, to then use StreamResource to display the content Is that it? And if you know it, could you explain to me how to use that StreamResource ? Thanks by the way.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.