The elPreviewContainer setting is invalid and the parent element of preview cannot be customized

[qooloop]

JS:

$('#photofile').fileinput({
        language: 'zh',
        dropZoneEnabled: false,
        elPreviewContainer: '#filePreview',
        // elPreviewImage: '#fileThumbnails',
        // showClose: false,
        allowedFileExtensions: ['jpg', 'png', 'jpeg'],
        maxFileSize: 20480,   //kb
        uploadUrl: '/web/photoUpload',
        uploadAsync: true,
        uploadClass: 'btn btn-success',
        removeClass: 'btn btn-danger',
        fileActionSettings: {
            removeIcon: '<i class="fas fa-trash-alt"></i>',
            showZoom: false,
            showDrag: false,
            showRotate: false,
            showUpload: false
        }
    }).on("fileuploaded", function (event, data) {
        console.log(data);
        $("#photo").val(data.response.url);
    });

HTML:

<div class="row">
      <div class="col-12">
          <div class="form-group">
              <label class="control-label required">Photo</label>
              <input id="photofile" name="photofile" type="file" class="file">
              <input type="hidden" id="photo">
          </div>
      </div>
      <div class="col-12">
          <div class="form-group">
              <div id="filePreview">

              </div>
          </div>
      </div>
</div>

Question: elPreviewContainer has set the ID:filePreview in the initialization, but it did not work, when i open the preview, preview container is still under div.file-input