How do I submit a form with a large file upload and send ajax requests? - asp.net

This works in other browsers but not in chrome. I am trying to allow users to upload large files and have an ajax call to update them on the progress of the file upload.
So a unique ID is generated on the client side and added to the action of the form before sending. Then the form is submitted (form only contains a file upload input) and an ajax call is made to get the progress of the upload.
The ajax call goes to another page and uses the ID to lookup the upload.
I am using JQuery 1.5.1. Debugging this and putting something on the error function give me nothing other than "error". Not very helpful. I used Chrome's debugger and it just says failed to load resource xxxx.aspx. xxx.aspx is the URL i needed. Turns out that there seems to be some sort of conflict between the form and the ajax call.
Is there some way to get around this?

you should really look at SWFupload, a great flash based uploader, with concurrent upload and progressbar support. Also it makes it really easy to use server-side, you dont need to implement upload percentage view as it client-side based.

not exactly an answer to your question, but a link to a tool that can really help you drill down and find good error messages, step through javascript code and such would be firebug for Chrome, I got the IE and Chrome versions working and use it very regularly, it has been a life saver and greatly has decreased debugging time:
http://getfirebug.com/releases/lite/chrome/
I would suggest making firebug a common tool in your debugging arsenal.

Use SlickUpload
It is a server control and module that does exactly what you are looking for and takes less than 10 minutes to setup.
Documentation: http://krystalware.com/Products/SlickUpload/Documentation/overview/

Related

Reading a PDF back from an iFrame?

I have a PDF document that is getting generated on the fly, and rendered on the fly to an iFrame within a radwindow. Basically the document is already largely prepopulated, however the user will still have a chunk of information that they are required to enter. I've found a good amount of information about sending a pdf TO an iframe, but not much information about going the other way. I have a button within the radwindow that can access the iframe object, however I'm somewhat lost as to where to go from there.
EDIT: The PDF is an editable form. I'm trying to pull back the entire PDF document as is, after the client side makes their entries to the form.
I think you'll need to send the file to the user so they can edit it locally and instruct them to upload it.
The content-disposition header with value attachment can help with the first task and you can use RadAsyncUpload to upload it: http://demos.telerik.com/aspnet-ajax/asyncupload/examples/overview/defaultcs.aspx.
I am not aware of ways to tap into the PDF viewer plugin the browsers use to show the PDF. Perhaps there is API from Adobe or some other third party plugin but that would rely on them and is out of your control.
Perhaps the JS PDF viewer from FireFox has something: https://mozillalabs.com/en-US/pdfjs/ but I don't know how stable and usable it is.
As per what was described in the comments, I ended up using postbacks through the PDF's themselves along with 1 pixel fields to store data required to identify the documents. It's a little hacky, but functional. I'm leaving this as an actual answer as this is as close to a real solution to the problem I originally had. This has been up and running for close to 4 years in this manner, and thus far hasn't caused any issues.

Getting Google Spreadsheet in the Background

We have a Google Spreadsheet from which we wish to load data into our webpage.
I started by using the Google Spreadsheet APi via C# and the Google API .NET libraries to read the spreadsheet and load it into an html unsorted list.
The spreadhsheet has about 200 rows, but could have more, as it will be updated frequently. So the problem is that the users have to wait until the spreadsheed data is retrieved and parsed before they can see anything in the webpage (the page is white whilst loading).
How can I load this data in the background whilst the page loads?
I've already written my code in C# and don't much want to spend the time swapping to javascript, but I will if I have to.
Could I use the AJAX Control Toolkit to do this? I know it will load html, but can I use it to fetch google data?
What can I do here that would be fast and easy?
[Edit]
The account that hosts the google spreadsheet is inside a google domain, so it's documents can't be shared to the public as a whole - only to individuals. The C# libraries allow me to use the account's username and password to log into the account to get the spreadsheet data, and so the spreadsheet doesn't need to be shared at all. Even if I went with a javascript/ajax solution, I would yet need this functionality.
Well, this probably isn't the BEST answer, but it IS a solution. I'd like to see if y'all have a better one.
Anyway, I found this, which is an example of how to use an asp:Timer to delay the calling of a function for a certain amount of time - in my case, long enough for the page itself to load. At least this way, the user gets to see the page, and can watch the nice loading-gif until the actual content arrives.
It is an AJAXy approach that allows me to keep my c# programming without having to add any javascript.

Is it possible to design an ASP.NET website that doesn't PostBack enough?

I'm bulding an ASP.NET website just to test my skills, and I'm using lots of callbacks that doesn't require a page refresh, and the URL doesn't change. In this example, assume I'm bulding a web-based Outlook with a treeview, a grid, and a detail pane.
Is there a standard (published or assumed) that says I should postback, or even update my URL from time to time?
The Standard you are probably looking for is called usability. DHTML, Ajax, or whatever you want to call it is fine until it breaks the users expectation of browser behavior. When the back button fails to work, and users can't bookmark the page exactly as they expect, you're doing it wrong.
I don't know about an official standard, but you may want to check out Gmail to see a good example of how something similar was done. The URL changes on the site much more often than the page refreshes.

Screen Scraping - how to get AJAX based filtered data

I am working on screen scraping, its easy when filteration in query string, but the problem in AJAX based filteration,
e.g. here is an sample URL
When you open this page, enter hotel name and click Go, Ajax filter work and show the result accordingly or you click on Next Page, it will shown next record using AJAX based.
please suggest me, how to handle these kind of issues when working in Screen Scraping?
Thank alot
You may want to try 2 Firefox add-ons. They are "Firebug" and "Tamper Data".
The "Console" window of Firebug shows the AJAX request and response.
You can then write scripts using the PHP/cURL library to mimic the request.
Do a http request as you normally do for any link or form sumbit but use the url used with ajax. Sometimes you may need to read the javascript source to determine how the url is built.

How can I get Gmail-like file uploads for my web app?

I want to add gmail-like file upload functionality for one of my projects. Can anybody help me with this?
My application is built in vb.net.
I would appreciate any kind of help or guidance.
Thanks
Check out SWFUpload, which is essentially a javascript api to flash's absolutely superior file upload handling capabilities. Best thing out there until the browsers finally catch up.
From link:
Upload multiple files at once by ctrl/shift-selecting in dialog
Javascript callbacks on all events
Get file information before upload starts
Style upload elements with XHTML and css
Display information while files are uploading using HTML
No page reloads necessary
Works on all platforms/browsers that has Flash support.
Degrades gracefully to normal HTML upload form if Flash or
javascript is unavailable
Control filesize before upload starts
Only display chosen filetypes in dialog
Queue uploads, remove/add files before starting upload
Demos
----- iframe upload -----
To start, you want to have an iframe on your page. This is meant for server communication. You'll hide it later, but for now, keep it visible. Give that iframe a name attribute, like "uploader" or something.
Now, in your form, set the target to the iframe's name and the action to a script you have on the server that will accept a file upload (like a normal form with a file upload). Add a link inside that form with the text "Add File". Set that link to run a javascript function which will add a new input to the form. This can be done via the DOM, but I would recommend a javascript library like jquery.
Once the new file input is added to the form, set the blur event of that input to a javascript function that will submit the form and then check it periodically for output. Reading an iframe can be tricky, but it's possible.
Have your file upload script output a "Done." or a filename or something when the upload is complete.
Check it every second or so until there is content. Once you have content, kill your timer and replace the file input with the name of the file (or "File Uploaded") or whatever.
Hide your iframe with css.
From YUI! (Yahoo User Interface), https://yuilibrary.com/yui/docs/uploader/
Multiple file selection in a single "Open File" dialog.
File extension filters to facilitate the user's selection.
Progress tracking for file uploads.
A range of file metadata: filename, size, date created, date modified, and author.
A set of events dispatched on various aspects of the file upload process: file selection, upload progress, upload completion, etc.
Inclusion of additional data in the file upload POST request.
Faster file upload on broadband connections due to the modified SEND buffer size.
Same-page server response upon completion of the file upload.
Totally Free
Here is the gmail uploader clone. This is the exact clone of gmail uploader with some extra facilities. You can see the thumbnails of images after uploading, Drag the thumbnails to change the order and replace any thumbnail. It is done using jQuery.
You can see the demo here. The source code is free to download in a single zip file.
I hope you can easily remove some code and get the desired thing. You may leave comments on the ABCoder blog if you need further help.
For a non-flash solution, you can use NeatUpload. I used it on an extensive project last year with a no-flash requirement. It's very easy to integrate into existing solutions. I thought it was a breeze to work with. Easier, in my limited experience, than working with SWFUpload in ASP.NET. Probably because NeatUpload is built just for ASP.NET.
You may use Flickr Uploader clone instead.
Are you talking about an upload without a full page postback? Take a look at http://www.phpletter.com/Demo/AjaxFileUpload-Demo/, which creates a hidden iframe, copies the input control, and uses the iframe to perform the post to get the file on the server.
If you're looking for the behavior where when the user clicks "attach file" and the file browsing dialog automatically pops up, that can be done via Javascript but doesn't work in FireFox, which has the security precaution of requiring the user to invoke the "Browse" button directly (rather than programmatically through script).
For the "automatic" upload, use Javascript to attach to the "change" event for the "value" property of the the 'input' control so that the will perform when a file has been selected.
Now it has been 2 years, I used the uploadify in my legacy system and it works good. but you need to write some hack code (such like hold the session).
I recommend you use jquery upload, which is pure HTML, no swf, no session problems and really great!
== on 2013, what I wrote:
I am considering which to choose, SWFupload or uploadify .
but on SWFupload's official website , it says that it has not been under active development and the author is hoping someday the SWFupload could revive...
so ... I decided to try "uploadify", which seems supports many options, callbacks with lots of demos. (after checking its source code, I guess the author wraps the "SWFupload v1" and "SWFupload v2" in his "uploadify v3"...)
and there's a full list of this kind of uploaders.
I'd like a little more clarification of "Gmail-like" file uploading.
do you mean how if it sits for a little bit, it automatically attaches it to a draft?
Gmail's code is difficult to find your way around, but if I had to guess, this is how it works:
When you click "attach another file", it inserts a regular input type file control. On IE, it may also programmatically trigger the click event on the "browse" button so the file dialog opens immediately (it doesn't do this on firefox, and I don't have IE handy, but I believe IE allows for this)
After you select a file, it detects the change event of the input control, and starts a timer.
When the timer triggers, it detaches the input element from the form, and adds it to a different form in a hidden iframe, placing a simple link in the main (visible) form. The hidden iframe is then submitted to upload the file. (It may also clone the input element, but I haven't tried whether this works.)
You can use iFrames for this

Resources