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?

Fireresistant

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>

Ramekin

Thanks! This solved my issue. I was missing the load-image dependency. – Fireresistant

@Fireresistant If this solved your issue, please mark it as the accepted answer to help others when looking at this question in the search results. – Ramekin

I was wondering if anyone could shed light on why the file upload functionality doesnt work when loading the scripts via $.getScript(); (repeated for each script)? I've tried every combination under the sun using $.getScript()'s but it will not cooperate and will only seem to work if all scripts are included at run time which slows page load and Id like to load the scripts when needed, not on every page load. Any suggestions welcomed – Ritual

Try looking at answers on #11803715 as it may be due to scripts loading in the wrong order. – Ramekin