Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When using b-form-file to upload an image, is it possible to preview the image prior to uploading it?

See original GitHub issue

I’m making an ‘avatar upload’ using b-form-file and would like to show a preview of the selected image before it’s sent to the server.

https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded provides some possible answers but I was hoping there may be an easier way, perhaps this functionality is already baked-in but I couldn’t find a mention of it in the docs

Issue Analytics

State:
Created 4 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

jacobmllr95commented, Nov 13, 2019

@vesper8 This example should help you out: https://codesandbox.io/s/bootstrapvue-image-preview-before-upload-xgj8s

1reaction

tmorehousecommented, Nov 13, 2019

@vesper8 Note you might have issues with really large images and some browsers which have a limit on the length of a data URI in the <img> src attribute.

But basically you can use the same method @jackmu95 provided to read the image file, but then pass the image to a <canvas> to process the file and scale it down in dimensions to get a “thumbnail” image as a data URI.