-
Upload file in one click
Hello - Does any one have a code snippet how to upload file with single button click.
Currently I have a fileuploadfield which has browse button. After user selects the file via browse button, he has to click the upload button to actually upload the file.
Can we do both operations in one single click?
Thanks
Vishal.
-
-
Hi @vishal.jhala,
Please do not duplicate threads:
http://forums.ext.net/showthread.php?14908
Please feel free to bump (post a new message) a thread if it leaves non-answered.
-
Hello Vladimir - Thank you. Suggestion works. In one single click I am able to upload the file to server and save it.
Second part of the problem is image button. All other buttons on website are images in specific theme. This browse button from fileinputfield stands out as its a simple button. I tried putting imageurl property in this tab but no success. Do you know how I can replace default browse button with a image?
Code:
<ext:FileUploadField hidden="false" ID="FileUploadField1" runat="server" ButtonOnly="true" ImageUrl="./Images/Upload.jpg" >
<DirectEvents>
<FileSelected
OnEvent="UploadClick"
Before="
Ext.Msg.wait('Uploading your photo...', 'Uploading');"
Failure="Ext.Msg.show({
title : 'Error',
msg : 'Error during uploading',
minWidth: 200,
modal : true,
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});">
</FileSelected>
</DirectEvents>
</ext:FileUploadField>
@Daniil - Forgive my ignorance. Still learning the forum rules.
Regards
Vishal.
-
Please use .IconCls.
Example
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<style type="text/css">
.my-icon {
background-image: url("image.jpg");
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:FileUploadField
runat="server"
ButtonOnly="true"
IconCls="my-icon"
ButtonText="" />
</form>
</body>
</html>
-
Hello Daniil - Thanks. It partially worked for me.
Now it does select the image but the size of the button is the smallest size it can be when there is no button text. I tried increasing the button width/height by setting property in fielinputfield. Since it did not work, I also tried the CSS style width/height. However the button size did not increase to fit Image size.
Thank you.
Vishal.
-
Please use the .buttonCfg config option.
Example
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<style type="text/css">
.my-icon {
background-image: url("iamge32x32.jpg");
}
.my-button .x-form-file-wrap {
height: 32px !important;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:FileUploadField
runat="server"
ButtonOnly="true"
IconCls="my-icon"
ButtonText=""
CtCls="my-button">
<CustomConfig>
<ext:ConfigItem
Name="buttonCfg"
Value="{
width : 32,
height : 32
}"
Mode="Raw" />
</CustomConfig>
</ext:FileUploadField>
</form>
</body>
</html>
-
Thank You !! It worked well.