I'm sure this has been asked before, but as I can't seem to find a good answer, here I am, asking... again. :)
Is there any way, using only a mixture of HTML, JavaScript/AJAX, and PHP, to report the actual progress of a file upload?
In reply to anyone suggesting SWFUpload or similar:
I know all about it. Been down that road. I'm looking for a 100% pure solution (and yes, I know I probably won't get it).
Monitoring your file uploads with PHP/Javascript requires the PECL extension:
uploadprogress
A good example of the code needed to display the progress to your users is:
Uber Uploader
If I'm not mistaken it uses JQuery to communicate with PHP.
You could also write it yourself, It's not that complex.
Add a hidden element as the first element of upload form, named UPLOAD_IDENTIFIER.
Poll a PHP script that calls uploadprogress_get_info( UPLOAD_IDENTIFIER )
It return an array containing the following:
time_start - The time that the upload began (unix timestamp),
time_last - The time that the progress info was last updated,
speed_average - Average speed in bytes per second,
speed_last - Last measured speed in bytes per second,
bytes_uploaded - Number of bytes uploaded so far,
bytes_total - The value of the Content-Length header sent by the browser,
files_uploaded - Number of files uploaded so far,
est_sec - Estimated number of seconds remaining.
Let PHP return the info to Javascript and you should have plenty of information.
Depending on the audience, you will likely not use all the info available.
If you have APC installed (and by this point, you really should; it'll be standard in PHP6), it has an option to enable upload tracking.
There's some documentation, and Rasmus has written a code sample that uses YUI.
If you're able to add PECL packages into your PHP, there is the uploadprogress package.
The simplest way would be to just use swfupload, though.
Is there any way, using only a mixture of HTML, JavaScript/AJAX, and PHP, to report the actual progress of a file upload?
I don't know of any way to monitor plain HTML (multipart/form-data) file uploads in webserver-loaded PHP.
You need to have access to the progress of the multipart/form-data parser as the data comes in, but this looks impossible because the ways of accessing the HTTP request body from PHP ($HTTP_RAW_POST_DATA and php://input) are documented as being “not available with enctype="multipart/form-data"”.
You could do a script-assisted file upload in Firefox using an upload field's FileList to grab the contents of a file to submit in a segmented or non-multipart way. Still a bunch of work to parse though.
(You could even run a PHP script as a standalone server on another port just for receiving file uploads, using your own HTTP-handling code. But that's a huge amount of work for relatively little gain.)
I'd recommend you to five FancyUpload a try it's a really cool solution for progress bar and it's not necesarely attached to php. Checkout also the other tools at digitarald.de
cheers
IMHO, this is the problem that Web browsers should solve. We have progress meter for downloads, so why not for uploads as well?
Take a look at this for example:
http://www.fireuploader.com/
Related
I am creating an upload interface to upload files in php.
Files are uploading fine.
But I want to give the user some feedback as how much time will it take to upload, how much of the uploading has been done etc..
I have found online code which gives ajax plugin to do what I want.
BUT my question is more fundamental, WHERE do I get the data in php that tells me how much of the file is received? what is the connection speed(connection speed and file size can be used to get time left) and other information needed?
can i get the data form php or am i looking at the wrong place?
Everything is in the documentation:
http://www.php.net/manual/en/session.upload-progress.php
WHERE do i get the data in php that tells me how much of the file is received
You don't. Uploading is handled by the webserver. When the upload is complete your PHP script will run and it gets a reference to the temp file(s) created by your webserver.
I think there are plugins or mods that do allow you to monitor theses processes. There is session.uploader-progress.php
but there is a much easier solution!
Use the JS FileReader API to slice the file into small chunks (like 5mb) then you can already make a pretty good loading bar. Additionally you can monitor the progress of XMLHTTPRequests to see how many bytes have been sent. This should get you a pretty spot on progress indicator.
This also alleviates common problems with exceeding max_upload_size.
An actual code solution is quite involved so I will refrain from posting one. You should be able to find samples or tutorials.
Is it possible to upload a specific part of the file rather than the whole file? Say, I want to upload only first 100 bytes of the file, or the rest of the file given offset 100 bytes?
In more modern browsers, with the right permissions, yes. You need the browser to support file stream reading. A tutorial is here: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Open the file, find the chunk you want and the POST through AJAX (e.g. with jQuery).
You may find it easier to synchronously upload in chunks and piece together serverside (e.g. with a session) - this way you can give feedback on the upload progress.
Not sure of a method for older browsers, or ones where this is blocked by the user - so you're probably better uploading the entire file (using a FILE post) and stripping out the bit you need serverside. More upload, but better support for everyone.
Edit - someone else just posted a question about this: https://github.com/blueimp/jQuery-File-Upload - it doesn't appear to support it natively, but it may also do what you want with some fiddling? You'll still need to handle the fallback, though.
Yes, it is possible. You can use javascript FileApi with BlobApi to upload any part of file. Note, this is a HTML5 feature.
If you want to investigate this features you can look at jQuery File Upload Plugin
You can use slice method of file api to get half file.
var midpt=Math.round(file.size/2);
var halfFile=file.slice(0,midpt); //specify start and end positions
I am just stuck a little in making a choice between PHP chart Lib and JavaScript Chart Lib. I do understand that PHP if for the server side and Javascript for the client side. My problem is what difference does it make when using their charting libraries. Is it performance issue or what?
I want to understand the difference in using PHP chart Libs and JavaScript Chart Libs. Please am not looking for examples of their chart libraries. I am looking for why i should choose one over the other.
I tried to google 'php chart vs javascript chart' but didn't get any links that can give me
the difference.
EDIT 1
1)
If this question has been answered before, then point me there.
2)
Am developing the application for internet
EDIT 2
1)
I have found out about PHPChart PHPChart which has both PHP source code and JavaScript source code. If anyone has experience in that library, does it may be solve the problem of server side load (bandwidth issues) etc.. I am thinking since it has both the PHP and JavaScript source then it may be the best to use. Am just assuming. :-)
Thank you very much
Both ways of creating graphs have their own pros and cons.
If you decide to do it using PHP, first you need to make sure that you have all the required graphical libraries installed (e.g. GD, which might not always available on shared hosts).
Assuming you have them, the first negative thing in my opinion is that you will end up with static images. Of course, it's not always a bad thing, as that ensures compatibility with all the clients, be those with or without javascript support, however, it takes away the dynamics of graphs generated on the client side using javascript. Your users won't be able to zoom, move, slide, full screen or do anything that they could with the likes of Highcharts or Flot.
Another con is that images take up more bandwidth than, say, JSON. The bigger you want to have your graph, the more colors it contains, the longer your clients will have to wait till your page loads. And just because those loads are not asynchronous, they will have to wait for the images to load before they will see the rest of the page.
With javscript libraries everything is different though. You only request the data required for your graph and you only request it when your page loads. The amount of data is usually smaller than an image would be plus you can compress your output with GZ to make it even smaller. Users will see nice spinners informing them that the graph is loading instead of some incomplete webpage.
Another thing to take into account is - what if you decide to show a nice table with data in them below each graph? If you chose to render images on the server, you would end up having to add new functionality just to get the data. With JSON, however, you just make one call, render the graph and display the table. Maybe calculate totals or do whatever you want with it. Hand it out to people as an API if you wish, after all :)
If you ask me, I would definitely go with client-side graphs as most of the devices have nice HTML5 support nowadays and being able to display a graph on an Android phone, or an iPhone or an iPad shouldn't pose a problem. If you only need images and you don't wish to expose the original data, go with PHP.
My opinion is that having a server side solution (i.e. php) takes away any browser compatibility issues you may have with a client side solution (i.e. javascript) and hence support issues.
A benfit of using JS is that it does offload resources from your server to the client because you may only have to generate some light weight data (e.g. JSON , XML) and the rendering occurs on the client. You will have to investigate how many hits your server is likely to get, etc to determine if resource is an isuse with PHP or JS.
However, using Php to create images of charts you can always get around the performance/resource issue by using a cache of the image files and serving from the cache (it's a just a folder of images) instead of generating a new one. Whether you cna use a cache will depend on your usage. If clients require up to the second data and its always changing, obviously a cache may not be of use.
Here's what I see :
Using PHP
Increase load on the server for the request
Will work everywhere
Also, like someone said here and made me think of it, you can cache the image that PHP give you, reducing bandwith (no lib to download) and reducing load (cache)
Using Javascript
Decrease load but increase the bandwitch and addition http request (to load the JS lib)
Will work where JS is available
But remember, PHP take more load then an HTTP request.
Also, always remember, Javascript is made for effects and specials stuffs you need to display.
There is one PHP render advantage that no one told about. Since sometime you need to include chart as image into PDF, DOC, XLS etc. file or email it – you have no other way except to render chart on server and store it as image to be inserted.
For data manipulation you use PHP.
For visual and behavioral effects you use JavaScript.
For that reason, you should use Javascript as its designed for visual behavior. Plus it will put less load on your server as all processing will be client side. As more people use your application simultaneously, it will start to slow down as your server will be doing a lot more then it has to.
Hope that helps :)
So here is what I want in short:
A PHP/Javascript/AJAX based File Uploader with a Progress bar what shows the percent(ex: 52%) and <div> what grows in width as the upload goes on.
And in long:
I would like a solution written in PHP and Javascript(Not jQuery), I tried myself but in server side I can't get the file size of the uploading file so I can't calculate the remaining percent.
Maybe there is a way to do it normally but I didn't find any clear ways. What I found is a lots of PHP patches what didn't worked :\ .
At last I tried Uber Uploader what uses Perl, I installed correctly but when I try to upload a file the progress bar is not shown, there are no errors just doesn't works :(.
However I don't really like to use such solutions because it's really messy even if it works, I like to write my own code if it's possible but I don't find any solution yet.
Also there are flash uploaders like pixeline and swfupload , but as I sayed I would like to use PHP and Javascript.
You should use the UploadProgress extension, along with a jQuery AJAX request that updates your progress bar according to the reply, every x milliseconds.
Here's the link to the extension: http://pecl.php.net/package/uploadprogress/
Alternatively, it can also be done with APC.
The file size can be obtained when you access the directory or folder of the file and this may be requested separately or when opening the file depending on the language you eventually use. The progress bar types are legally protected items and they have rules for indicating the progress in different ways visually and some are licensable from major suppliers but there are some freeware or shareware versions which may operate on a compatible operating system when allowed.
PHP completely processes file uploads before passing control back to the page.
This creates a problem.
The only real PHP solution I know of involves the use of APC, which adds a hook to PHP that you can access via a second PHP script over AJAX.
Does anyone know of any methods to create a file upload progress bar in PHP? I have often heard that it's impossible.
I have one idea, but not sure if it would work: have a normal file upload, but instead submit to an iframe. When this is submitted, store the file information (size and temp location) in the session. At the same time, start an AJAX call to every say 10 seconds to check the size of the file compared to the size stored in the session. This would return the size to the AJAX and then a progress bar would be sized and maybe display the uploaded size to the user.
Thoughts?
You're pretty much figured out how to do it. The main problem is you usually don't have access to the size of the uploaded file until it's done uploading.
There are workarounds for this:
Enabling APC, you to access this information if you include a field called "APC_UPLOAD_PROGRESS" and use apc_fetch() for retrieving a cache entry with the status.
There's also a plugin called uploadprogress but it's not very well documented and doesn't work on Windows (last I checked anyway).
An alternative is to use Flash for doing it. See scripts like FancyUpload.
Before APC came along I had to write a CGI script in C that wrote information to a text file. APC seems like a much better way to do it now though.
Hope this helps.
So far, the most common way of doing this is SWFUpload: http://www.swfupload.org/
However, it is possible with pure PHP, just very difficult and very experimental. I'll see if I can find the link.
Edit:
According to comments on php.net, as of 5.2 there is a hook to handle upload progress. http://us.php.net/features.file-upload#71564
More explanation:
http://www.dinke.net/blog/2006/11/04/php-52-upload-progress-meter/en/
http://blog.liip.ch/archive/2006/09/10/upload-progress-meter-extension-for-php-5-2.html
Rasmus' Example:
http://progphp.com/progress.phps
You can try YUI or Prototype or JQuery
From PHP 5.4 it is in session extension: http://php.net//manual/pl/session.upload-progress.php
In pure PHP, you are correct: it's not possible.
If you AJAX-ify this, then you could do what you're describing. The only progress meters I've ever seen are in Javascript or Flash, though I imagine Silverlight could do it also.
"Old school", but a PHP + Perl technique: http://www.raditha.com/php/progress.php
In my opinion, the best / easiest solution is to build a small flash widget, that consists of an 'Upload' button and a progress bar. Flash gives you very detailed feedback on how much data has been uploaded so far, and you can build a nice progress bar based on that. Doesn't require inefficient polling of the server, and in fact doesn't require any changes at all to your server code. Google for 'flash uploader' and you'll find many people have already written these widgets and are happy to sell them to you for a buck.
I'd recommend looking at SWFUpload to accomplish what you want. It's fairly flexible and supports queueing of files, so you could even handle multi-file uploads.
You will definately want to go with digitgerald's FancyUpload. It's Mootools & swfuplaod based, and it sports a nice queue with statusses, progress, eta etc. It's really the slickest method i've seen for uploading files. For my personal use case ivé used it to let the client select 1.2 gb of PDF files and upload them. Newer ones get renamed and versioned automatically, same are skipped, etc.