Show PDF Image Prior To Upload

Wappler General How To
#1

I would like to preview the .pdf file prior to uploading it. It seems this no longer works. Is there an alternative with the newer Wappler?

The code back during DMXzone & Bootstrap 3 days prior to Wappler that I used was:

      <div class="col-sm-10 col-sm-offset-1" data-binding-show="{{$FILES.file_name.dataUrl}}">

            <object data="{{$FILES.file_name.dataUrl}}" type="application/pdf" width="100%" height="568">
                   <p><b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/sample-3pp.pdf">Download PDF</a>.</p>
            </object>

      </div>
     <!-- /.col-sm-10 col-sm-offset-1 -->
</div>
<!-- /.col-sm-6 -->
#2

Looks like the bindings are incorrect.
Wappler needs dynamic bindings to be inside dmx-bind:

Something like dmx-bind:data="$_files..."

Although I am not sure if $files is something that is available in Wapplrler.

#3

Yeah, this is an old file from pre-Wappler DMXzone days. The preview worked with the older code. I’m just looking for a way to rebuild it with Wappler 3.9.4 … :grinning:

#4

You can use an image element and bind its source to your file input using the file.dataUrl.

#5

Wow, it is easier than I thought! Thanks Ken. I check it out immediately.

#6

Sorry, just read this is for pdf. I don’t think the image preview will work for pdfs.

#7

The old days required it to be wrapped in an object. I’m not sure how to do this within Wappler.

#8 
THIS WORKS! 
Just replace the <object> with <iframe>

<iframe dmx-bind:src="sc_file_viewer.data.query_list_files[0].file_path" width="100%" style="height:100%"></iframe>
4 Likes