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
Related
I'm looking to get structured article data from webpage urls. So far I've found these two services http://www.diffbot.com/ and http://embed.ly/extract/demos/nlp. Are there better alternatives or is it worthwhile to write the code to do this myself?
If you'd like to skip the code, and are looking for a simple software for web scraping / ETL applications, I'd suggest Foxtrot. It's easy enough to use and doesn't require coding. I use it to scrape data from certain gov't websites and dump it into an Excel spreadsheet for reporting purposes.
I have done web scraping / content extract for quite some time now.
For me the best approach is to write a Chrome content extension and automate the browser with their API. This requires that you know Javascript and HTML. In one of my recent projects I use a background page with a couple of editable divs to configure the scraping session. I have some buttons on the background page to start the process. The background page loads a JS script which listens to click events of the buttons.
When one of the buttons is clicked I add a new tab for the scraping session with chrome.tab.create. The background js also defines some chrome.tabs.onUpdated.addListener to inject content scripts when the tab url contains a specific page/domain name.
The content script then does the scraping job for example selecting some elements with jquery, regular expressions etc and finally send a message with an object back to background JS using chrome.runtime.sendmessage. The background JS script listens to messages with chrome.runtime.onMessage.addListener and acts based on the content being extracted.
The extension also automates web databases by clicking for example the next page links.
I have added a timing setting to control the amount of links being clicked / tabs being opened per minute so that the access is slowed down on purpose and too much crawling is avoided.
Finally the results are being uploaded to a database with an AJAX call and inserted with a PHP page into MySQL.
When the extension runs the next time it compares the keys/links which already exist in the database with another AJAX call and ensures that only new information is being extracted.
I have also built extension like the above with Firefox but the best and easiest solution for me is a Chrome/Chromium content extension.
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.
I use WebAii to test an ASP.Net application. This application has an "Export to CSV" feature, and I would like to test that it works correctly with WebAii. Is there a way to access the exact source that was generated for a page?
I tried using ActiveBrowser.ViewSourceString, but it appears to work only for HTML. (it contains the HTML of the page that called the "Export to CSV" instead of the CSV content)
It may seem strange to use WebAii to test plain text content, when I could bypass WebAii and the browser and use HttpRequest to directly call the page. The reason why I need to do it this way is that the Export to CSV gets its parameters (a series of search filters) on the query string, and I need to make sure the calling code (an ASP.Net web page) is correctly passing the right parameters.
I work in Telerik's technical support department for WebAii. I'll try to assist. I need to know what happens when you click this "Export to CSV" button/link. Normally such a button causes the webserver to create a file and send it to the browser for downloading. You then save it as a file on your local machine. Is this what is happening or is the browser simply displaying the CSV content in its window?
ActiveBrowser.ViewSourceString is the right approach for getting at the HTML loaded in the browser window. It is possible that HTML contained in the framework is out of sync with what's actually in the browser. We cache the DOM for performance reasons. You can use:
ActiveBrowser.RefreshDomTree();
This forces the framework to resync it's copy of the DOM with what's actually contained in the browser. See if ActiveBrowser.ViewSourceString is now different after clicking on your "Export to CSV" button/link.
Feel free to post questions like this on our Telerik Testing Framework forum. http://www.telerik.com/automated-testing-tools/community/forums/webui-test-studio-developer-edition/webaii-automation-framework.aspx. This is where I hang out daily.
Cody
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/
User click on a link button and it will direct them to a url that is dynmaically generated which a pdf file. The browser will prompt the user to either save or open it.
I want to know if it is possible to downlaod the pdf file to the server then show the pdf file in the asp.net web page. When i google on this question, 99% of top link are some third party component. Is it a way to do this without purchase any 3rd party component?
thank
I use itextsharp, its a free open source c# port of the java itext library.
Makes generating dynamic pdfs in asp.net a breeze and there is lots of documentation/examples floating around.
I don't think that you'll have much luck without a 3rd party component. First, the issue isn't showing the PDF, it is generating it. For that, you'll need a library to help. Rolling one yourself would not be cheaper unless you have an enormous amount of unpaid time on your hands.
With respect to third-party controls, I recommend and use DynamicPDF from CeTe.
Yes there is a way to do this without a 3rd party tool, but it involves coding a PDF-to-html translator.
If this is something for a business, the RoI for the 3rd party control is that you don't have to spend hundreds of hours coding & testing this component, when you could buy one for just a few hundred dollars.
Now, an alternative is to code a page which displays the data in the same way which the PDF file generates it (this could actually be handled by RDLC). So that when the user clicks the link button, they are taken to this display page, from which they can download the PDF version if they want a local copy.
Regardless of how you generate the PDF, I have found a better user experience if you open the PDF in an IFRAME instead of the full browser window. You can give users instructions and maintain the browser navigation.
I think what you want to do is by going to: http://my_site.com/generate-pdf.aspx?=someId
this should in fact just show the PDF file?
What you need to do is change the Response type.
See here for how to do this with images.
Look up the Content-Disposition HTTP header. You can send back a value that requests the content be displayed inline instead of downloaded.