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.
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'm using APC to make a upload meter. These are the files:
Form
Upload Meter
php.ini
The problem I'm having is I'm getting nothing when I do the FETCH. I'm taking a look at the APC INFO panel as I'm making the upload and I see that the key upload_XXXXX isn't stored in the cache until the file is completely uploaded!
What am I doing wrong? Do I have something badly configured in php.ini?
I've read here that there's a bug having to do with lightppd.
As discussed in the comments, APC's file upload progress indicator is either unreliable or not functional under FastCGI.
Your best bet for a upload progress indicator is therefore going to be client-side.
I'm a big fan of Plupload, an upload widget that supports no less than six backends to provide better functionality than the regular file input type (including the HTML5 File interface in browsers that support it). You can use it standalone with a custom widget of your own design, or you can use the included fancy jQuery widget.
If you want something a little more oldschool, there's also good old SWFUpload.
Both of these options will fall back to a normal file input when Javascript is disabled.
Sorry, this isn't a direct answer to your question, but you may want to consider the HTML5 file API with XMLHttpRequest.
var req = new XMLHttpRequest();
req.upload.addEventListener("progress", updateProgress, false);
// ...
req.open();
// ...
There are some examples on developer.mozilla.org.
The downside is that it is browser dependent. The upside is that it is server independent. But ultimately, this will be the best way to track file uploads.
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/
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.