File/image upload 'dataUrl' varaiable

Wappler General How To
#1

Hi,

When using file upload component yo can use dataUrl parameter to get the body of the uploaded file but only when datatype is set to image. Otherwise it is set to null. What I’m trying to accomplish is to preview pdf/application type file - before it is uploaded to the server. Is it possible in Wappler ? Right now I’m uploading the file to the server - displaying it on the web page and when user cancel the process the file is being deleted from the server. This is working but requires couple more steps to accomplish.

Dominik

#2

Hello,
It’s not possible to preview PDF files like you do with images (img src and dataUrl). It’s a totally different file format, working in a totally different way.
You’ll need some custom JavaScript to do anything like this.

#3

I know that. I just wanted to use binary data before file is send to server. Once it is on the server I have no problem with displaying it. While PDF is being more and more popular especially within “digital office” you might consider using these files the same way an image is used. Actually Bubble is displaying images nad pdfs…

#4

The dataUrl option is indeed only available for images.
Maybe @patrick can check if this can be used for other file types as well.

1 Like
#5

I know that the dataUrl can be used for all src attribute, like on an image, video or audio tag. I don’t know a way to show a PDF from an dataUrl.

#6

It looks like Wordpress now shows a preview of the first page of a PDF when it’s uploaded so technically it’s possible. But I don’t know exactly how! Hope that helps :wink:

#7

It is possible to create an image from a PDF with PHP and Imagick: https://www.php.net/manual/en/imagick.readimage.php.

#8

Ooh, worth putting in a feature request for this?

#9

The problem, is that dataUrl is empty if the file is not of IMAGE type…