bootstrap-fileinput: "fileupload": Error loading the piexif.js library.

[AJavierSanchez]

first of all: GREAT JOB!!!

Steps to reproduce the issue

this is my plugin initialization:

 $("#fileupload").fileinput({
      language : 'es',
      showUpload:true, 
      uploadUrl: 'someurl',
      allowedFileType : ['image'],
      allowedFileExtensions : ['jpg','jpeg','png'],
      previewFileType :'image',
      showCaption: true,
      dropZoneEnabled: true,
      showRemove: true,
      maxFileCount: 6,
      maxFileSize: 100000,
      browseClass: "btn btn-success",
      browseLabel: "Elegir Imagen/es",
      browseIcon: "<i class=\"fa fa-file-image-o\"></i> ",
      removeClass: 'btn btn-danger',
      removeTitle: 'Borrar Imagen',      
      removeLabel: "orrar",
      removeIcon: "<i class=\"fa fa-trash-o\"></i> ",
      uploadClass: "btn btn-info",
      uploadLabel: "Subir",
      uploadIcon: "<i class=\"fa fa-upload\"></i> "
    });

this is the html part,

<input id="fileupload" type="file" name="file" multiple>

I know that I've should named it as file[], but the server which receives the files expect name to be file. And it doesn't produce any error.

Expected behavior and actual behavior

The plugin seems to work correctly, but in the chrome console I've get the piexif.js error every time I upload a file. I'm just reporting it.

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: 3.3.1
• bootstrap-fileinput version: 4.5.0

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-fileinput without other plugins
• I can reproduce this bug in a jsbin

[kartik-v]

This happens because piexif.js is required to be loaded on your page for enabling image management features in the plugin and is used also for auto orientation of JPEG images in preview. The auto orientation is controlled by the property autoOrientImage - this property defaults to true. If you do not wish to load piexif.js or do not need auto orientation - set autoOrientImage to false.

[AJavierSanchez]

oopss... excuse me. I thought I've loaded piexif.js. But. shouldn't this option defaults to false as it depends on an extra script?. Once again, thank you, excuse me and congratulations on a great, great job!!

[kartik-v]

Will note an enhancement for defaulting autoOrientImage to false.

[AJavierSanchez]

Hi, the problem remains although I put the autoOrientImage to false.

[kartik-v]

Please share a JS Fiddle to reproduce your issue to understand.

[hebriels]

Same problem. When adding a .pdf file

[nadiacq]

Same problem :(

[kartik-v]

Folks - note as mentioned in this comment, this depends on how you are configuring and coding your app.

• first ensure you have the latest and correct plugin release and not using an outdated plugin version
• second please check your browser console to understand the issue and configure your app accordingly.

I am not sure what the issue is - so please share a JS fiddle to reproduce and understand. You can cross check the plugin demo pages where piexif.js is not loaded in any of the demos except the file image management demo and where you do not have any issues.

There are 2 reasons where piexif.js is needed and you must load it on your page if you have configured your app accordingly:

1. The first reason is when you have autoOrientImage set to true
2. The second reason is when you are using the image resize capability of the plugin

Check your configuration and if you have an issue please provide a JS Fiddle to reproduce your issue.

[AJavierSanchez]

Here's the example. Just add an image and check the console.
https://jsfiddle.net/thejavo/29586z7d/13/

[AJavierSanchez]

Of course if I load the piexif.js file, the problem disappears, but I don't need it.

[kartik-v]

Thanks for the fiddle ... will check

[kartik-v]

Resolved with latest update.

[AJavierSanchez]

pleased to help!

[hebriels]

Yes Thanks!

[brunomcuesta]

Hello! I have the same error here. Using Bootstrap 4.1.3, JQuery 3.3.1 and Bootstrap-File-Input 4.5.0:

My JS:

<!-- Bootstrap File Upload plugin JavaScript-->
<script src="{% static 'bootstrap/site/docs/4.1/assets/js/vendor/popper.min.js' %}"></script>
<script src="{% static 'bootstrap-fileinput/js/fileinput.min.js' %}"></script>
<script src="{% static 'bootstrap-fileinput/js/locales/pt-BR.js' %}"></script>
<script src="{% static 'bootstrap-fileinput/themes/fa/theme.min.js' %}"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $("#fileupload").fileinput({
        language: "pt-BR",
        autoOrientImage: false,
     });
});
</script>

My HTML:

<div class="form-group col-md-12">
    <label class="control-label">Selecione o arquivo:</label>
         <div class="file-loading">
             <input id="fileupload" name="file[]" type="file" multiple>
        </div>
</div>

And the icons do not appear on the edge of the window:

https://imgur.com/a/sckwtZi
https://imgur.com/a/TLv8pxJ

EDIT:
I put the import of piexif.min.js and the error stopped when page is loaded, but appears on upload a file. The theme that worked was the "fas".

<script src="{% static 'bootstrap-fileinput/themes/fas/theme.min.js' %}"></script>

$("#inpupfile").fileinput({
        language: "pt-BR",
        theme: "fas",
        uploadUrl: "",
        overwriteInitial: false,
        autoReplace: false,
        autoOrientImage: false,
        allowedFileExtensions: ["jpg", "png", "gif"],
        uploadIcon : "<i class='fas fa-upload'></i>",
        removeIcon : "<i class='fas fa-trash-alt'></i>",
        browseIcon : "<i class='fas fa-search-plus'></i>",
        removeClass : 'btn btn-danger',
        showUpload: false,
        purifyHtml: true,
        maxFileCount: 10,
    });

[jonasva]

same here, error appears when selecting a new image.

[kartik-v]

Get the latest code from dev-master (v4.5.1) - it will be tagged with new release soon.

[jonasva]

Ok thx, are you going to include it in the sass branch as well? (I'm using that one)

[kartik-v]

yes

[brunomcuesta]

Thanks!

[brunomcuesta]

I updated the version to 4.5.1 using Bower and the error persists after selecting an image to upload.

[newscloud]

Using v4.5.2

Also seeing:
bootstrap-fileinput: "photo-attachment_1": Error loading the piexif.js library.

piexif.js shows it is loaded in source on the page from your plugin

$model, 'attribute' => 'attachment_1[]', 'options' => ['multiple' => true, 'autoOrientImage'=>false] ]); ?>

[jhonhenrybernal]

The first example worked for me

[kuntur-studio]

I'm using version 5.0.1 and have the same problem.

[kartik-v]

Read about autoOrientImage property in docs for 5.x. Either load the piexif library or set the above property explicitly to false.

[kuntur-studio]

Yes I did, I thought that the property was false by default.
Sorry.