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
Related
This is an odd use-case and I've tried to steer the users away from this, but I have a request to load locally stored PPT files in an HTML environment.
The idea is to view the PPT in an iframe so that I can "decorate" all around it. Users will be creating playlists, of sorts, so I need to add "next" and "previous" presnetation buttons, etc.
I have an online version of this working using the Office webapp link that many other posts have shared, but there is a concern for poor connectivity so they want it to be available offline.
My instinct was to shape this up as a PWA. I can make them use Chrome, so I have the FileSystem API "caching" the PPT files from the online source. However, I have no way to render the saved files!
Because it's offline, I can't use googledocs or continue to MS web office.
I don't know the AppCache feature well enough, but wondered if I can preload all of the docs in an iframe, will it cache those. My thought is that it won't, because the content is on microsoft (or Google's) site.
All users will have a legal copy of PPT on the computer, if that helps at all.
So far I have tried storing the files using the filesystem API in combination with the Chrome offline viewer extension and alternatively the Native Docs extension. The Chrome one will allow me to open a doc, but directly in edit mode. I need to simulate the behavior of a ppsx file, but neither extension works with ppsx files and I don't see documentation for an API that will allow me to "auto-play" the presentations.
Thanks for any ideas!
Wayne
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?
I am currently creating a Chrome extension (which uses javascripts mainly) that allows users to scrape the images on a webpage and download them. I have finished the link scraping part, and the code will return an array like:
["http://example.com/image1.jpg","http://example.com/image2.jpg"]
But how do I download all of the links in ONE CLICK? I tried listing all photos on a new tab and let the users to Ctrl+S save the page. But this greatly affects the UI and I do not like it. I do not host webpage so server side script may not be working.. Any other solutions?
As far as I know, Chrome extensions technically can't save files to disk like Firefox.
The only way to do this is using NPAPI
Unfortunately, extensions using npapi will most likely not be accepted by the Web Store due to security problems. Of course it'll be okay if you use it for yourself or host the extension on your website.
You can install and examize the code of the following extensions, maybe you can even use the provided npapi too:
Screen Capture (by Google) https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg
Chrome Toolbox (by Google) https://chrome.google.com/webstore/detail/fjccknnhdnkbanjilpjddjhmkghmachn
Awesome Screenshot: Capture & Annotate https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce
Download Asisstant (by Google) - got killed I guess.
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.
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.