Welcome Guest Search | Active Topics | Sign In | Register

AjaxUploader Options
Nezdet Arif
Posted: Monday, February 25, 2008 11:20:50 AM
Rank: Member
Groups: Member

Joined: 2/16/2008
Posts: 7
Hi!

I want to customize the upload. verytime I upload a Image the image should be shown in a thumbnail.

How is it possible??
eo_support
Posted: Monday, February 25, 2008 11:29:18 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

The uploader only helps you to upload the image files, it does not help you generating thumbnails. Once the file is uploaded, it would be exactly the same as if the file has always been on your server. So if you can find/write some code to generate thumbnails for an existing image file, you should be able to use it together with our uploader to achieve what you want. Generating thumbnail in .NET is very easy, you can find a short tutorial at here:

http://www.eggheadcafe.com/articles/20041104.asp

Thanks
Nezdet Arif
Posted: Monday, February 25, 2008 12:08:02 PM
Rank: Member
Groups: Member

Joined: 2/16/2008
Posts: 7
How can change the progressbar to a loding.gif image...

And how can I make it ajaxenabled when a image gets uploaded. Imean the image shoudl be shown on the page using ajax
eo_support
Posted: Monday, February 25, 2008 12:15:52 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

To change the progress bar to a loading gif, you would need to:

1. First to edit LayoutTemplate to remove the progress bar;
3. Place a loading gif in the page and set it's style.display to "none" so that it's initially invisible;
3. Handle the progress bar's OnClientSideProgress event. Inside that event handler, you would check the whether the upload is in progress, and if it is, you would use JavaScript to display your loading image, and if not, to hide it;

To AJAX Enabled when a image gets uploaded, you need to:
1. Set the AJAXUploader's AutoPostBack to true;
2. Place the AJAXUploader inside a CallbackPanel control;
3. Set the AJAXUploader as a Trigger of the CallbackPanel control;
4. Handle the AJAXUploader's FileUploaded event on the server side;

This way when the file finished uploading, the AJAXUploader's FilePosted event will be fired through AJAX CallbackPanel control.

Hope this helps.

Thanks
Nezdet Arif
Posted: Monday, February 25, 2008 3:27:04 PM
Rank: Member
Groups: Member

Joined: 2/16/2008
Posts: 7
Thanks a lot.. it works...

But I have one problem.. Ho do I het the uploded filename?? I have tried with AJAXUploder.Postedfiles... it doesnt work..

My Other question is, I want to put a delete button for everyimage.. are there any good solutions using ajaxuplodercontrol...

How do I get use of teh uploaded files I mean they don't get uploded like a image.. Why is that?? and should I convert them or should I let them be like that??
eo_support
Posted: Monday, February 25, 2008 3:37:58 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

You do get the uploaded file name through AJAXUploader.PostedFiles. It contains a list of AJAXPostedFile objects. For each of those objects, you can get the original file name and the temp file name used on the server side. Here is an example about how to access those names:

http://www.essentialobjects.com/Demo/Default.aspx?path=AJAXUploader\_i8

Delete has nothing to do with the uploader once the file is submitted (you can delete unsubmitted files with uploader). It's something like your first question about thumbnail, once the file is transfered to the server, it no longer has anything to do with the uploader. The uploader uploads the file for you and that's all.

As for the third question, you are probably look at the TempFileLocation. If you download the latest version, you will find an additional FinalFileLocation, set that property and the uploader will automatically copy the file for you to that directory. The whole process is like this:

1. Someimage.gif on the client side;
2. When it gets uploaded to the server side, it first sits in TempFileLocation, with a automatically generated very long temp file name;
3. It is then moved to FinalFileLocation. When AJAXUploader moves the file, it also rename it to its original file name. So in the end you will get someimage.gif in your FinalFileLocation;

Step 3 is only implemented in the latest version. With previous version, you will need to write code to do step 3 by yourself.

Hope this makes sense.

Thanks
Nezdet Arif
Posted: Tuesday, February 26, 2008 8:51:43 AM
Rank: Member
Groups: Member

Joined: 2/16/2008
Posts: 7
protected void AJAXUploader1_FileUploaded(object sender, EventArgs e)
{
//Get all the posted files
EO.Web.AJAXPostedFile[] files = AJAXUploader1.PostedFiles;

//Delete all posted files
string s = string.Empty;
foreach (EO.Web.AJAXPostedFile file in files)
{
AJAXUploader1.FinalFileLocation = "~/upload/temp";
s += System.IO.Path.GetFileName(file.FinalFileName);
s += "<br />";
imageThumb5.ImageUrl = "~/upload/temp/" + System.IO.Path.GetFileName(file.FinalFileName);
}
}

I have tried to show the picture in a image component(imagethumb5)... But it doesnt work. do you have any idea ?? Do I have to do any Delay until the picture has been created???
eo_support
Posted: Tuesday, February 26, 2008 9:03:27 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

You didn't use FinalFileLocation correctly. You should set it once at design time and that's it. You should never change it at runtime in your code. Once you set that correct, you can do:

Code: C#
foreach (EO.Web.AJAXPostedFile file in files)
    imageThumb5.ImageUrl = file.FinalFileName;


FinalFileName always contains the full path. So there is no need for you to do any other kind of conversion. If that does not work, set a break point before you set imageThumb5.ImageUrl and check whether the file specified by file.FinalFileName is indeed there. If the file is there, then it's your image thumbnail code problem, if the file is not there, then it's the uploader's problem.

We do not know whether you have to delay until the thumbnail is created ---- that would have to do with your thumbnail creating code/control. It has nothing to do with uploader. As we have stated many times, the uploader uploads the file for you and once it transfers the file to the specified folder, it is done. There is nothing more beyond that as far as from the uploader's concern.

Another issue you want to pay attention is, if the user uploaded multiple files thus the foreach loops more than once, you would still only have one imageThumb5 in your code. That may be something you want to improve.

Thanks
Nezdet Arif
Posted: Tuesday, February 26, 2008 9:40:06 AM
Rank: Member
Groups: Member

Joined: 2/16/2008
Posts: 7
I have done that.. but it doesnt work..

<eo:AJAXUploader ID="AJAXUploader1" runat="server" AutoPostBack="True"
Width="250px" onfileuploaded="AJAXUploader1_FileUploaded"
TempFileLocation="~/upload/temp" FinalFileLocation="~/upload/temp">
</eo:AJAXUploader>

Iam using the same picture that has been uploaded by the uploader... Iam not generating the picture to create thumbnails, not yet..
I have tested the link by putting breakpoints... and it's the same link... don't know why it doesnät show the image.

<eo:CallbackPanel ID="CallbackPanel1" runat="server" Height="150px"
Width="200px" Triggers="{ControlID:AJAXUploader1;Parameter:}">
<div class="thPolaroidBackground">
<asp:Image ID="imageThumb5" ImageUrl="~/items/itemSmallPolaroidCamera.png" AlternateText="Ladda upp din bild med plus-tecknet" runat="server" />
</div>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<br />
<eo:AJAXUploader ID="AJAXUploader1" runat="server" AutoPostBack="True"
Width="250px" onfileuploaded="AJAXUploader1_FileUploaded"
TempFileLocation="~/upload/temp" FinalFileLocation="~/upload/temp">
</eo:AJAXUploader>
</eo:CallbackPanel>




Server-code
protected void AJAXUploader1_FileUploaded(object sender, EventArgs e)
{
//Get all the posted files
EO.Web.AJAXPostedFile[] files = AJAXUploader1.PostedFiles;
foreach (EO.Web.AJAXPostedFile file in files)
imageThumb5.ImageUrl = file.FinalFileName;

//Label2.Text = s;

//string imageUrl = @"~/Thumbnail.Ashx?ImgFilePath=upload/temp/" + s + "&width=30&height=30";
//string displayUrl = @"~/Thumbnail.Ashx?ImgFilePath=upload/temp/" + filename + "&thumb=no&width=30&height=30"; sb.Append("<td>&nbsp;</td>");
}
eo_support
Posted: Tuesday, February 26, 2008 9:47:11 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

I've setup a web meeting for you. Please see your private messages for the meeting Url. We will help you to setup displaying an uploaded image file with standard ASP.NET Image control, after which you can work on thumbnail part.

Thanks


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.