Preview filecontent before upload.

How can I implement Vaadin Upload to achive a function that can preview the fileContent without call submitUpload();
Now, I can call submitUpload and get the OutputStream of the file and show filecontent out, but the problem is when I call submitUpload() method the upload will clear the file information in the upload component so that I can not upload the file to the server side after I call the preview function, I have to select file again.

Does any one could give me a solution about this.
Much appreciate!

I don’t know if i understood all your requirements but i would do it like this. The Document gets uploaded normally (otherwise you can’t use it in any way, also can’t display it in a component/new window, in your app except maybe in client-side validation). When you’ve received the Upload you display the preview and save the Inputstream in a variable. This way when you then press for example a Save Button you can access this variable to save it e.g. in the Blob field of a Database-Table.

Yes, the way you are doing is what I have done, but the problem is when the inputstream as a variable, the upload field still empty after submitUpload() called. It is not UX enough, because the user could not find the filepath in the upload field.:slight_smile:

I am still not 100% sure what you’re trying to achieve. Is it something like this:
1 User selects File.
2 File shows up in Preview but file is not uploaded yet and filepath is still in upload textfield.
3 User presses Upload-Button.

?
The Problem is that the file did not “reach” the application yet in 2 so displaying it is not really possible (The only way would maybe be to rewrite the client- and serverside of the Upload component. Basically rewriting the component but even then i’m not really sure if you can access it). So if you want to display the file it has to be uploaded but then you loose the filepath as it doesn’t get send to the server for security reasons.
Is the filepath so important for your users?
In one of my application i use a One-Click Upload Button which uploads the file immediately after you select it using the File-Browser. Then i display the preview and the filename (which gets send to the server).

Most likely implementing the preview before upload is not possible on the client side without browser plugins or at least the user giving the page some extra permissions - browsers block the required operations for security reasons. I might be wrong, though.

Yes, I think you are right, it is not really necessary to have this feature. The way you did is good advise for me. :slight_smile:

Hmm, I agree with you, that is why I post this question, because I am not sure is it really impossible.