I have a user form (username, email, pass,...) where the user can upload an avatar.
What I'm trying to achieve here is that the user can upload the avatar and a thumbnail is shown, but until the form is ultimately submit (with a button wich is referenced in the PostbackTriggers) the avatar+thumb are not saved but stay in Telerik temp dir for uploaded files.
It seems that if I want to show the uploaded file while the user still has to complete and submit the whole form, I have to somehow trigger the PostbackTriggers otherwise I wan't be able to access the uploaded file to show it on the page.
On the other side, if I trigger PostbackTriggers when the user uploads the avatar (to show a preview of it) then I won't be able to access uploaded file when the form is ultimately submit since the RadAsyncUpload file collection has already been deleted.
What I don't understand in the logic implemented in this control is why I cannot access uploaded files collection unless PostBacktriggers are fired. I mean.... I can understand this to have the RadAsyncUpload_FileUploaded event fire automatically for each uploaded file when PostBacktriggers fires. This is a great implementation BUT I really don't understand why I shouldn't be able to access "manually" the collection even if PostBacktriggers are not fired with RadAsyncUpload.UploadedFiles.
On thing is to let the FileUploaded event fire when one of the PostBacktriggers is "clicked", another thing should be to be able to access manually the UploadedFiles collection at anytime server-side. I'm missing the logic behind this limitation in the control.
I really hope this possibility will be implemented, it will make most common integration scenarios much more seamless and really I don't understand why it should not be. In the meanwhile, since in the hiddenfield
All the file informations are present (including temp file name/dir in encripted JSON metadata field I suppose), could you suggest a workaround to parse this server side on button click even when PostbackTriggers is not fired? I think it's the only and simpliest solution so far for temporary uploaded files manipulation (like for example image preview...)
Thanks in advance
17 Answers, 1 is accepted
Here is how the AsyncUpload works, when its default configuration is used.
- You click on the "Select" button and select a file/s.
- The control automatically starts to upload it into the temporary
(by default it is "App_Darta\RadUpload") via the upload handler.
- After you cause a postback the file is moved from Temporary to the Target folder. Here you can set the PostBacktriggers property to specify which button will submit the file.
if you want to access the files on the server do not set TargetFolder property of the AsyncUpload, but handle
OnFileUploaded event (it will be fired for every file) or read those files on a button click.
For the described scenario I think it is better to use Custom Handler and make all the validation on the Client.
This is what I tested and how it works to my actual understanding:
- I don't have any TargetFolder set at all
- If I don't set any PostbackTriggers it posts back the file collection after the upload ended and triggers the OnFileUploaded event for each uploaded file.
The problem at this point is that if you later on confirm the form postback, you will have an empty UploadedFiles collection (since it has been alrady cleared on the last upload and OnFileUploaded event)
- If you setup PostbackTriggers so that the UploadedFiles collection is processed (and eventually OnFileUploaded event fired) correctly after the whole form postback, you won't be able to manipulate uploaded files (for example for the most common event of showing a preview of the uploaded image) unless you submit the whole form.
I think the idea behind PostbackTriggers property, to trigger the OnFileUploaded event for each file is really great and somehow "genial" BUT what I really dislike and don't understand in this control implementation is that I cannot access UploadedFiles collection during other events (like button clicks or such) for temporary processing of uploaded files.
Even more since the MainContent_RadAsyncUpload1_ClientState is always available so I really don't understand why we shouldn't access it at any time regardless of PostbackTriggers or OnFileUploaded event.
Thus until the control logic stays how it is now (hint and hope for a revision based on this suggestion) my best option is to "manually" access the MainContent_RadAsyncUpload1_ClientState to retrieve and manipulate temporary uploaded files.
So... any hint on the easiest way to extract temp file name from the json/encrypted metadata in MainContent_RadAsyncUpload1_ClientState value?
Thanks in advance.
I suggest that you to use Custom Handler and make the validation in the handler or on the client. The temporary file name will be passed as a parameter of the Process() method of the handler:
Sample is attached.
thank you for your kind answer, but what I'm striving for is much simplier and shouldn't require mangling with the handler.
I found a workaround wich is still overkill considering that in my opinion this functionality should be offered natively from the controls, so that the UploadedFiles collection could be checked at any time server-side, regardless of the PostbackTriggers/OnFileUploaded event.
This is how I solved, I created and helper wich retrieves the original file name and the temp file name for every uploaded file and puts them in a dictionary.
I had to resort to Json.NET library (for simplicity in deserializing and querying what I needed) and a stripped down version of Telerik CryptoService class to decrypt the metadata.
THen I can access this helper this way in code behind:
Where the key is the temp file name (full path) and the value is the original file name.
Do you think it would be useful to open a feature request to access UploadedFiles collection natively at any time not only after triggers?
I'm glad to read that you were able to found a solution. Regarding the feature request. There is no need to open it, because such functionality doesn't make sense. File are submitted on postback and then the UploadedFiles collection contains information about them. After that they are uploaded, which means that you probably finished to work with them. In case you need to have the newly saved files you may get their full names at the time, when the UploadedFiles collection was accessible. Same is valid when PostBackTriggers are used.
accessing the uploaded files collection before the final postback (so for example on a button click in the form, on a dropdownselect or just after an upload) makes sense in many scenarios where you need to handle temporary uploaded files before submission. The most common example that comes to my mind is showing the thumbnails of the file you uploaded before confirming and submitting the actual form but there may be several similar scenarios. If you look in this forum you'll find several requests on this subject
We are going to consider to add this functionality. That's why I have opened a new feature request. Please vote for it.
Guess this would be a nice addition making the control even for flexible to developers.
You could configure RadAsyncUpload to use Custom Handler. This way once the file is selected it transferred to the upload handler where you can read the file and return custom result back to the client
Similar to this demo http://demos.telerik.com/aspnet-ajax/asyncupload/examples/imageuploader/defaultcs.aspx
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
I've implemented your custom handler, and it works as expected. I'm struggling now with this issue.
Let's say I want to add new parameter with e.g. guid id assigned to file name (customized file name), then append it to response context and on client side in OnClientFileUploaded I want to access (evaluate) it through args parameter value.
Last line in the handler is return CreateDefaultUploadResult<UploadedFileInfo>(file);
Maybe If I was able to expand the <UploadedFileInfo> class, then I can append some new attribute ?
Please help me to solve this issue.
Thank you for aour suggestion, but I need it in opposite way. As I wrote above, I want to create new parameter in IAsyncUploadResult Process method and return in back to client in Response.Write (mabye somehow through UploadedFileInfo class) and access it on OnClientFileUploaded method through args.
Browse the source code of this demo: AsyncUpload - Custom Http Handler
1. Custom Upload Result is created. It contains the parameter that you want to return:
2. Set this parameter in the Process() method.
3.Get this parameter through the args.get_fileInfo() object:
I hope this helps.
thank you for suggestion.
Because I don't need to obtain any custom information passed from the page, I slightly modify code in IAsyncUploadResult Process method...
It works as expected. Now, I'm able to get custom parameters on client side after file has been uploaded to server :-)
For those who experienced similar issue here is the link which solve it.