ComurImageBundle - $(…).fileupload not a function

2019-08-26 07:07发布

问题:

On a previous question i explained that i wanted to store images (at least file name) in a Symfony entity.

I followed the answers and installed ComurImageBundle in my project, by following the tutorial in the Readme.

It seems to work well since it display the button to choose the image, and the image's slot. But the button does nothing. The console print me an error :

TypeError: $(...).fileupload is not a function

It append on the $('#image_upload_file').fileupload({... line in the comur.imageLibrary.js file.

I know that the import order are tricky. I did mine like this:

<head>
...
    <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  {% include "ComurImageBundle:Form:croppable_image_modal.html.twig" %}
  <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
  <script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>

 {my form with the button}
...

Hope that someone has already faces this issue ...

Thank you for your answers.

回答1:

I saw your comment in the other post and choose to answer you here, If you are using twig forms and blocks so

1/ You have to call the Comur image under "body block" like this

{% block body -%}

{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_jquery': false, 'include_bootstrap': false} %}

(your form) ....

{% endblock %}

2/ For Js files calling, you have to call them under "javascript block" , and don't forget the route web call, like this :

{% block javascripts %}

<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
<script>var routeweb = "{{ app.request.getSchemeAndHttpHost() }}{{ app.request.getBaseURL() }}";</script>
{% endblock %}

3/ And for to be shure that the image will be uploaded, try to access your form under web directly, means access to

localhost/your_project/web/your_route/new

althought this

localhost/your_project/web/app_dev/your_route/new