BlueImp silently fails on file upload

Question

When i try to upload using blueImp, i get the fllowing error when I open up the console:

Uncaught TypeError: Cannot read property 'parseMetaData' of undefined

accompanied by a stack trace. It seems I am calling the upload logic without a file. Is there a way I can get more information?

Answer 1

Make sure you are including the JS script https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js before any of the file upload scripts. This file is needed for the parseMetaData function.

<script> includes should be in the following order, which is taken directly from the example found at https://blueimp.github.io/jQuery-File-Upload/.

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="js/jquery.fileupload-ui.js"></script>