PDA

View Full Version : Uploaded file/image preview - fileuploadfield



abharambe
10 May 2012, 12:55 AM
Hello Friends,

I am using fileuploadfield, is there any way to see the preview for selected file/image.



Thanks,

sword-it
10 May 2012, 4:10 AM
Hi,

I think that you can't show the preview of the image. Perhaps you can a flash extention like this http://jsjoy.com/blog/ext-js-extension-awesome-uploader..

abharambe
13 May 2012, 11:17 PM
Hello sword-it (http://www.sencha.com/forum/member.php?427588-sword-it),

If I have to show some indication that image has been uploaded. That means any default image after I click on "Open file" button of file browser window.
Is it possible ? can we have listener for File Browser window that opens after we click on "browse" button of "fileuploadfield".


Thanks,

janvandeklok3
4 May 2013, 7:24 AM
build your own component like this :

/**
FileUpload element with optional preview for images

usage sample :

{
xtype : 'ELM908',
fieldLabel : 'upload your file here..',
anchor : '100%',
buttonText : 'Choose ..',
allowBlank : true,
previewLocation : 'bottom',
previewInitialSize : 'small',
previewSizeSmall : 60,
previewSizeLarge : 400,
value : 'http://localhost:80/x/myImage.jpg'
}


author : Jan van de Klok
**/
Ext.define('FileUpload_ELM908', {
alias : 'widget.ELM908',
extend : 'Ext.form.FieldContainer',


previewLocation : undefined, // possible values 'bottom' (default), 'left', or 'none'
previewInitialSize : undefined, // possible values 'small' (default) , 'large'
previewSizeSmall : undefined, // image size in pixels, default = 60
previewSizeLarge : undefined, // image size in pixels, default = 120
/**
* Original value of date when form is initiated
*/
initComponent : function() {
var me = this;

var upLoadButton = {
xtype : 'fileuploadfield',
ui: 'button-red',
//style : 'padding: 3px',
name : me.name,
id : me.id,
inputId : 'fileuploadfield_' + me.id,
margin : '0 0 0 -12',
layout : me.layout,
//anchor : '10%',
allowBlank : me.allowBlank,
// msgTarget : 'side',
buttonText : me.buttonText,
buttonOnly : true,
listeners : {
change : function(input, value, opts){
// can't get the file path directly from the component due to
// browser security that does not allow for javascript to access the local file system directly
// Browser will return a "fakePath" reference to the actual local file
// To work around this, we have to access the dom file directly from the input element!!!

var canvas =Ext.ComponentQuery.query('image[canvas="'+ input.inputId+ '"]')[0];
var file = input.getEl().down('input[type=file]').dom.files[0];

if (file.type == "image/jpeg" ||
file.type == "image/jpg" ||
file.type == "image/png" ||
file.type == "image/gif")
{
var reader = new FileReader();
reader.onload = function (e) {
canvas.setSrc(e.target.result);
}
reader.readAsDataURL(file);
canvas.show();
} else {
// canvas.setSrc(IMAGE_OFFSET +'images/no-photo.jpg');
canvas.hide();
}
}
}
}


var sizeSmall = 60; // image size in pixels, default = 60
if (me.previewSizeSmall != undefined){
sizeSmall = me.previewSizeSmall;
}
var sizeLarge = 120; // image size in pixels, default = 120
if (me.previewSizeLarge != undefined){
sizeLarge = me.previewSizeLarge;
}
var initialSize = sizeSmall;
if (me.previewInitialSize == 'large'){
initialSize = sizeLarge;
}
var previewImage = { xtype : 'image',
// src : IMAGE_OFFSET + 'images/no-photo.jpg',
frame : true,
canvas : upLoadButton.inputId,
// resizable : true,
width : initialSize,
height : initialSize,
animate : 2000,
hidden : true, // initially hidden
scope : this,
sizeSmall : sizeSmall,
sizeLarge : sizeLarge,
listeners : {
// bind the click event to the underlying component element (el) in order to be able
// to handle mouse clicks on an image
el: {
click: function(){
var canvasId= this.dom.previousSibling.outerHTML;
canvasId = canvasId.substring(0,canvasId.indexOf('" '));
canvasId = canvasId.substring(canvasId.indexOf('"')+1);
var canvas =Ext.ComponentQuery.query('image[canvas="fileuploadfield_'+ canvasId+ '"]')[0];
if (canvas.width == canvas.sizeSmall){
canvas.setSize(canvas.sizeLarge, canvas.sizeLarge);
} else {
canvas.setSize(canvas.sizeSmall, canvas.sizeSmall);
}
}
}

}

}
if (!Ext.isEmpty(me.value))
{
// if an existing value
previewImage.src = me.value;
previewImage.hidden = false;
}


// rename original name and id to avoid conflits
me.name = me.name+'_container';
me.id = me.id +"_container";
me.items = [upLoadButton];
if (me.previewLocation == 'left' || me.previewLocation == 'bottom' || me.previewLocation == undefined){
me.items.push(previewImage);
}
if (me.previewLocation == 'left'){
me.layout = 'hbox';
upLoadButton.margin = '0 0 0 -24';
if (previewImage.initialSize != 'large'){
previewImage.margin = '0 0 0 90'; // ALIGN THE IMAGE AFTER THE BUTTON
}
}
me.callParent(arguments);
}
});