I have a update panel, in the update panel I have fileupload control and button control, On button click, I need the file that I have upload in the fileupload control in updatepanel.
Exact scenario, I have 8 tabs on page, each tab contains too much information, One of the tab is Attachment, when user click on Add New Attachment Modal Popup shown, Modal contains detailsview in Updatepanel and in the detailsview I have fileupload control, when user hit save button, detailsview inserting event fired, In the inserting event I need the file that I have upload.
Please Note, My page is heavy and I don't want full postBack.
Does anyone have solution of this issue?
Advance thanks for your kind help.....
For solve this problem, Please see the following step.
Add ajax-upload to your detail view.
iframe-based uploader like Resource#1.
Silverlight-based & Flash-based uploader. I like this technique because it doesn't require any server-side script for display current upload status. But in HTML5, you can create this without using any web browser plug-in.
Commercial uploader like Resource#2. that use hidden iframe for uploading.
Upload file to temporary location.
System response the temporary location. Next, client keep temporary location in hidden input in detail form.
Keep temporary location with session_id. You can store it in database or Session variable depend on your framework.
When you click on the save button, the system will move the files to their real location
Note. System will automatically delete the expired file from the temporary location.
Resource
ASP.NET File Upload with Real-Time Progress Bar
ASP.NET File Upload like GMail (Commercial)
Update
After almost one year, I just found a great 3rd-parties control for this question. This is an open source plug-in of jQuery. It name Plupload that allows you to upload files using HTML5, Silverlight, Flash or normal forms and it provide some unique features such as upload progress, image resizing and chunked uploads.
You can try & test Plupload by click here.
Can't be done without co-operating binaries being installed on the client. There is no safe mechanism for an AJAX framework to read the contents of a file and therefore be able to send it to the server. The browser supports that only as a multipart form post from a file input box.
The problem is with the way the HTML file upload control works, has nothing to do with ASP.net, for the file upload control to work you need a full post of the form data. You can only simulate that your are not doing a full postback, by doing all the operation in a hidden iframe that does the actual uploading
The sites you see that do provide this functionality generally use flash or an iframe so that the postback occurs in the iframe and gives the illusion of an ajax request.
HTH
OneSHOT
I've tried swfupload (http://swfupload.org/), but do keep in mind that you have to jump through hoops if you're using forms authentication with non-IE browsers. This is apparently a flash bug, and it's not fixed in flash 10. I decided against using it in our framework because of this bug, but it was otherwise a great product.
I recommend the uploader widget from YUI. See http://developer.yahoo.com/yui/uploader/
I think you could use it to accomplish your goal. Your javascript would need to fetch the file back down to the client from the server after it completed its upload. But the page would not refresh--the upload is through flash and a hidden iframe. The download to show the file's contents to the user would be via ajax.
If the user does not "approve" the upload, then simply make another ajax call to the server to delete the file.
Related
I have a web form that requires users to fill out some information and upload an image.
What I don't understand:
If I use uploadify to select a file doesn't it upload it right away to the server? Is there a way to defer that until the user would click on a form submit button? Or at least not save it to the file system?
Most examples use a custom HttpHandler for uploading files, but my file upload is part of a form. Should I still use a HttpHandler for that?
Well, I'll try to answer all your many questions, one by one. But before anything, open the official documentation because I will rely on it for answers.
If I use Uploadify to select a file doesn't it upload it right away to the server?
As you can see on the first demo, you can have a anchor (or a button or anything) to trigger the upload start. The Uploadify don't upload nothing until it's done (if the property auto isn't true).
Is there a way to defer that until the user would click on a form submit button?
Like described above, yes. And it's the default way (since the default value of auto is false).
Or at least not save it to the file system?
While the button doesn't trigger the .uploadifyUpload() method, nothing goes to the server. But when the Uploadify starts sending, it will be handled by the server (with the HTTP Handler). The handler is the guy that save it to the file system.
Most examples use a custom HttpHandler for uploading files, but my file upload is part of a form. Should I still use a HttpHandler for that?
As described on the script property, you can point to any server-side language that will handle the HTTP Request containing the data. The HttpHandler is the right thing because it haven't any other processing before or after the code you write. It isn't hard. The official forum shows some samples. And here on StackOverflow we have many questions about it, like these: Getting Uploadify Working in C# and Uploadify not working with ASP.NET WebForms.
The server shouldn't save the file until it is actually actioned by a handler. The Uploadify is providing the UI control for the gathering of the files and feedback. There are some settable properties available to control whether you want the "Auto" upload behavior or not.
You still need some king of server side processing for saving the data and an HTTPHandler is the usual way to do it. The HTTPHandler just operates on what file information it gets from the browser as part of a multi-part form data.
Here is an answer that provides more information about Uploadify: Getting Uploadify Working in C#
Hii,
Any one knows how to upload files to the physical location of the server. It is possible using file upload control that i know. But i want to avoid the external postbacking of the page. For e.g exactly like what in the yahoo mail did.
In yahoo mail latest version if you attach a file that won't post back and attach that file in to server. What is the technology behind that?
Normally when you submit a form it does a POST request to the server, causing a refresh. Ajax requests get round this by using JavaScript to send the POST data through to the server, and that doesn't need a page refresh.
Ajax requests can't be used to send file data though, so the best way to currently do it is with an iframe hack - you use JavaScript to dynamically build up a form within an iframe, submit that form via JavaScript, and listen for the iframe's onload event. So you know when the form has been submitted. A version of this approach is detailed here:
http://www.webtoolkit.info/ajax-file-upload.html
Other methods to do this would include using a Flash-based solution like http://www.swfupload.org/ or a wrapper like http://www.plupload.com/ - these will prevent you having to roll your own solution and will also provide some extra functionality - upload progress feedback, for example.
I am building a Flex Application that calls a .aspx page on the same webserver which builds a PDF report using SQL Reporting Services. When the report is built it prompts the user to open or save the PDF.
We are trying to find a way to display a Progress Bar to let the user know that the report they requested is being built, and then destroy the Progress Bar once the report is finished being built.
I've tried opening a new window using JavaScript and trying to catch when the window closes, as well as trying XMLHTTPRequest, but nothing to seems to work.
Does anyone have any suggestions?
There are 2 options:
Use the FileReference class in Flex to programmatically invoke your aspx file. You will be able to track the progress of the call from within Flex by listening to its events. But the users can only save the PDF, not open it.
Have an intermediate HTML page that displays a loading icon and then refresh itself to your PDF generating ASPX page. Encode your aspx url along with parameters etc and set it as a parameter to this intermediate page so it knows what to load.
If you don't have control over the page to be able to put JavaScript on it to hit a URL (or call back to the parent/opener), then you might consider whipping up an aspx page of your own to host a ReportViewer control, and display the report inside of that. This would require you to create a .NET website with a page and a web.config - you wouldn't need to do more than make it receive any parameters your report needs, and it would be do-able via inline-to-the-aspx code as opposed to requiring in-depth .NET knowledge.
Or, you could hit the SS-RS API and render the report directly. Here, you'd craft a URL with parameters for the report on the SS-RS API site to accept. I think, though I don't know for sure, that the SS-RS UI uses the API itself behind the scenes. By default the API is hosted in a site called "reportserver" - you might sniff HTTP traffic while the report is being rendered to get you started with the URL that you'd need to hit.
Another option not mentioned here is to create a .Net webservice, add it to your flex project and when it hits the result handler you know the file is created at that point.
I'm running into an issue where I have a FileUpload control in an UpdatePanel. When I attempt to save changes and upload the file, no file is found. If I remove the UpdatePanel everything seems to work fine.
Any ideas why this might be happening? And is there a work-around?
To upload a file you need to perform a full ASP.NET page postback, it does not operate over the partial postback method.
You'll need to register the button which "uploads" your file as a PostBackTrigger of the UpdatePanel's triggers.
There are lots of free (and non-free) AJAX file upload solutions, or you can easily create one, it's just a matter of putting your file upload control within an iframe and submitting the iframe page back to the server. It isn't really ajax, but it gives a visual impression of AJAX.
Here is the functionality I want:
User selects an image from their machine, hits an Upload button (or better yet the following fires on the onchange event of the file input), and is able to see a preview of the image they are about to upload.
Here is the current workflow I am using, but it seems suboptimal:
I have an image control, a file input control and a submit button control. When the submit button is clicked, the codebehind handles the OnClick event and loads the image from the file input element. It then stores it into a temporary folder on the web server and sets the image control's ImageUrl to point to it.
This works, but results in me having to do a lot of janitorial duty in cleaning up these temporary images. Is there a cleaner workflow for doing this?
If you have memory to burn:
cache the image bytes in memory
set your ImageUrl to an image handler (.ashx) with some sort of cache identifier
serve the image bytes from cache
if the user cancels or leaves, discard the cached bytes
if the user accepts, write the cached bytes to their final destination
You should upload and rename the image to match some sort of ID for your current record. Then, when you upload a new file, delete any old ones first, all in the codebehind.
If you are only showing a thumbnail, you should try to use an image library to resize the image before saving. This will save on bandwidth and storage space.
I am assuming that the problem you are trying to solve is for your application to have the ability to preview the image before the user commits to that image. Your current approach has many advantages but one disadvantage is orphaned image files in a temporary directory if the user previews several images before committing or abandons the operation all together.
I've noticed several popular social networking sites using a different approach. Basically, a Java applet is used to do the preview operation on the user's local machine. The only file uploaded to the server is what the user commits to. That approach solves the problem that you are running into; however, it introduces the new problem of requiring Java to be installed on the local machine and integrated with the web browser.
you can create a small executable to delete files on* that temporary folder, and attach it to a schedule task so it will clean your temp. folder once in a while. But I don't know if you're hosting on a dedicated server or shared hosting because with shared hosting, this doesn't work
and is able to see a preview of the image they are about to upload
...
When the submit button is clicked, the codebehind handles the OnClick event and loads the image from the file input element. It then stores it into a temporary folder on the web server and sets the image control's ImageUrl to point to it.
Imagine this conversation:
Jim: I don't know if I can afford to drive my car to work today.
Bob: Why don't you just drive to work? When you pay for it, you'll know if you can afford it or not!
Jim: Awesome!
You've just uploaded the file to show them the preview of the file they're about to upload...
While this will undoubtedly work fine if your users are uploading small images over fast connections, when someone tries to upload a 3 meg JPEG over a slow connection, and then wonders why their webpage locked up from selecting a file (they didn't even press submit remember, so you've effectively locked them up 'randomly'), you may wish to re-evaluate this as a solution.
To actually display the image before it gets uploaded, you will need to use some kind of flash or silverlight object (or perhaps a java applet) which can produce a thumbnail of the local file on the user's local disk, before it gets sent to the server. As ugly as this may sound, there literally is no way to do it without some client side plugin.