PDA

View Full Version : [CLOSED] [#1385] [4.2.0] Upload component



ADV
Sep 14, 2016, 11:41 AM
Hi,

it is possible to upload photos?

fabricio.murta
Sep 15, 2016, 5:30 AM
Hello @ADV!

You have the FileField component (http://docs.sencha.com/extjs/6.0.2/modern/Ext.field.File.html) to handle file uploads. But I believe that specifically for photos, it would be a matter of your server settings allowing the file extension and possible sizes or not.

Hope this helps!

ADV
Sep 15, 2016, 3:19 PM
Hello,
we are working with Web Forms.

Can you show me an example page that uses EXT.NET Mobile and that allows to upload a file to chosen by the user?

thank you.

fabricio.murta
Sep 16, 2016, 1:52 AM
Hello @ADV!

Here's an example using the FileField component to upload a file to the server:



<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
if (Request.Params["Photo"] != null)
{
FeedbackBar.Call("setHtml", "Status: File uploaded: " + Request.Params["Photo"]);
}
else
{
FeedbackBar.Call("setHtml", "Status: Waiting file to be selected.");
}
}
}
</script>

<html>
<head runat="server">
<title></title>
<script type="text/javascript">
var handleSubmit = function (item, e) {
var fileField = App.FileField1,
form = item.el.up('form').dom;

if (fileField.getValue() == "") {
return false;
} else {
form.submit();
}

return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />

<ext:FileField ID="FileField1" runat="server" Name="Photo" Label="Choose a file to upload">
<Listeners>
<Change Handler="App.FeedbackBar.setHtml('Status: File selected. Ready to upload.');" />
</Listeners>
</ext:FileField>
<ext:Button runat="server" Text="Upload">
<Listeners>
<Tap Fn="handleSubmit" />
</Listeners>
</ext:Button>
<ext:Component ID="FeedbackBar" runat="server" />
</div>
</form>
</body>
</html>


I hope this helps!

ADV
Sep 17, 2016, 12:12 AM
Thank you,
the server side I receive the file name.

You can also also explain to me how I get the file to be saved?

ADV
Sep 21, 2016, 7:46 PM
No answer for my question?

fabricio.murta
Sep 22, 2016, 7:39 PM
Sorry for the delay @ADV!

We are working on your question now, and will provide you a feedback in a while!

ADV
Sep 22, 2016, 8:28 PM
Ok, no problem.

I need client side code only.


Server side i usually use this code:


protected void cmdSignatureSave_DirectClick(object sender, DirectEventArgs e)
{
string fileNameWitPath;

string BIN_SIGN = e.ExtraParams["BIN_SIGN"];

fileNameWitPath = Session["ALLPATH"].ToString() + @"\Firme\CH_" + ((cIntervento)Session["CURRENT_INTERVENTO"]).ID + ".jpeg";
using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(BIN_SIGN);
bw.Write(data);
bw.Close();
}
}

X.Msg.Hide();

WindowSignature.Close();

X.Msg.Info(new InfoPanel { Icon = Ext.Net.Icon.Accept, Title = "Done", Html = "Salvataggio completato", UI = UI.Success, Alignment = AnchorPoint.BottomRight, HideDelay = 2500 }).Show();
}

fabricio.murta
Sep 22, 2016, 10:20 PM
Hello again, @ADV!

Well, it turned out that the component missed the correct ASP.NET bindings, which would make it much harder to handle the file upload per se.

Then we opened issue #1385 (https://github.com/extnet/Ext.NET/issues/1385) to log this problem and, ultimately, fix it.

You can already use the component for its entirety if you pull and build the Ext.NET Mobile sources off our github repositories.

The example that will work in the latest release of Ext.NET Mobile is the following:



<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
if (FileField1.HasFile)
{
FeedbackBar.Call("setHtml", "Status: File uploaded: " + FileField1.FileName +
" (" + FileField1.FileContent.Length + " bytes)");
}
else
{
FeedbackBar.Call("setHtml", "Status: Waiting file to be selected.");
}
}
}
</script>

<html>
<head runat="server">
<title></title>
<script type="text/javascript">
var handleSubmit = function (item, e) {
var fileField = App.FileField1,
form = item.el.up('form').dom;

if (fileField.getValue() == "") {
return false;
} else {
form.submit();
}

return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />

<ext:FileField ID="FileField1" runat="server" Name="Photo" Label="Choose a file to upload">
<Listeners>
<Change Handler="App.FeedbackBar.setHtml('Status: File selected. Ready to upload.');" />
</Listeners>
</ext:FileField>
<ext:Button runat="server" Text="Upload">
<Listeners>
<Tap Fn="handleSubmit" />
</Listeners>
</ext:Button>
<ext:Component ID="FeedbackBar" runat="server" />
</div>
</form>
</body>
</html>


It is the exact same from before, except that now it is possible to use ASP.NET facilities to get the file handlers associated with the component.

Sorry for the incomplete example in the early reply, and thanks for raising the interest on the file upload field which ultimately lead us for detecting this issue!

fabricio.murta
Sep 23, 2016, 2:31 AM
Hello @ADV!

Reading your last response, maybe the solution above does not fit your needs. You may want to provide a sample on, maybe, how you do it in Ext.NET with the FileUploadField. Then we can check why it is not compatible with Ext.NET Mobile and either advice on how to proceed or apply the fix to the Ext.NET code, if any required.