How to stop clients from uploading PDF files in type="image"

davedesigner · Feb 25th 2021

My client has a problem recognising what is a PDF and what is a jpg.

Obviously there's no cropping on a PDF file and blows the layout and displays "as is".

Is there a way of restricting type="image" to uploading only true web images?

hus_hmd · Feb 28th 2021

Assuming your template is something like this:

HTML

<img src="<perch:content id="image" type="image" label="Image">" alt="">

When the client uploads a PDF via and image field type, what does Perch render on the frontend? A JPG?

HTML

<img src="/perch/resources/example.jpg" alt="">

davedesigner · Mar 2nd 2021

It remained as a PDF. Perch does no rendering/resizing on PDF's which I'd expect.

Safari displays PDF's in the browser using the IMG tag and blows the layout as the size was specific.

Firefox and other browsers do not display PDF's and nothing appear in Perch either so the client is unaware of the problem.

pixelnaut · Mar 2nd 2021

I haven't tried this out but you could try adding the 'file-type' attribute found on 'type="file" field types? long shot but it might work. So you'd have something like:

Code

<perch:content id="img" type="image" label="Picture" help="Don't use PDF!!!" file-type="img" crop width="100" height="100" />

You could settle for using 'file' field type and forgo the resizing/cropping and use some frontend markup/css to crop and resize. Not ideal I know but at least it would limit the 'PDF damage'...

hus_hmd · Mar 3rd 2021

The file-type attribute filters existing assets in the asset chooser. I think the editor can still upload PDF files.

It's not ideal that Perch allows selecting PDFs in an image field. One option could be to add a conditional to not render the PDF files at all so the user is forced to pick an image instead:

HTML

<perch:if id="image" match="!contains" value=".pdf">
<img src="<perch:content id="image" type="image" label="Image">" alt="">
</perch:if>

The above doesn't really cover all cases because it will also match any file path of an image that contains .pdf like /perch/resources/my.pdf_elephant.jpg.