comur / ComurImageBundle

Image upload / crop bundle for Symfony2
105 stars 76 forks source link

comur + bootstrap when click edit #14

Closed elgui02 closed 10 years ago

elgui02 commented 10 years ago

Hi a try use the bundle when i click on edit my navegator says:

Uncaught TypeError: undefined is not a function on $('#image_upload_file').fileupload i include {% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_jquery': true, 'include_bootstrap': false} %} do you have any idea?

comur commented 10 years ago

Hi

Can you send me your code please ? Did you install assets ? You can check if you have a network request with 404 on one of required js files ? You can use inspector on FF or Chrome and see it on network tab

Le samedi 13 septembre 2014, elgui02 notifications@github.com a écrit :

Hi a try use the bundle when i click on edit my navegator says:

Uncaught TypeError: undefined is not a function on $('#image_upload_file').fileupload i include {% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_jquery': true, 'include_bootstrap': false} %} do you have any idea?

— Reply to this email directly or view it on GitHub https://github.com/comur/ComurImageBundle/issues/14.

Can OMUR omur.can@gmail.com +33 (0)6.79.66.58.28

elgui02 commented 10 years ago

i install assets, i try give you a description about how i install and configure this bundle

composer.json "comur/image-bundle": "dev-master"

appkernel new JMS\TranslationBundle\JMSTranslationBundle(), new Comur\ImageBundle\ComurImageBundle(),

on layout base.html.twig

{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_jquery': true, 'include_bootstrap': false} %} and scripts script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"> and have this error (sorry i download the file maybe there is the problem ) GET http://atp.tip/bundles/comurimage/js/jquery-1.10.2.min.map 404 (Not Found) on my bundle i have this files : css: bootstrap.min.css comur.image_bundle.css jquery.Jcrop.min.css img: glyphicons-halflings-white.png glyphicons-halflings.png js: bootstrap.min.js comur.imagelibrary.js jquery.Jcrop.min.js jquery.color.js jquery.fileupload.js jquery.iframe-transport.js jquery.js jquery.ui.widget.js thanks for you help
elgui02 commented 10 years ago

i download this file to https://github.com/jquery/codeorigin.jquery.com/blob/master/cdn/jquery-1.10.2.min.map

my routing file

comur_image: resource: "@ComurImageBundle/Resources/config/routing.yml" prefix: /

my form config

$builder ->add('image', 'comur_image', array( 'uploadConfig' => array( 'uploadUrl' => 'Producto.UploadRootDir', 'webDir' => 'Producto.UploadDir', ), 'cropConfig' => array( 'minWidth' => 588, 'minHeight' => 300, 'thumbs' => array( //optional array( 'maxWidth' => 400, 'maxHeight' => 400, 'useAsFieldImage' => true //optional ) ) ) )) ;

   when i click the button edit i have this error 
  Uncaught TypeError: undefined is not a function comur.imagelibrary.js:60

and my entity file

public function __sleep() { return array('id', 'Codigo', 'Nombre', 'Precio', 'Image', 'Categoria_id', 'Tipo'); }

public function getUploadRootDir()
{
    // le chemin absolu du répertoire où les documents uploadés doivent être sauvegardés
    return __DIR__.'/../../../../../web/'.$this->getUploadDir();
}

public function getUploadDir()
{
    return 'uploads/myentity';
}

public function getAbsolutePath()
{
    return null === $this->image ? null : $this->getUploadRootDir().'/'.$this->image;
}

public function getWebPath()
{
    return null === $this->image ? null : '/'.$this->getUploadDir().'/'.$this->image;
}

i will install the app you suggest me and send you the info, thanks again :D

elgui02 commented 10 years ago

Now i feel like moron XD maybe the error is in the generated code, i have this script

$(document).ready(function(){ $('#image_preview_tipsa_principal_atpbundle_producto_image_image.select-image-button .image_edit_button').click(function(event){ var options = $.parseJSON('{"uploadConfig":{"uploadRoute":"comur_apiupload","uploadUrl":"Producto.UploadRootDir","webDir":"Producto.UploadDir","fileExt":".jpg;.gif;.png;_.jpeg","libraryDir":"Producto.UploadRootDir","libraryRoute":"comur_api_image_library","showLibrary":true,"saveOriginal":false},"cropConfig":{"minWidth":588,"minHeight":300,"aspectRatio":true,"cropRoute":"comur_api_crop","forceResize":true,"thumbs":[{"maxWidth":400,"maxHeight":400,"useAsFieldImage":true}]},"fieldImage":{"maxWidth":400,"maxHeight":400,"useAsFieldImage":true}}'); initializeImageManager('tipsa_principal_atpbundle_producto_image_image', options); // console.log('tipsa_principal_atpbundle_producto_image_image onclick'); $('#image_upload_modal').modal('show'); }); }); $('.select-image-button').mouseover(function(){ if(!$(this).hasClass('hide-disabled')) $(this).children('.image_edit_button').removeClass('hidden'); }); $('.select-image-button').mouseout(function(){ if(!$(this).hasClass('hide-disabled')) $(this).children('.image_edit_button').addClass('hidden'); });

maybe the error is the name of the form

elgui02 commented 10 years ago

i found this on my wep page code

http://pastebin.com/tQQTaNJr

is the code to file_image_upload

comur commented 10 years ago

Hi,

You have at least one error in your code:

$builder ->add('image', 'comurimage', array( 'uploadConfig' => array( 'uploadUrl' => 'Producto.UploadRootDir', => must be a valid url, here you're giving a string 'webDir' => 'Producto.UploadDir', => same here_ ),

For the bug that you are having, the line 60 is about this :

$('#image_upload_file').fileupload({

It means that you don't have required jquery upload JS library which is already included in the bundle so i realy think that you have an asset issue here.

Can OMUR omur.can@gmail.com +33 (0)6.79.66.58.28

2014-09-17 7:04 GMT+02:00 elgui02 notifications@github.com:

i found this on my wep page code

Drop your file here

or

Select a file...

Please adjust selection to your image

Please select or upload an image

— Reply to this email directly or view it on GitHub https://github.com/comur/ComurImageBundle/issues/14#issuecomment-55849144 .

elgui02 commented 10 years ago

Hi, on your tutorial says $myObject my entity call Producto but $producto->getUploadRootDir() doesn't work i try with $this but doesn't work too, do have a example where remplace $myObject with the real object?

comur commented 10 years ago

If you can wait for a day, i will put an example directory with my code to be more clear.

Can OMUR omur.can@gmail.com +33 (0)6.79.66.58.28

2014-09-18 8:07 GMT+02:00 elgui02 notifications@github.com:

Hi, on your tutorial says $myObject my entity call Producto but $producto->getUploadRootDir() doesn't work i try with $this but doesn't work too, do have a example where remplace $myObject with the real object?

— Reply to this email directly or view it on GitHub https://github.com/comur/ComurImageBundle/issues/14#issuecomment-55998644 .

elgui02 commented 10 years ago

I can wait and thanks :)

comur commented 10 years ago

And don't know if you use bootstrap 3.x but if yes, you should use 1.0 branch, in composer :

"comur/image-bundle": "1.0.*@dev"

dev-master is compatible with bootstrap 2.x

Can OMUR omur.can@gmail.com +33 (0)6.79.66.58.28

2014-09-18 8:12 GMT+02:00 elgui02 notifications@github.com:

I can wait and thanks :)

— Reply to this email directly or view it on GitHub https://github.com/comur/ComurImageBundle/issues/14#issuecomment-55998961 .

comur commented 10 years ago

I just added more clear explanation in README, can you check if it's clear for you, especially for directory paths part ?

Thanks

Can OMUR omur.can@gmail.com +33 (0)6.79.66.58.28

2014-09-18 8:57 GMT+02:00 Can Omur omur.can@gmail.com:

And don't know if you use bootstrap 3.x but if yes, you should use 1.0 branch, in composer :

"comur/image-bundle": "1.0.*@dev"

dev-master is compatible with bootstrap 2.x

Can OMUR omur.can@gmail.com +33 (0)6.79.66.58.28

2014-09-18 8:12 GMT+02:00 elgui02 notifications@github.com:

I can wait and thanks :)

— Reply to this email directly or view it on GitHub https://github.com/comur/ComurImageBundle/issues/14#issuecomment-55998961 .

elgui02 commented 10 years ago

That's great and i try again with this changes and tell you :) and maybe it's a good idea put this "

And don't know if you use bootstrap 3.x but if yes, you should use 1.0 branch, in composer :

"comur/image-bundle": "1.0.*@dev"

dev-master is compatible with bootstrap 2.x

" in your readme for future users

thanks again

comur commented 10 years ago

It's already there :) first line of readme :)

Can OMUR omur.can@gmail.com +33 (0)6.79.66.58.28

2014-09-18 16:48 GMT+02:00 elgui02 notifications@github.com:

That's great and i try again with this changes and tell you :) and maybe it's a good idea put this "

And don't know if you use bootstrap 3.x but if yes, you should use 1.0 branch, in composer :

"comur/image-bundle": "1.0.*@dev https://github.com/dev"

dev-master is compatible with bootstrap 2.x

" in your readme for future users

thanks again

— Reply to this email directly or view it on GitHub https://github.com/comur/ComurImageBundle/issues/14#issuecomment-56049315 .

elgui02 commented 10 years ago

Bad news : Now my form is:

$entity = $builder->getForm()->getData();

    $builder
        ->add('file', 'comur_image', array(
            'uploadConfig' => array(
                'uploadRoute' => 'comur_api_upload',        //optional
                'uploadUrl' => $entity->getUploadRootDir(),       // required - see explanation below (you can also put just a dir path)
                'webDir' => $entity->getUploadDir(),              // required - see explanation below (you can also put just a dir path)
                'fileExt' => '*.jpg;*.gif;*.png;*.jpeg',    //optional
                'libraryDir' => null,                       //optional
                'libraryRoute' => 'comur_api_image_library', //optional
                'showLibrary' => true,                      //optional
            ),
            'cropConfig' => array(
                'minWidth' => 588,
                'minHeight' => 300,
                'aspectRatio' => true,              //optional
                'cropRoute' => 'comur_api_crop',    //optional
                'forceResize' => false,             //optional
                'thumbs' => array(                  //optional
                    array(
                        'maxWidth' => 400,
                        'maxHeight' => 400,
                        'useAsFieldImage' => true  //optional
                    )
                )
            )
        ));

but i have the same error

Uncaught TypeError: undefined is not a function comur.imagelibrary.js:60 $('#image_upload_file').fileupload

elgui02 commented 10 years ago

In your readme the include for bootstrap is {% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_jquery': false, 'include_bootstrap': false} %}

but in my twig is 'include_jquery': true , because is false jquery doesn't work, maybe this is the error

elgui02 commented 10 years ago

Good news, its working! but when i drop a image or select file don't upload but i don't have info on the console

elgui02 commented 10 years ago

well i found this, i delete line when i include the src to jquery of boostrap and the twig of the bundle include the jquery and work,

Thanks again :)

mehrdad-masoumi commented 9 years ago

hello i can not speak english very well gouid me in install ComurImageBundle after install modal not open

carlosequiz commented 9 years ago

Hi @mehrdad69 Check #26

airtonfjunior commented 9 years ago

I install but have the same error

Uncaught TypeError: undefined is not a function comur.imagelibrary.js:60 $('#image_upload_file').fileupload

can you help me?