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?
Related
In a website that uses CKEDITOR to post articles, how do I, as a content creator, upload an image hosted at a third party (e.g: "http://www.tizag.com/pics/htmlT/sunset.gif") by using CKEDITOR's inbuilt upload function?
Back story:
I work at this tutoring website, my job is to read a student's question, and quickly find appropriate answer and post it. Many times I take references from wikipedia, copy-pasting works, but anyone can right click the equation-image, and "open in new tab" to see that it was hosted on wikipedia. Instead of manually downloading and uploading each equation, there must be a way to programatically and (if possible) asynchronously upload them all. I am unable to understand their code, I can't figure out the curl to upload the image. I am hoping for a general javascript code that uses CKEDITOR's functions from my browser's console to upload an image hosted at a third party website. CKEDITOR.version: 4.3.3
Note: I am not the programmer of my work website, so I cannot install add-ons in CKEDITOR's installation folder on the backend. I need a way that uses my browser's console.
There are plugins that will do that for you in CKeditor.
Visit CKEDITOR BUILDER to add any of the plugins below.
First plugin is the Image plugin. See the screenshot.
You can upload an image via URL with this.
The other plugin is the Media Embed plugin
This one as well will do what you want.
I'm using the Kaltura JavaScript API and am trying to upload an image to the server using the "upload" action from the "uploadToken" service. I keep getting this error:
Missing parameter "fileData"
I've tried passing the base 64 encoded version of the image as the fileData parameter, and various other values (the file name, the input.files[0] value, a readAsArrayBuffer and convert to binary), but am unable to successfully upload an image. In JavaScript, what should "fileData" be set equal to?
Using the Kaltura Test Console, I'm able to do this successfully, and I can see the network tab in my browser making the POST successfully, with the fileData. However, in my JavaScript code, the "upload" action from the "uploadToken" service call is reported as a GET operation. I'm starting to think this may be a bug with the Kaltura JavaScript client library.
You can upload files to Kaltura using JavaScript and the HTML5 file API. But you would have to create the http request manually and not use the JS library.
This solution is limited to modern browsers (in case of IE it's IE10+).
To support IE9 and below, you would have to rely on flash.
If you just need to upload images and not large files, then use a server side proxy script that will not be limited by CORS.
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 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.
It seems to me if information is already being output to a user by a browser it ought to be accessible in the DOM in some manner via javascript. When you upload a file using a webkit browser (and possibly others) using the good old iframe trick the browser displays an upload percent in the status bar at the bottom of the browser window. It would be pretty amazing to be able to tap into that instead of needing to query the server for that same information. Has anyone ever tried to do so?
I have try something like this. If using old method with iframe for uploading files you can get upload information only if you have APC enable on server side (for php). With javascript the maximum that you can know is the start and the end of the upload (by using iframe onload event). So you can use an animated gif when file upload start and remove the animated gif when it ends (that causes the onload event of the iframe).
Then after upload iframe will contain any errors message of the upload status. You can do some more trick by returning file info as JSON when upload finish.