FancyUpload

FancyUpload es una extensión de Mootools que permite hacer upload de archivos incluyendo barra de progreso. Esta basado en Swiff la clase de Mootools que permite incluir archivos SWF en HTML.

Si hacemos uso de la etiqueta input file no se puede hacer un seguimiento del progreso del upload y mucho menos aplicar estilos para integrarse correctamente con nuestro diseño. Esta librería utiliza un SWF que contiene las funciones necesarias para detectar el progreso de la carga, restringir a determinado tipo de archivos, entre otras opciones las cuales son características de flash.

Obteniendo los archivos
Lo primero es obtener los archivos necesarios: mootools.js desde Mootools, luego los archivos FancyUpload2.js, Swiff.Uploader.js, Fx.ProgressBar.js y Swiff.Uploader.swf desde FancyUpload.

Incluyendo los archivos
Lo siguiente es incluir los archivos recién descargados en nuestro HTML (En nuestro caso hemos colocado los Javascript en una carpeta llamada js), esto lo hacemos de la forma:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/Swiff.Uploader.js"></script>
<script type="text/javascript" src="js/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="js/FancyUpload2.js"></script>

Creando el Formulario
Lo que necesitamos crear son dos elementos, uno llamado demo-status que mostrará el progreso de la carga y demo-list que contiene la lista de archivos a subir. Además de ello necesitamos dos botones o links uno para seleccionar el archivo y el otro para iniciar el upload.

<div id="demo-status" class="hide">
<a href="#" id="demo-browse-all">Browse Files</a> |
<a href="#" id="demo-upload">Upload</a>
<div>
	<strong class="overall-title">Overall progress</strong><br />
	<img src="img/bar.gif" class="progress overall-progress" />
</div>
<div>
	<strong class="current-title">File Progress</strong><br />
	<img src="img/bar.gif" class="progress current-progress" />
</div>
<div class="current-text"></div>
</div>
<ul id="demo-list"></ul>

Implementando el Upload
Creamos una instancia de la clase FancyUpload2 el cual recibe como parámetros el elemento html para el estado de la carga, el elemento para el listado de archivos y luego un array de opciones donde indicamos a donde enviar los archivos, cual será el nombre con el cual se enviaran los archivos y finalmente la ruta al swf que contiene las funciones necesarias para el funcionamiento de esta librería.

window.addEvent('load', function() {
	var swiffy = new FancyUpload2(
		$('demo-status'), 
		$('demo-list'), 
		{
			'url': 'upload.php',
			'fieldName': 'archivo',
			'path': 'Swiff.Uploader.swf'
		}
	);
	$('bt-browse').addEvent('click', function(){
		swiffy.browse();
		return false;
	});
	$('bt-upload').addEvent('click', function(){
		swiffy.upload();
		return false;
	});
});

Hay que notar también que hemos agregado los eventos para los botones que abrirán el selector de archivos y el inicio del upload.

Guardando los archivos con PHP
PHP recibe los archivos de forma normal y procedemos a guardarlo, para ello accedemos al archivo subido con el nombre asignado en el parámetro fieldName, entonces obviando la validación por propósitos de facilitar la explicación tendríamos:

// file: upload.php
if (isset($_FILES['archivo'])) {
	$file = $_FILES['archivo']['tmp_name'];
	$name = $_FILES["archivo"]['name'];
	if (copy($file, "files/".$name)) {
		$status = "Archivo subido: ".$name."";
	} else {
		$status = "Error al subir el archivo";
	}
} else {
	$status = 'Archivo vacio intentelo nuevamente!';
}
echo $status;

Pueden ver el ejemplo funcionando en: http://samples.unijimpe.net/fancyupload/ en donde se puede observar lo intuitiva que resulta ser la pantalla para subir archivos. Esto es muy importante por que le permite a los usuarios saber si efectivamente se esta subiendo los archivos y sobre todo que nos hemos olvidado del típico formulario al cual no se le podía aplicar estilos de forma adecuada.

Posts Relacionados

Comentarios Total 42 comentarios

Jairo
Publicado: 31/07/2008 9:03 am

Hola Unijimpe gracias por esta publicacion esta muy interesante pero el demo que publicaste no funciona en el link para montar los archivos el de cargarlos. que podra ser?

Jairo
Publicado: 31/07/2008 9:10 am

Estuve revisando el problema con el depurador de firefox y me dio el siguiente error.

obj is undefined
mootools.ls line 2660

El codigo es el siguiente
Swiff.remote = function(obj, fn){
var rs = obj.CallFunction(» + __flash__argumentsToXML(arguments, 2) + »);
return eval(rs);
};

Pero no veo problema al codigo.

Jesus
Publicado: 31/07/2008 10:15 am

Lo hemos estado probando y nos hemos encontrado con ese mismo error…

Al revisar el código en la línea 12 del javascript al copiar y pegar de la web queda así:

swiffy.browse();
$(‘bt-browse’).addEvent(‘click’, function(){

return false;
});

Cuando debería quedar así:

$(‘bt-browse’).addEvent(‘click’, function(){
swiffy.browse();
return false;
});

con el swiffy.browse dentro del evento click.

Ahora ya nos funciona todo correctamente ;)

Jesus
Publicado: 31/07/2008 10:24 am

hola!

tengo problemas con la animacion de la barra de progreso del upload… me sale la imagen bar.gif pero me debe faltar alguna foto pq el progreso de la barra al hacer el upload no me aparece.

gracias¡

Javier
Publicado: 31/07/2008 10:32 am

Excelente artículo… a mí me funciona bien… saludos

Alejandro Arco
Publicado: 01/08/2008 5:35 am

Lo acabo de probar y me funciona correctamente con uploads de mas de 15MB sin problemas, eso si, recordad que teneis que dar permisos 766 a la carpeta de subida.

Un saludo,
Alejandro Arco

Jesus
Publicado: 01/08/2008 7:13 am

hola, os aparece bien la barra d progreso al hacer los uploads?

Jairo
Publicado: 03/08/2008 5:45 pm

Pues con algunos tipos de archivos funciona bien con otros no, por ejemplo con mp3 me da error.

InfoEmpresa
Publicado: 05/08/2008 5:53 am

Muy interesante, y definitivamente una funcionalidad que siempre he querido tener… Pero al igual que Jairo, me sale errores con ciertas extensiones…

percy
Publicado: 14/08/2008 1:06 pm

muy buena al aplicacion y gracias por compartirlo…
a loporposito no soy muy bueno en programacion pero desearia saber como se pueden mostrar en la web las fotos cargadas ? esto con php ?

Franz
Publicado: 22/08/2008 2:53 am

La barra de progreso que buscais la podeis encontrar aquí: http://samples.unijimpe.net/fancyupload/img/progress.gif

onyx
Publicado: 23/08/2008 5:26 pm

excelente enlace lo probé y funciono muy bien, quiero saber si me pueden colaborar para realizar lo siguiente, deseo subir las fotos pero necesito cambiarle el nombre y esto depende de un valor en una base de datos, si tengo foto= 1000 quiero q las 3 siguientes al guardarlas queden 1001, 1002, 1003 espero ser claro muchas gracias

Sebastian
Publicado: 24/08/2008 3:38 pm

Tengo el mismo problema que Jesus con el error 2660. Me fijé en lo que dijeron y no es eso. Bajé el ejemplo tal cual está y no me funciona. Ideas de qué puede estar mal o qué me falta?

saludos!

samaritano
Publicado: 25/08/2008 7:56 pm

una vez integrado en la web, los demás usuarios deberán descargarse algún tipo de plugin para verlo? en caso afirmativo, es automático?

chavex
Publicado: 05/09/2008 2:25 pm

Soy un admirador de lo hacen este sitio …. me mantengo visitando ahora me toca haver una consulta … como puedo cambiar el parametro para si intento subir una foto con un nombre que ya esta alojado en el servidor cambie el nombre a otro ejemplo.. foto_1, foto_2, etc. o bien podria poner fecha hora minutos y segundos como nombre al archivo pero cunado intento subir mas de in archivo solo copia uno de ellos pues intenta asignar el mismo nombre a todos………..

chavex
Publicado: 07/09/2008 10:36 am

Bueno ya lo he resuelto modifivando el archivo UPLOAD.PHP

quedaría así…

<?php
if (isset($_FILES[‘archivo’])) {
$file = $_FILES[‘archivo’][‘tmp_name’];

if (file_exists(«files/».$_FILES[«archivo»][‘name’])) {

while(file_exists(«files/».$name)) {
$Count += 1;
$name = $Count.$_FILES[«archivo»][‘name’];

$status = «Archivo subido: «.$name.»«;
}
copy($file, «files/».$name);

} else {

$name = $_FILES[«archivo»][‘name’];
copy($file, «files/».$name);
$status = «Archivo subido: «.$name.»«;
}

}
if (!isset($_FILES[‘archivo’])) {
$status = «Error al subir el archivo»;
}

echo $status;
?>

sebas
Publicado: 18/09/2008 7:02 pm

hola buenas,

por que me sale este error?

httpStatus 403

como puedo arreglar este problema

saludos.

mati-2i
Publicado: 20/09/2008 8:11 am

se le podra anadir al fancyupload una ruta debajo que te lleve a la imagen ?? como con el Hosting de Imagenes en PHP ??

saludos y espero sus respuestas !!

djfenix chile
Publicado: 21/09/2008 5:06 pm

Tambien tenia el error 2660, pero a mi me paso algo curioso, no modifique ni una sola linea de codigo, solo actualice el flash player a la version 9 y Santo remedio. Increible como un simple parche te ahora horas de programar y cabecearte donde chucha esta el error. Y yo que crei que estaba haciuendo algo mal, jejeje, la falta de sueño hace marearse en procedimientos basicos.

christian
Publicado: 22/09/2008 9:29 am

quisiera saber como puedo enviar mas parametros por medio de estas clases que me parecen mas interesantes, me gustaria enviar una despcricion extra del archivo que ingresara el cliente, que archivos debo cambiar y en que parte??? de ant mano gracias por su colaboracion.

Diego
Publicado: 24/09/2008 12:41 pm

a mi me sale el error 2038 cuando trato de subir un archivo rar de 80 MB, a que se debe?

Diego
Publicado: 24/09/2008 2:22 pm

ahora me salió :httpStatus
500 :S

Sergio
Publicado: 26/09/2008 9:06 am

Alguien sabe si se pueden definir que tipos de archivos le puedo permitir subir? si solo quiero que suba jpg, gif, bmp

como puedo hacerlo.
mil gracias

Gabriel
Publicado: 27/09/2008 2:44 pm

Definitivamente muy hermoso… tenes idea como los puedo llegar a hacer pluguin de wordpress? desde ya muchas gracias… muy buen sitio!

carlos
Publicado: 09/10/2008 7:44 pm

hola este upload esta muy bien pero quisiera o no se si lo tenga,
cuando subo el archivo se va a una carpeta files quisiera que cuando lo subiera me desglozara los archivos subidos y poder borrarlos

Guillermo
Publicado: 17/10/2008 11:25 am

A mi me da un error que no he logrado quitar:

httpStatus
301

Alquien tiene alguna idea que pude ser???
Gracias

fancy upload
Publicado: 24/10/2008 8:12 am

Yo he testeado bastante esta aplicación y es realmente personalizable.

Recordad que de manera global se pueden modificar valores en el fichero «FancyUpload2.js»… como el tamaño máximo de ficheros en bytes, el número maximo de ficheros, etc.

“limitSize: false,” ~ tamaño máximo
“limitFiles: 5,” ~ número máximo de ficheros

De manera individual, se realiza de otra forma, como detallo en mi sitio.

Un saludo,
Alejandro Arco

djfenix chile
Publicado: 26/11/2008 8:12 pm

NOTA IPORTANTE: Para quienes tengan instalado flash player 10, les marcará un mensaje de ERROR (Al menos en internet explorer, en mozilla no he probado) el que pueda hacerlo correr con este bug, que publique aqui un link con el comprimido y como lo hicieron funcionar

Saludos

Rob
Publicado: 06/12/2008 4:26 am

Buenas , no me funciona ni el ejemplo de ustedes ni el que me baje. Este es el error que obtengo.

Error: Permiso denegado al llamar al método Location.toString

Un slaudo

Juan
Publicado: 06/12/2008 6:36 am

A mi tambien me sale el mensaje de error ¿Alguien ha encontrado ya alguna solucion ?

unijimpe
Publicado: 06/12/2008 1:38 pm

Hola el problema es que este script utiliza Flash para su funcionamiento y hace poco hicieron el lanzamiento de Flash Player 10 el cual tiene cambios en los metodos a utilizar para el upload de imagenes e interacción con el browser.

Pero también ya han salido las correcciones para este script en FancyUpload for Flash 10 y el código corregido lo puedes descargar desde: digitarald-fancyupload.

Joan
Publicado: 10/02/2009 6:30 am

Buenas.

Me he bajado los archivos modificados de la dirección que indicas: http://github.com/digitarald/digitarald-fancyupload/tree/master, pero no se si tengo que incluir algún archivo mas o algo, porque no consigo que me funcione correctamente.

Me podrían decir si tengo que incluir alguna cosa mas??? Ya que necesito seguir utilizando FancyUpload con Flash 10.

Muchas gracias.

miguel
Publicado: 01/04/2009 1:20 pm

hola:
bueno atodo esto yo no se mucho de este metodo, pero intente aderirlo a una pag que hize para subir archivos a l servidor web, solo que utilize el metodo input file ala hora que quiero buscar un archivo para comenzarlo asubir en (href «#») no me muestra la ventana de explorador podrian ayudarme conesto???
gracias…
saludos!!!

miguel
Publicado: 01/04/2009 6:36 pm

mmmm…
pues creo que al usar flash no se como hacer que funcione en el index pues

usando

method post
multipart form/data
input name
si funciona
y con href no logro hacer que explore
para cargar el archivo!!!
y lo pueda trepar al servidor

diego
Publicado: 07/04/2009 10:37 am

yo tampoco entiendo!!!, he bajado esos archivos que dicen pero no sé que hacer!, tengo que reemplazar los js??, en realidad yo modifiqué bastante el fancy upload para que tuviera los requerimientos que me pidieron, no quisiera volver a tener que hacer esos cambios!!!

Algrox
Publicado: 26/08/2009 1:33 pm

man yose que es viejo eltema pero me causa error al querer subir el archivo al servidor espero respueste al dar borwse dice error en un msg gracias

Consulta
Publicado: 14/09/2009 1:30 pm

Hola, podrías realizar un tutorial nuevo pero con la versión para flash 10?
Será muy agradecido.

Novato
Publicado: 16/10/2009 12:24 am

Hola, disculpa he bajado el ejemplo de esta página y cuando le doy en el boton para seleccionar los archivos me manda una ventana que dice error no se mucho de esto pero me interesa aplicarlo a un proyecto que estoy realizando me gustaria pudieras ayudarme.

Mil gracias..!

junior
Publicado: 16/10/2009 1:59 pm

grasis por darme una oportunidad

G0L3M
Publicado: 16/05/2011 5:51 am

El ID de los botones
( —– Browse Files —— )

no coincide con el evento al que es referenciado
( —- $(‘bt-browse’).addEvent(‘click’, function(){ —- )

Aunque este post es muy viejo sigue apareciendo asi que mas vale tarde que nunca..

Alfonso Araya R.
Publicado: 12/11/2011 6:35 pm

Hola..

Viendo el codigo.. queria hacer una pregunta…
Necesito me puedan ayudar… tengo problemas con la implementación de la funcion onComplete.
De la pagina de fancyupload descarge el codigo y este me funcionan super bien, realize algunas modificaciones tanto al php como al js y para que no solo me subiera las imagenes al servidor si no que las redimencionara y las guardara en una bd, todo esto funciona ok… pero necesito que al completar la carga de todas las imagenes se ejecute un codigo php que me envie un correo… he probado varias formas de hacerlos pero ninguna me ha dado buenos resultados.

Me podrian dar un ejemplo que me clarifique de como realisar esta funcion…

de ante mano muchas gracias

Atte.
Alfonso Araya R,

rodolfolp
Publicado: 30/08/2013 11:02 am

A mi no se me ve nada. copie los archivos como en el tuto. Lo que veo que falta es el archivo CSS. Que le pongo al CSS?.Gracias

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)