file download and preview using multifileupload

I have a program where i can upload, delete file attachments. How can I

  1. download an uploaded file,
  2. view a file when using multiuploads in a table

I have attached a demo program that works to upload multiple files.

Thanks for your help in advance.

demo-fileupload.zip (403.9K)

Hi,
The information on storing and handling files may be found in the documentation:
[url=https://doc.cuba-platform.com/manual-6.1/file_storage.html]https://doc.cuba-platform.com/manual-6.1/file_storage.html[/url] - common information on the platform file storage.
[url=https://doc.cuba-platform.com/manual-6.1/images_recipe.html]https://doc.cuba-platform.com/manual-6.1/images_recipe.html[/url] - sample, where work with files is greatly illustrated.

Also, you can look through the platform source code in IDEA: required functionality is presented on the ‘Administration - External Files’ screen (com.haulmont.cuba.gui.app.core.file.FileBrowser).

As a possible way of how to download the attached file in your project:

  1. Inject the ‘contractAttachment’ table to ‘ContractEdit’ class
    
@Inject
    private Table<ContractAttachment> contractAttachment;
  1. create ‘Download’ button on the ‘contractAttachment’ table

<buttonsPanel>
         <button id="downloadButton"
           caption="Download"
           invoke="onDownloadButtonClick"></button>
 </buttonsPanel>
  1. add the ‘Download’ button click handler
public void onDownloadButtonClick(Component source) {
        FileDescriptor fd = contractAttachment.getSingleSelected().getAttachment();
        if (fd!=null){
            AppConfig.createExportDisplay(ContractEdit.this).show(fd,null);
        }
    }

Files are downloaded by calling the ExportDisplay.show() method.
Now, when the ‘Download’ button is pressed, highlighted attachment will be downloaded.

Thanks, it’s working. I have another question.
I am trying to show pdf file and using the following code but didn’t work:


  public void onShowButtonClick(Component source) {
        FileDescriptor fd = attachTable.getSingleSelected().getAttachment();
        if (fd!=null){
            pdfViewer.setSource(String.format("salesOrder%s.pdf", UUID.randomUUID()),
                    new FileDataProvider(fd));
        }
    }

here pdfViewer is an embedded

XML


 <tab id="docTab"
                 caption="Documents">
                <split height="100%"
                       orientation="horizontal"
                       width="100%">
                    <table id="attachTable"
                           height="100%"
                           width="100%">
                        <actions>
                            <action id="removeFile"
                                    invoke="onRemoveFile"/>
                        </actions>
                        <columns>
                            <column id="attachment"/>
                        </columns>
                        <rows datasource="salesOrderAttachmentsDs"/>
                        <buttonsPanel>
                            <multiUpload id="multiUploadField"/>
                            <button id="btnRemoveFile"
                                    caption="Download"
                                    description="Remove attached file"
                                    icon="font-icon:DOWNLOAD"
                                    invoke="onDownloadButtonClick"/>
                            <button id="btnDisplay"
                                    caption="Show"
                                    description="Display file"
                                    icon="font-icon:EYE"
                                    invoke="onShowButtonClick"/>
                        </buttonsPanel>
                    </table>
                    <groupBox id="pdfBox"
                              height="100%">
                        <embedded id="pdfViewer"
                                  height="100%"
                                  width="100%"/>
                    </groupBox>
                </split>
            </tab>

Hi
Can anyone help, my above code doesn’t display PDF file as pre-view!

See this topic. In the comment at the bottom you find the project of how to preview pdf inline in browser.
[url=]https://www.cuba-platform.com/discuss/t/preview-pdf-selected-in-fileupload-table-in-browser[/url]

Thanks for the sample app. It worked when I connected my iPhone to view the PDF document but didn’t work in my Mac. On the other hand, JPEG file is previewed in Mac but not in my iPhone. I have cleaned and Assembled the project but no improvement! Wonder what could be the reason. Any clue?


 public void onShowButtonClick(Component source) {
        FileDescriptor fd = attachTable.getSingleSelected().getAttachment();
            pdfView.setSource(String.format("pdf-preview%s.pdf", fd.getUuid()), new FileDataProvider(fd));
     }

XML file )partial)


 <tab id="docTab"
                 caption="Documents">
                <split height="100%"
                       orientation="horizontal"
                       width="100%">
                    <table id="attachTable"
                           height="100%"
                           width="100%">
                        <actions>
                            <action id="removeFile"
                                    invoke="onRemoveFile"/>
                        </actions>
                        <columns>
                            <column id="attachment"/>
                        </columns>
                        <rows datasource="salesOrderAttachmentsDs"/>
                        <buttonsPanel>
                            <multiUpload id="multiUploadField"/>
                            <button id="btnRemoveFile"
                                    caption="Download"
                                    description="Remove attached file"
                                    icon="font-icon:DOWNLOAD"
                                    invoke="onDownloadButtonClick"/>
                            <button id="btnDisplay"
                                    caption="Show"
                                    description="Display file"
                                    icon="font-icon:EYE"
                                    invoke="onShowButtonClick"/>
                        </buttonsPanel>
                    </table>
                    <embedded id="pdfView"
                              height="100%"
                              width="100%"/>
                </split>
            </tab>

I’m not sure why it behave like this.
By the way, I only built it to preview pdf, not images.
I have only tried it on Chrome and Firefox on Windows an Android.

Please share experiences on other platforms and devices in this topic here.
You are free to do what you like with the source.
New experience is much welcome.
It will help others in Cuba-platform also.

Hi Mortoza,
Unfortunately, we cannot reproduce the problem. Please, send us more details about the version of your OS and browser. Moreover, which version of the platform do you use?

Hi
I’m using CUBA 6.3RC2
Browser- Mac Navigator all latest versions

Hi
I have tested this file preview in several environments and browsers. Here is the result which is consistent with my previous feedback:

Does display pdf file successfully but not image file
a) Mac OS 10.11.4 and Safari 9.1
b) iOS 9.3.5 and Safari

Doesn’t display pdf file but does the image
a) Mac OS 10.11.4 and Chrome v 53.0.2785
b) Windows 10 and Microsoft Edge 25.10586.0.0
c) Windows 10 and Firefox 46.0.1
d) Windows 10 and Chrome 53.0.2785

Thanks for any further ideas. Please also help how can I display image file

Could you start separate topic and share you examples for image/pdf display ?

Hi,
I know this is an old post but I not found a solution.
Also at mine project not work function displayPdf() on linux and windows with browser: Chrome, Edge and Opera but work (Pdf is displayed) on iPad with browser Chrome and Safari.
I have two questions:

  1. How can fix this (to work with all browsers and all platforms (linux, windows, ))
  2. Is possible two see all pages from pdf files, because now is displayed only first page (on iPad)
    This is my code
package com.company.gaz.web.docanexcerrac;

import com.haulmont.cuba.core.entity.FileDescriptor;
import com.haulmont.cuba.core.global.FileStorageException;
import com.haulmont.cuba.gui.components.*;
import com.company.gaz.entity.DocAnexCerRac;
import com.haulmont.cuba.gui.data.DataSupplier;
import com.haulmont.cuba.gui.data.Datasource;
import com.haulmont.cuba.gui.export.ExportDisplay;
import com.haulmont.cuba.gui.export.ExportFormat;
import com.haulmont.cuba.gui.export.FileDataProvider;
import com.haulmont.cuba.gui.upload.FileUploadingAPI;

import javax.inject.Inject;
import java.util.Map;

public class DocAnexCerRacEdit extends AbstractEditor<DocAnexCerRac> {

    @Inject
    private FileUploadField uploadFisierDocument;

    @Inject
    private DataSupplier dataSupplier;

    @Inject
    private FileUploadingAPI fileUploadingAPI;

    @Inject
    private Button clearPdfBtn;

    @Inject
    private Button downloadPdfBtn;

    @Inject
    private Embedded preview;

    @Inject
    private ExportDisplay exportDisplay;

    @Inject
    private Datasource<DocAnexCerRac> docAnexCerRacDs;
    

    @Override
    public void init(Map<String, Object> params){

        uploadFisierDocument.addFileUploadSucceedListener(event -> {
            FileDescriptor fd = uploadFisierDocument.getFileDescriptor();
            try {
                fileUploadingAPI.putFileIntoStorage(uploadFisierDocument.getFileId(), fd);
            } catch (FileStorageException e) {
                throw new RuntimeException("Eroare la salvarea fișierului în File Storage", e);
            }
            getItem().setFisierDocument(dataSupplier.commit(fd));
            displayPdf();
        });

        uploadFisierDocument.addFileUploadErrorListener(event -> {
            showNotification("Eroare la încărcarea fișierului", NotificationType.HUMANIZED);
        });

        docAnexCerRacDs.addItemPropertyChangeListener(e ->  {
            if ("fisierDocument".equals(e.getProperty()))
                updatePdfButtons(e.getValue() != null);
        });

    }

    @Override
    protected void postInit() {
        displayPdf();
        updatePdfButtons(getItem().getFisierDocument() != null);
    }

    public void onClearPdfBtnClick() {
        getItem().setFisierDocument(null);
        displayPdf();
    }

    public void onDownloadPdfBtnClick() {
        if (getItem().getFisierDocument() != null)
            exportDisplay.show(getItem().getFisierDocument(), ExportFormat.OCTET_STREAM);
    }

    private void updatePdfButtons(boolean enable) {
        downloadPdfBtn.setEnabled(enable);
        clearPdfBtn.setEnabled(enable);
    }

    private void displayPdf() {
        if (getItem().getFisierDocument() != null) {
            FileDescriptor attachmentFile = getItem().getFisierDocument();
            preview.setSource(String.format("%s.pdf", attachmentFile.getUuid()), new FileDataProvider(attachmentFile));
            preview.setVisible(true);
        }
        else
        {
            preview.setVisible(false);
        }
    }
}

Hi,
Now work every thing (pdf is displayed on linux browsers and I can see all the pages from document).
Function displayPdf() now appear like that:

    private void displayPdf() {
        if (getItem().getFisierDocument() != null) {
            FileDescriptor attachmentFile = getItem().getFisierDocument();
            preview.setSource(String.format("%s.pdf", attachmentFile.getUuid()), new FileDataProvider(attachmentFile));
            preview.setType(Embedded.Type.BROWSER);
            preview.setVisible(true);
        }
        else
        {
            preview.setVisible(false);
        }
    }
1 Like

A post was split to a new topic: PDF preview with embedded