I am looking to create a file upload progress bar for my webforms, I have read a few ways to do this yet all of those ways require server side scritps. I use a hosted CMS and do not have access to server side scripts. Is there a way to fake a progress bar using jQuery? I want it to be represented as realistic as possible. Meaning when I upload a large file it will show progress but not finish before the file finishes uploading. How can I achieve this?
Note: Solution must work in IE8+, FF, Chrome, Safari and preferably Android and iOS devices.
You can't find out the current progress of an upload using JavaScript alone. If you don't have access to the server, you should consider alternative methods, such as Flash.
Related
I'm looking to initiate a download in a webpage using either JavaScript or PHP. All of the examples I've seen use an iframe to load the source of the file. Unfortunately this method doesn't seem to work with all smartphone browsers, specifically my Samsung Galaxy S3. It seems to be a known issue with some of Android's stock browsers.
I cannot use a link because the download must happen auto-magically, and using document.ready or window.load to initiate a window.location call is not acceptable because even though the download initiates it stops all the JS functionality on the current page. I have some JavaScript that must run after the download has initiated.
Basically the flow is:
Show JavaScript progress bar to simulate download progress
Initiate download in background
Once progress bar finishes -> jquery.show new content on page (installation instructions)
Can't seem to find a cross-browser solution that will let me get through all 3 steps above.
Related questions:
Amazon S3 upload via Iframes
Progress Bar for Iframe File Uploads?
Using jQuery file upload plugin from Blueimp, my users are uploading files directly from their browsers. Then comes IE8, where the upload plugin uses the hidden iframe method.
I would like to monitor the progress of the upload, however according to browser support of jQuery file upload plugin, this is not possible in IE8, BUT:
I was wondering if one of the following workarounds is possible?
a. The answer for question 2. defines the workaround to querying manually the upload progress, which I could be doing through my application server, however I did not found any option to look up the progress of a current multipart upload on aws-s3, (how) is this possible? If there is an aws-sdk snippet for that in ruby please include!
b. In the comments of question 1. #d33pika links HTML5 Rocks - Using CORS where it is stated that IE8+ is able to do XHR in his own way. Would it be possible to use that and monitor the progress? If it's an option I should be able to extend the plugin to use that option for IE8+ that gives me the feeling it's not possible, why wouldn't have been already implemented then?
Several resources I have found claim, that GMail File Upload incorporates Flash to display progress bar or to allow multiple file uploads.
For example:
http://anders.com/cms/290
http://www.neowin.net/news/gmail-enables-multi-attatchment-uploading
My question is, it true, that GMail uses Flash to generate upload Progress Bar? If not, how does GMail achieve Progress Bars in IE9, which does not support FileAPI? I did several tests, and I was not able to confirm presence of Flash during GMail File Upload process:
I installed FlashBlocker which was blocking Flash content effectively. However, GMail File Upload progress Bar was not blocked.
I right clicked on the Progress Bar to see if it is Flash applet, but no it is not.
I checked source code, but I did not find any reference to .swf code.
So how does the GMail imlement its File Upload, which is displayed in all the browsers including IE9?
Any idea, please, if another developers can achieve the same results, or if the File Upload Progress Bar is Google specific?
I know there are many plugins available for Google Upload, but I wish to have clean JavaScript, HTML5, PHP, CSS3 and compatibility with IE9. I am therefore willing to code all the code on my own, if I understand the subject.
I use the following tools:
Javascript
HTML5
PHP
MySQL
CSS3
Thank you.
Update:
It really looks that GMail uses Flash to calculate Progress percentage when uploading a file. It than uses CSS to generate progress bar, therefore no Flash applet is used to display the Progress Bar.
I discovered this by disabling Flash in IE9. In contrast to Chrome, Flash can be easily disabled in IE 9.
Please, if you have anything to add to this topic, I will gladly discuss. For example, it would be interesting to know, how Flash applet can generate file upload progress percentage, and how it than can communicate that information with JavaScript or CSS.
I have further explored, and I have to confirm, YES, still today, GMail must use several Flash objects that support file/attachment upload.
It is difficult to disable Flash in Chrome. However, it can be disabled in IE. After disabling flash in IE, GMail has switched to another, less interactive upload system without progress bars.
This is a clear proof of that GMail still uses Flash to support its upload routines.
Google switched to HTML5 multi-file uploads about 2 years ago. I think they use fallback flash uploaders.
http://www.webmonkey.com/2010/04/google-turns-to-html5-for-gmails-new-drag-and-drop-attachments/
This Library (jQuery File-Upload - Demo here: http://blueimp.github.com/jQuery-File-Upload/) claims that it can use the File Progress of Internet Explorer (at least some way ;-)):
All versions of Internet Explorer will also update the global progress
bar after each iframe based upload. However since IE does not report
the file size, the global progress bar will measure each uploaded file
the same without regard to the size of the uploaded file.
https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support
I have a web app (sencha/phonegap) that includes a feature allowing users to click on buttons that link to Wikipedia articles. This obviously works fine if the device has internet access, but I get numerous requests to make the app work when the app is offline too. To accomplish this, I'd like to give the user the option to download the linked articles/webpages for offline access. When the device does not have internet access, the app would instead display the saved version (which might be stale/out-of-date, but is better than nothing). What are possible ways to accomplish this task?
My first thought was to somehow use the html manifest to cache the pages in the phone's browser, which sounds possible on the Android browser, but iOS apparently has a 5MB browser cache limit - too small.
My next thought was to save the needed html & associated files and bundle them up inside the app. But this seems a rather cumbersome approach, the app becomes much larger than it needs to be, and the webpages are stale back to the date the app was installed.
Using javascript, is it possible to download webpages, which I could then save (on the sd card, for example) for access later?
Or is there a more elegant approach?
If anyone could point me in the right direction it would be much appreciated.
In pure Javascript you can make an Ajax request to download a page. Then you can use the FileWriter to write the responseText to a file on the file system. However, that won't help you when it comes to images. You'll need to use the FileTransfer.download() command to get the binary image files.
If I were you I'd:
Use AJAX to download the html.
Parse the html looking for images.
Use FileTransfer.download to get the images.
I am using the HTML5 File API to upload the file to server.
It offers following amazing things,
Upload object which support the progress event which make it possible to show nice progress UI to end user.
XHR.send(File) and XHR.send(FormData) can carry big files(decent sized off course ) across the wire with no need to load entirely in memory.
input type="file" with multiple
option.
Drag Drop from desktop in Firefox and Chrome.
All looks promising and good however still considering its our good old HTTP which is there and unpredictable network. I would like to know if HTML5 is still really going to change file upload experience beyond UI progress and all. Or it will be same HTTP 2GB max request size (ASP.NET) and bandwidth restrictions. Will it allow big file sizes.
HTML5 (or any other mark-up language) won't and can't change any server-side rules or bypass any bandwidth restrictions.