sopinet/upload-magic-bundle

Symfony2 Bundle - Easy integration for DropzoneJS and OneupUploaderBundle

dev-master 2016-02-11 17:39 UTC

Requires

• php: >=5.4.0
• oneup/uploader-bundle: 1.0.*@dev

GPL2

• Fernando Hidalgo

• Symfony2
• bundle
• upload
• oneupuploader
• dropzonejs

README

upload-magic-bundle

Symfony2 Bundle - Easy integration for DropzoneJS and OneupUploaderBundle

Prerequisites

This bundle is tested using Symfony2 versions 2.3+.

Installation:

Step 1: Add Bundle

1. Add to composer:

"sopinet/upload-magic-bundle": "dev-master"

1. Add to AppKernel:

new Oneup\UploaderBundle\OneupUploaderBundle(),
new Sopinet\Bundle\UploadMagicBundle\SopinetUploadMagicBundle(),

1. Add routing for delete

upload:
    resource: "@SopinetUploadMagicBundle/Controller/UploadController.php"
    type:     annotation

Step 2: Configure OneupUploaderBundle

1. Add configuration (config.yml) any like:

oneup_uploader:
    mappings:
        gallery:
            frontend: dropzone

1. Configure routing

oneup_uploader:
    resource: .
    type: uploader

1. More options from OneupUploaderBundle,https://github.com/1up-lab/OneupUploaderBundle/blob/master/Resources/doc/index.md but upload-magic-bundle only support dropzone frontend method.

Step 3: Define your Entity

1. You can use UploadMagic trait, so:

namespace yourBundle\BaseBundle\Entity;

use ...

/**
 * @ORM\Entity
 * @ORM\Table(name="file")
 * @DoctrineAssert\UniqueEntity("id")
 */
class File
{
	
	use \Sopinet\Bundle\UploadMagicBundle\Model\UploadMagic;
	...
}

1. You can add relation and another attributes to your entity:

  ...
	/**
	 * @ORM\ManyToOne(targetEntity="Category", inversedBy="files")
	 * @ORM\JoinColumn(name="category_id", referencedColumnName="id")
	 */
	protected $category;
	...

Step 4: Add your form

1. Add CSS

{% include 'SopinetUploadMagicBundle:Upload:simple_css.html.twig' %}

1. Add form

								{% include 'SopinetUploadMagicBundle:Upload:simple.html.twig'
								  	with {
								  		'name': 'demo',
								  		'type': 'gallery',
								  		'id': 0, 
								  		'entity': 'myBundle_BaseBundle_File',
								  		'param1': 'title',
                			'value1': 'A title for...',
                			'param2': 'myBundle_BaseBundle_Category',
                			'value2': guild.id,
                			'icon': 'fa fa-plus-circle'
										}
								  %}

In param1 i use "title", and Listener will do "setTitle".

With param2 it use an entity, and it will do findbyoneid and "set" again.

More documentation about params form is coming... ;)

1. Add js, one time

{% include 'SopinetUploadMagicBundle:Upload:simple_js.html.twig' %}

If you have errors about load time, you can use:

{% include 'SopinetUploadMagicBundle:Upload:simple_js.timeout.html.twig' %}

1. Add blockjs, for each form

	{% include 'SopinetUploadMagicBundle:Upload:simple_blockjs.html.twig' 
		with {
		  'name': 'demo', 
		  'type': 'gallery', 
		  'files': files_already_saved_array, 
		  'limit': 1, 
		  'entity': 'myBundle_BaseBundle_File'
		  # Optional
		  'preview': true
		} 
	%}

More JS, trigger

What file is uploading or file is removed, you can capture this event in JQuery and do anything.

Events

$( "body" ).on( "removedFile", function( event, data) {
  // data, "ok" or "ko"
});

$("body").on("uploadedFile", function(event, data) {
  // data, "ok"
});

Sample

$( "body" ).on( "removedFile", function( event, data) {
	if (data == "ok") {
		$.gritter.add({
			title: '<i class="fa fa-check-circle"></i> Acción realizada con éxito',
			text: 'Has eliminado un fichero',
			sticky: false,
			time: '',
			class_name: 'gritter-success'
		});
	} else {
		$.gritter.add({
			title: '<i class="fa fa-times-circle"></i> Ha ocurrido un error',
			text: 'No se ha podido eliminar el fichero',
			sticky: false,
			time: '',
			class_name: 'gritter-danger'
		});								
	}			
});
$("body").on("uploadedFile", function(event, data) {
	$.gritter.add({
		title: '<i class="fa fa-check-circle"></i> Acción realizada con éxito',
		text: 'Has guardado un fichero',
		sticky: false,
		time: '',
		class_name: 'gritter-success'
	});			
});

TODO

1. Better documentation about params to Form
2. More is coming...