Uploading files to your website can be done in many ways. You can upload files using a simple upload form, or an FTP client, or a Flash uploader.
When you are the owner and have administration rights on the website, all these ways are available. However, when you want to allow your website visitors and guests to upload files to your website then FTP is rejected. Moreover, if you want your website to have the highest degree of compatibility with desktop and mobile browsers, then Flash is not an option too.
What is left is the HTML upload form, which offers a very straightforward upload interface, just like the one below:
You simply press the Browse button, select the files from your computer, press Send button and selected files get uploaded.
However, HTML upload forms have some drawbacks. They do not allow uploads of big files because web servers impose restrictions in upload file size and upload time. When we say “big”, we mean files over 50Mbytes but this varies depending on the web server and your internet upload speed. Sometimes you can overcome these restrictions by changing some php variables, like php_value upload_max_filesize and php_value max_input_time.
Unfortunately, this does not work in all cases. So, how can your visitors upload big files to your website?
The Solution
HTML5 has introduced a lot of nice features that enable better interaction with the user, better graphics, better data manipulation and of course better security. One new feature is the ability to slice the file into pieces before it is uploaded. So, if you have a big file, you can cut it into smaller pieces, send them one by one to the server and then re-assemble the file after all pieces have been uploaded. You can adjust the size of the pieces to be small enough (e.g. 1MByte) so that they are allowed by any web server. Consequently this means that you can upload files of any size, even very big ones (over 1GByte) without worrying whether the server will reject it or not.
This methodology is called “chunked upload” and implementing it is real world is a bit complicated, however it presents some serious advantages:
- Enables uploads of files of unlimited size (restricted only by the file system or by the storage space available to the web server)
- If you want to do any file checks in the server side before the file is saved in its final location (e.g. check its extension or check if the name matches some patterns), then it is not required to have the whole file uploaded but only the first chunk (piece).
- Enables resuming of uploads. So, if you have uploaded a part of the file and for some reason the upload was interrupted (e.g. due to lost connection), then you can continue the upload from the point it stopped, saving time and frustration.
There are some technical articles explaining how to implement chunked uploads. However they require advanced programming skills and good knowledge of how uploads work. Fortunately, there are out-of-the-box tools to help you enable chunked uploads in your website without technical skills.
Some useful resources about big file uploads can be found below:
- New HTML5 features: http://www.w3schools.com/html/html5_new_elements.asp
- Chunked file upload implementation: http://creativejs.com/tutorials/advanced-uploading-techniques-part-1/
- General upload tools supporting chunked uploads: http://www.plupload.com/ , http://fineuploader.com/
- WordPress upload plugins supporting chunked uploads: http://www.iptanus.com/wordpress-file-upload
Purchased Pro to handle files > 10Mb 9.5M is OK); still get an error. What else do I need to change?
Pls remove comment re: “file > 10Mb upload still fails with Pro”
“Chunk” mode is disabled by default (consider changing),.
Now enabled and works fine.
Good plugin, very useful, esp. drag-drop !
New version will have it enabled….
Regards
Αγαπητέ Νίκο,
έκανα ατελείωτες προσπάθειες (ακόμη και με ftp) αλλά δεν κατάφερα να το κάνω να δουλέψει στην ιστοσελίδα: http://www.otapractices.gr/%CF%85%CF%80%CE%BF%CE%B2%CE%BF%CE%BB%CE%B7-%CE%BA%CF%80/
Το shortcode είναι:
[wordpress_file_upload captcha=”true” uploadpath=”uploads” uploadrole=”all” maxsize=”100″ dublicatespolicy=”maintain both” placements=”userdata/title+selectbutton+filename+uploadbutton/message/captcha/filelist/progressbar” uploadtitle=” Υποβολή αρχείων καλής πρακτικής” selectbutton=” Επιλογή αρχείου/ Επιλογή αρχείων” uploadbutton=”Υποβολή αρχείου/Υποβολή αρχείων” captchaprompt=”Παρακαλούμε συμπληρώστε τους παραπάνω χαρακτήρες” successmessage=”Το αρχείο%filename% υποβλήθηκε επιτυχώς.” warningmessage=”Το αρχείο %filename% υποβλήθηκε επιτυχώς αλλά με κάποιες ειδοποιήσεις.” errormessage=”Το αρχείο %filename% δεν υποβλήθηκε.” waitmessage=”Το αρχείο %filename% βρίσκεται σε κατάσταση υποβολής.” notify=”true” notifyrecipients=”aparask@coresolutions.gr%n%aparask@gmail.com” notifyheaders=”ΥΠΟΒΟΛΗ ΝΕΑΣ ΚΑΛΗΣ ΠΡΑΚΤΙΚΗΣ” notifysubject=”ΥΠΟΒΟΛΗ ΝΕΑΣ ΚΑΛΗΣ ΠΡΑΚΤΙΚΗΣ” notifymessage=”Σας ενημερώνουμε ότι έγινε υποβολή νέας καλής πρακτικής.” attachfile=”true” widths=”title:200, filename:50, selectbutton:20, uploadbutton:20, captcha:30, captchalabel:30, captchatext:30, uploadfolder_label:30, subfolders_label:30, subfolders_select:50, filelist:50, progressbar:30, userdata:100, userdata_label:30, userdata_value:100, message:100″ heights=”title:10, filename:10, selectbutton:10, uploadbutton:10, captcha:10, captchalabel:10, captchatext:10, uploadfolder_label:10, subfolders_label:10, subfolders_select:40, filelist:40, progressbar:10, userdata:10, userdata_label:10, userdata_value:10, message:100″ userdata=”true” userdatalabel=”* ΟΝΟΜΑΤΕΠΩΝΥΜΟ ΥΠΟΒΑΛΛΟΝΤΟΣ (υποχρεωτικό)/* e-mail ΥΠΟΒΑΛΛΟΝΤΟΣ (υποχρεωτικό)/* ΔΗΜΟΣ (υποχρεωτικό)/* ΤΙΤΛΟΣ ΚΑΛΗΣ ΠΡΑΚΤΙΚΗΣ (υποχρεωτικό)” medialink=”false”]
Καμία βοήθεια; Ευχαριστώ προκαταβολικά!
Αντώνης Παρασκευόπουλος
aparask@coresolutions.gr
Hi there outstanding blog! Does running a blog like this require a great deal of work?
I’ve very little knowledge of programming but I was hoping to start my own blog in the near future.
Anyhow, if you have any suggestions or techniques for new blog owners please share.
I know this is off subject nevertheless I simply needed to
ask. Thanks a lot!
Pingback: File upload with Angular 7: frameworks for upload – Bhavin Patel