PDF Viewer not displaying pdf from Network Path from Variable

szymonpodwyszynski commented 7 months ago

Has your issue been reported?

[X] I have searched the existing issues and confirm it has not been reported.
[X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

When using PDF viewer, after i define the URL in Network path from variable (it can be either JSON or Data Type), the PDF viewer is not displaying the pdf neither in test session nor in a deployed app. When i statically put the same pdf url straight to the PDF viewer network path, it displays correctly a pdf (I've tried on multiple pdfs).

Expected Behavior

When i define the URL in Network path from Variable in PDF Viewer, it should display said PDF, no matter if its JSON or Data Types.

Steps to Reproduce

Create new project
Create pdf viewer on page
Get an Api call with urls to pdfs or put them in data types
In PDF Viewer in Network - Network Path define the path from variable (from this API or DT)
It doesnt work.

Reproducible from Blank

[X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT4sj+flvYtOmM9G15PqccFB/CkXKUM3bJEWscpFYxMjI4DuBIYiY876PxRuTeaoTVFmIlmcp14H06nJis7qUvAoOSubba5YzJZqcQ6XfFylVqWTF7mwWHNQL+dWCFyA08GJuwklWelpV2QH12WyAfCRQgjsHoTKIFQ8Sq/LZO4=

Context

Ive tried on multiple PDFs so its not a PDF issue as they display correctly when i put their url straight to network path. Ive tried also to put these variables JSON or DT in Text Combination but that doesnt work either. I feel like this simple functionality should be working.

Visual documentation

In this screenshot above the url should be a pdf viewer with this url

Additional Info

No response

Environment

- FlutterFlow version: Newest as of November 29, 2023
- Platform: Web
- Browser name and version: Version 119.0.6045.159 (Official Build) (arm64)
- Operating system and version affected: Version 14.1.1 (23B81)

szymonpodwyszynski commented 6 months ago

Hello! Has there been any updates on this case? If theres anything i can do to help please let me know! :)

emanuelsc3s commented 6 months ago

I have the same problem. Is there any way to get around this flaw?

darqeth commented 4 months ago

Any update on this matter?

szymonpodwyszynski commented 4 months ago

Any update on this matter?

Nope, no updates from FF support team

szymonpodwyszynski commented 4 months ago

Hello FF team, @hariprasadms, @agreaves has there been any updates on this case? Its a truly troubling issue, as its preventing us from using FF to its full possibilities. Let me know if you need anymore information.

darqeth commented 4 months ago

Bump.. i really need this working in my app.. is there something we can do another way to get the same functionality? Maybe a custom widget? Anyone has an idea?

roheelshafique commented 3 months ago

i am having the same issue, pdf not loading when using the network url through page parameter.

Eclz commented 3 months ago

Am also having the same issue ,when could this be resolved

SkylerAspegren commented 3 months ago

Any update here? I'm having the same issue.

jazzedge24 commented 3 months ago

Still a problem!

JustinPersson commented 2 months ago

I also have this issue.

SkylerAspegren commented 2 months ago

@takashiff @agreaves @hariprasadms Can someone from FF give an update on this one?

Eclz commented 2 months ago

@SkylerAspegren @JustinPersson @szymonpodwyszynski @ToddHerron @jazzedge24 @roheelshafique I've devised a straightforward approach. When employing an API call over a network, you'll need to employ text combination. For instance, integrate "text 1" with this link: https://fierce-gorge-10603-4854bc8b7c1f.herokuapp.com/. Then, in "text two," insert the corresponding text variable, such as $.data[:].image.

ToddHerron commented 2 months ago

It's working for me now.

I thought I was having the same problem with documents from Firebase Storage. It turns out you need to do all the CLI voodoo in the section Web Access for PDFs and Other Files in the FlutterFlow documentation.

When I first ran the touch command i got the following response:

Setting CORS on gs://charity-overdrive.appspot.com/...
ServiceException: 401 Anonymous caller does not have storage.buckets.update access to the Google Cloud Storage bucket. Permission 'storage.buckets.update' denied on resource (or it may not exist).

To get around this, I ran the command:

gcloud auth application-default login

in the cloud shell terminal. I got the following warning response:

You are running on a Google Compute Engine virtual machine.
The service credentials associated with this virtual machine
will automatically be used by Application Default
Credentials, so it is not necessary to use this command.

If you decide to proceed anyway, your user credentials may be visible
to others with access to this virtual machine. Are you sure you want
to authenticate with your personal account?

Do you want to continue (Y/n)?

I answered y

then reran the touch command and got the proper response with no errors.

Recommendation: That this gcloud command step should be included in the FlutterFlow documentation.

ToddHerron commented 2 months ago

DO NOT wrap the PdfViewer widget inside of a Column widget.

The Column widget goofs up the display of the PDF because PdfViewer has its own scrolling.

It is okay to wrap PdfViewer in a Container widget. (This also applies to implementing Syncfusion PDF, which also has its own scroll handling.)

Perhaps this should also be added to the documentation.

szymonpodwyszynski commented 2 months ago

Hello @leighajarett, what does the label "not in linear" mean for the support team? Will it be addressed and fixed anytime soon? :)

ToddHerron commented 2 months ago

Hello @leighajarett, what does the label "not in linear" mean for the support team? Will it be addressed and fixed anytime soon? :)

The PdfViewer widget works for me. Please see my comments above. The problem I had was I was enclosing the PdFViewer widget inside a Column widget and I had the height set wrong.

To get it working

I removed the enclosing Column widget.
I enclosed the PdFViewer widget inside a Container widget and which allowed Container to send the sizing width/height constraint down the widget tree to the child widget, PdfViewer.
I then set the width/height in PdfViewer to 100% each.

... and Linear is a bug tracking tool that FlutterFlow is using. :)

szymonpodwyszynski commented 1 month ago

Hello @leighajarett, what does the label "not in linear" mean for the support team? Will it be addressed and fixed anytime soon? :)

The PdfViewer widget works for me. Please see my comments above. The problem I had was I was enclosing the PdFViewer widget inside a Column widget and I had the height set wrong.

To get it working

I removed the enclosing Column widget.

I enclosed the PdFViewer widget inside a Container widget and which allowed Container to send the sizing width/height constraint down the widget tree to the child widget, PdfViewer.

I then set the width/height in PdfViewer to 100% each.

... and Linear is a bug tracking tool that FlutterFlow is using. :)

Hello. Thank you for your engagement in this issue. Unfortunately solution you've provided is not working for me. Heres my configuration:

Its really unfortunate that this many people above are struggling with this simple issue. I hope this will get fixed soon. I'm aware of the fix provided by @Eclz and its working, but it really should not work like that:

@SkylerAspegren @JustinPersson @szymonpodwyszynski @ToddHerron @jazzedge24 @roheelshafique I've devised a straightforward approach. When employing an API call over a network, you'll need to employ text combination. For instance, integrate "text 1" with this link: https://fierce-gorge-10603-4854bc8b7c1f.herokuapp.com/. Then, in "text two," insert the corresponding text variable, such as $.data[:].image.

FlutterFlow / flutterflow-issues