0

I have a vue page that has a file upload component. This allows the user to upload a file to server storage then display a thumbnail of the file uploaded for later retrieval.

The upload works fine and the server creates a thumbnail using imagemagick which is displayed on the page, this all works fine.

My problem is that the creation of the thumbnail takes a second or two which means when the file upload is finished the thumbnail isn't available immediately and I get an "image cannot be displayed" placeholder where the thumbnail should be. Refreshing the page shows the thumbnail fine.

I've jerry rigged things by adding a delay which gives the server time to create the thumbnail but it's a bit hit and miss as some files take longer to generate than others and it seems a bit poor for the user to have to wait 500ms or more before their action is complete.

How do I go about improving the user experience?

marc_s
  • 675,133
  • 158
  • 1,253
  • 1,388
Gordon Copestake
  • 1,454
  • 4
  • 19
  • 35
  • This is a very broad question. It can be as simple as a [placeholder](https://serverfault.com/a/562271) image on the HTTP-server layer, or as clever as a javascript [pseudo-preview](https://stackoverflow.com/a/4459419/438117) on the client layer. – emcconville May 07 '19 at 14:28
  • I appreciate it's not a specific technical question, more of a "best practice" question. Thanks for the links, I'll have a look – Gordon Copestake May 07 '19 at 14:29

0 Answers0