Search code examples
jqueryfile-uploadblueimp

BlueImp silently fails on file upload


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?


Solution

  • 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>