Nice job, thanks, much easier than plugging in jquery. I added some small features: I check that the user selected a file, that it has a csv extension, and that it is an acceptable size: function uploadFile(){ /check that a file is selected if(document.getElementById("file1").value == "") { alert('Please Select a File to Upload!'); return false; } //check that .csv file was selected var filename = document.getElementById('file1').value.trim(); var extension = filename.substr(filename.length - 4).toLowerCase(); if(extension != '.csv'){ alert("INCORRECT FILE TYPE
" + "Please select a file with a '.csv' extension
e.g. 'referrals-11-Jan-2017.csv'."); clearfilename(); return false; } //get ready for upload var file = _("file1").files[0]; //get first element in file array //check that file doesn't exceed max sie if (file.size > 10000000){ alert('WARNING
The file you are trying to upload is ' + file.size + '
The MAXIMUM File size is 10000000
Please Contact your Web Administrator'); clearfilename(); return false; } I also clear the file input if the user did an upload and then refreshed the page thinking that would clear it. function clearfilename(){ document.getElementById('file1').value = ""; } //remove filename after upload when pg reloaded onload = clearfilename;
Am I the only one feeling custom coding is easier and faster than frameworks/tools? Thank you for the amazing video that teaches how things work. For video not uploading issue, probably because of size. I find the solution in my Linux by setting max_file_upload. For Ubuntu, edit by vi /etc/php7/apache2/php.ini, set your size according to your file size. Restart by /etc/init.d/apache2 restart
Very helpfully mentions what is not compulsory to get this working, what is only for development purposes and what can be customized. Very good and helpful tutorial. Thanks!
For those getting "ERROR: Please browse for a file before clicking..." you have to change the values of upload_max_filesize AND post_max_size to whatever you find suitable. You find these values in the php.ini file, located NOT in the PHP folder but inside in the APACHE folder. Using WAMP C:\wamp\bin\php\php5.5.12\php.ini WILL NOT WORK C:\wamp\bin\apache\apache2.4.9\bin\php.ini WILL WORK Actually, I changed both just in case. That did solve my problem. Have a good day.
For development purposes, to get this to work, create an .htaccess file and put it in XAMPP in the same directory as the files created in this demo. This will set the allowed 'upload_max_filesize ' and 'post_max_size'. In that .htaccess file, put the following two lines; php_value upload_max_filesize 1000M php_value post_max_size 1000M It will then work. Hope that helps.
Thank you sir. This saved my life. Even if i had to customize it for putting data to a MySQL database. You gave me the foundation and i built on it. Great work!!!
I still refer this videos for my project development and every time i refer them i get amazed that they are still helpful in 2017 !!!! I request you to make some more videos about new things like bootstrap , php securities , jquery versions etc ...... God bless you !
Mr Nawshad, you can append as many files to the ajax post request as you want. In the JavaScript uploadFile() function: See, filename and file's array is appended to the fomrdata like this: formdata.append("file1", file); just below that line, append to it more data li this: formdata.append("action", "upload_new_image"); In the php file, you will be able access this by: $action = $_POST["action"]; I hope it helps.
Perfect Tutorial Adam, all the educational tutorial you offer on PHP, MYSQL JSON, JAVASCRIPT are all great, well done, your explanation is very sample and clear, it has help me in a very great way to improve on my programming career, but i also have a tittle problem i will like you to help me, the problem is after signing into my profile, the REQUEST AS FRIEND BUTTON is not (active) working on mine, what do i do, because every thing is working find from the tutorial you offer, accept the REQUEST AS FRIEND BUTTON
Boy Howdy these tutorials are fresh as spring rain. I ain`t been to none them other varmint`s tutorial pages and seen with my peepers as much sass and spunk as this darn too-tin tutorial. My hat is off to you sir, I recon I owe my pages awesomeness to you and yours. Live long wild times and prosper sir. Straight shootin this from Montana.
Hey Adam, I like your build for file uploads with a progress bar but I'm having trouble trying to use it for multiple file uploads with their own progress bars. If you have the time could you make a tutorial on how you would do it? Kind Regards Joshua
if you have alot of form inputs you can just append them all at once except the submit input by doing this: var frmData= new FormData(document.getElementById("myFormID")); so all whats left is the submit input which can be appended like this: frmData.append('submit', document.getElementById("submit").value); so in total you should do this if you have alot of inputs and you dont wanna go appending each and every one with the append methde: var frmData= new FormData(document.getElementById("myFormID")); frmData.append('submit', document.getElementById("submit").value);
if u wanna upload multiple files at a time just loop over the process like this function uploadFile(){ var numberofFiles=document.getElementById('file1').files.length;
I have a form with some text fields and some multiple file input fields. After submitting the form, the page refreshes and processes the form inputs before showing the form again combined with error or success message. How can I do this progress bar with this setup?
Always there to get a brother out of a bind. If you and I looked a like I would be going all over the world telling people that you are my brother - cas you are always there to drag me from the edge of the cliff. YOU ARE THE BEST ADAM KHORY (AK AK)
I'm new to html5 ...help my please? sorry for my english a) i have a form b) and send with var formdata = new FormData(); formdata.append("file1", file); formdata.append("practica", practica); C) but I get $practica=$_REQUEST['practica']; echo $practica [object HTMLInputElement] which is my error? tnks..
Am I the only one getting index.html:36 XMLHttpRequest cannot load file:///C:/xampp/htdocs/fileupload/file_upload_parser.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
hi, I copy and paste your code tried to upload an .mp3 file and I got an error of ERROR: Please browse for a file.. which is no tmp_name.I tried to put file_get_contents in the $fileTmpLoc and I got the error of file_get_contents cannot be empty. how will I fix this?
I know this is kind of old, but I am having an issue and maybe you have some feedback on how to prevent it. I noticed that in google chrome I still see upload percentage as well as the progress bar percentage. The issue is that they are rarely in sync, and IF the google chrome upload percent reaches 100% before the progress bar does it just reloads the page and the progress bar script doesn't run all it's processes. Any idea how to address this issue?
my PHP page is not fetching any post data...so i went to copy paste your codes from scratch and still the same error that the $_FILES['file']['tmp_name'] is empty...anyone else had this issue and managed to fix it?
Hi sir i need a help. when i choose a file on file input it want to be resize and convert to base64 and make ready to post by php. how can i do like that..
when i disable the java-script the code works but when i turn it on i get file1 not found similar to a code i dit anyone help me like the name is not passed to post.
I tried to get the file object in IE9 browser using javascript, but not working, getting only undefined value. Any code to support file upload or getting file object in IE9
Try your codes in your localhost. If it works on your localhost but not your public server, then you need to upload php.ini on your root folder on your public server
In Mozilla I am getting some errors, first showing is "TypeError: this._recipeManager is null", not sure if I edited something wrong or if is a Mozilla bug that can be avoided.
hey so i was trying to get this coding to work and i guess it cant find my php file ive copied and pasted the exact same code and tried to test it out and it wasnt working for me on google chrome
Hello, Its working fine for android and windows desktop... But its not working when i upload it through my iphone... It shows upload aborted... Plz help...
Thanks for your tutorials. But I am facing problem, please any one help, I have browse and selected the filre from my computer but the progress bar is not responding at all, its not moving. Thanks in advance
how to store the uploaded data to database? i mean each user have their own file storage to database and have a specific database size? how can i do that? thanks
What can I do to modify this code to deal with multiple upload files? I still want to keep the use of the progress bar. I am hoping for moderate modifications to the tml file and underrstand that I have to modify considerably the php file. Thanks.
When I upload jpg files it works fine. However when I try to upload mp3 or mp4 files I receive this message - "ERROR: Please browse for a file before clicking the upload button." I am using my localhost on my own computer. Any suggestions?
Hi. I tried everything the video said, and i even copied the codes, but the "upload" option didn't work. Can you please help me figure out what's wrong? Thanks in advance.
Try a more simple and basic upload application on your server using the same file you tried to upload. It may be that your server has upload size limits in place? If you are on a live server online, and you have adjusted the max file size for uploads in your PHP configuration, it should work. Also make sure the "uploads" folder exists and you are pointing to it correctly, and that it has the correct chmod setting to allow files to upload into it. You could also make errors render to a log file so you can inspect it for issues. It is a setting on your server. Good luck!
Hey Adam, sorry to be a n00b, but can you explain (or some link or something) on why you didnt use the onreadyState etc for the AJAX. I thought that construct is a requirement for AJAX calls?
Adam Khoury, my code for html and .php file matches your code from the tutorial. When I choose a file to upload, it selects it, but when I try to upload the file the progress bar does nothing. I'm using a file that is 254 MB and it's an mp3. I'm using Windows 10 with notepad++. How can I verify if the file was uploaded? Any suggestion to make the progress bar work?
+Edgar Panduro Never mind Adam, I made a few corrections, and it finally works. I think I need to find a better IDE, consequently notepad++ doesn't alert a user of a miss spell or must importantly unexpected end of input. I used a different IDE that is Linux based and it worked with no issues. My experience tells me that Linux machines perform better than Windows operating system, in terms of programming. Also Linux is better at running a network as oppose to running a Windows network.
EASILY one of the clearest tutorials on youtube i've watched .. thx !
Thank you Adam! The only PHP upload I've found so far that works right out of the box.
Nice job, thanks, much easier than plugging in jquery. I added some small features:
I check that the user selected a file, that it has a csv extension, and that it is an acceptable size:
function uploadFile(){
/check that a file is selected
if(document.getElementById("file1").value == "") {
alert('Please Select a File to Upload!');
return false;
}
//check that .csv file was selected
var filename = document.getElementById('file1').value.trim();
var extension = filename.substr(filename.length - 4).toLowerCase();
if(extension != '.csv'){
alert("INCORRECT FILE TYPE
" + "Please select a file with a '.csv' extension
e.g. 'referrals-11-Jan-2017.csv'.");
clearfilename();
return false;
}
//get ready for upload
var file = _("file1").files[0]; //get first element in file array
//check that file doesn't exceed max sie
if (file.size > 10000000){
alert('WARNING
The file you are trying to upload is ' + file.size + '
The MAXIMUM File size is 10000000
Please Contact your Web Administrator');
clearfilename();
return false;
}
I also clear the file input if the user did an upload and then refreshed the page thinking that would clear it.
function clearfilename(){
document.getElementById('file1').value = "";
}
//remove filename after upload when pg reloaded
onload = clearfilename;
Thank you, Very helpful.
I am following you Adam from college days, you are my inspiration. One of the best tutorials instructor i have ever seen. Love you bro
Am I the only one feeling custom coding is easier and faster than frameworks/tools?
Thank you for the amazing video that teaches how things work.
For video not uploading issue, probably because of size.
I find the solution in my Linux by setting max_file_upload.
For Ubuntu, edit by vi /etc/php7/apache2/php.ini, set your size according to your file size.
Restart by /etc/init.d/apache2 restart
finally...found the most versatile method to do this... without using any third party library. Thankyou brother!
Very helpfully mentions what is not compulsory to get this working, what is only for development purposes and what can be customized. Very good and helpful tutorial. Thanks!
For those getting "ERROR: Please browse for a file before clicking..." you have to change the values of upload_max_filesize AND post_max_size to whatever you find suitable. You find these values in the php.ini file, located NOT in the PHP folder but inside in the APACHE folder. Using WAMP
C:\wamp\bin\php\php5.5.12\php.ini WILL NOT WORK
C:\wamp\bin\apache\apache2.4.9\bin\php.ini WILL WORK
Actually, I changed both just in case. That did solve my problem. Have a good day.
For development purposes, to get this to work, create an .htaccess file and put it in XAMPP in the same directory as the files created in this demo. This will set the allowed 'upload_max_filesize ' and 'post_max_size'. In that .htaccess file, put the following two lines;
php_value upload_max_filesize 1000M
php_value post_max_size 1000M
It will then work. Hope that helps.
Thank you sir. This saved my life. Even if i had to customize it for putting data to a MySQL database. You gave me the foundation and i built on it. Great work!!!
It is working perfectly on my Linux Debian server. Thank you very much, Adam !
+Adam Khoury move_uploaded_file function failed how to fix this?
@@misterdq8137 probably the destination folder doesn't exist on your server, just create it
I still refer this videos for my project development and every time i refer them i get amazed that they are still helpful in 2017 !!!! I request you to make some more videos about new things like bootstrap , php securities , jquery versions etc ...... God bless you !
Thank you very much I've been trying to do this for a week and you made it work thanks man
Thanks Adam, I was looking for this technique. They way you explained it was thorough yet to the point. Awesome quality.
Thanks Adam. I've barely used AJAX before, and this was a huge help.
By far the easiest method to achieve this! Thanks for the tutorial!
Much love from Jamaica!
this is very nice tutorial thanks adam for your effort.
Perfect tutorial. Thank you.
Thanks Adam. Best tutorials ever. No matter what they say.
i spent long time to search such great tutorial like this one., i like it. :)
Thanks! That was exactly what i was looking for.
I have been looking around this topic and you sir completely nailed it.
Thank you!
very nice explanations! easy to follow and understand! Thank you, for that tutorial!
Mr Nawshad, you can append as many files to the ajax post request as you want. In the JavaScript uploadFile() function:
See, filename and file's array is appended to the fomrdata like this: formdata.append("file1", file);
just below that line, append to it more data li this:
formdata.append("action", "upload_new_image");
In the php file, you will be able access this by:
$action = $_POST["action"];
I hope it helps.
Perfect Tutorial Adam, all the educational tutorial you offer on PHP, MYSQL JSON, JAVASCRIPT are all great, well done, your explanation is very sample and clear, it has help me in a very great way to improve on my programming career, but i also have a tittle problem i will like you to help me, the problem is after signing into my profile, the REQUEST AS FRIEND BUTTON is not (active) working on mine, what do i do, because every thing is working find from the tutorial you offer, accept the REQUEST AS FRIEND BUTTON
awesome tutorial, thank you!
Best tutorial ever
Thank you very much!
Boy Howdy these tutorials are fresh as spring rain. I ain`t been to none them other varmint`s tutorial pages and seen with my peepers as much sass and spunk as this darn too-tin tutorial. My hat is off to you sir, I recon I owe my pages awesomeness to you and yours. Live long wild times and prosper sir. Straight shootin this from Montana.
i fucking love you....took me so many tutorials to get this down and you were my last hope and it work great. thank you so much!
this is how all ur tuts should be teach!!
Holy crap man, this is an awesome tutorial... you have a great way of getting the point across. SUB'D!
in browser Chrome (ver.94) NOT WORKING. But in firefox, script working fine. Any solution for chrome to get working ?
Hey Adam, I like your build for file uploads with a progress bar but I'm having trouble trying to use it for multiple file uploads with their own progress bars. If you have the time could you make a tutorial on how you would do it?
Kind Regards
Joshua
NAILED IT! THANKS, DUDE! GOOD JOB!
Thank you very much Adam! Your video was very very helpful to me. Thanks!
Thanks for this video. It works fine with images but with videos, it shows undefined index file1
Perfect. It is working. Your mind is as gold my friend :)
I was actually looking for a way to do this a few weeks ago. Didn't find anything that worked well though so thanks for this :)
Keep up the good work.
Wanderful, very professional and clear.
if you have alot of form inputs you can just append them all at once except the submit input by doing this:
var frmData= new FormData(document.getElementById("myFormID"));
so all whats left is the submit input which can be appended like this:
frmData.append('submit', document.getElementById("submit").value);
so in total you should do this if you have alot of inputs and you dont wanna go appending each and every one with the append methde:
var frmData= new FormData(document.getElementById("myFormID"));
frmData.append('submit', document.getElementById("submit").value);
Thanks for the tutorial! Would love to see a similar one that works for multiple files at the time.
You're such an idiot LMAO
finally a tutorial that makes sense.
Adam Thanks for your Tutorials. You are great!
var file= _("file1").files[0] this code not supported in browser IE9, any solution to support in IE9 for getting file object
Thank you very much for the tutorial, very helpful.
What about for multi-field uploads. what would be the turn around effect for that in the js script provided?
if u wanna upload multiple files at a time just loop over the process like this
function uploadFile(){
var numberofFiles=document.getElementById('file1').files.length;
for(var i=0;i
Love your voice Love your work Love all of your products
I have a form with some text fields and some multiple file input fields. After submitting the form, the page refreshes and processes the form inputs before showing the form again combined with error or success message. How can I do this progress bar with this setup?
u r indeed a good teacher! thanks!!
Great tutorial by the way. Your explanations are so easy to follow. Thanks.
Always there to get a brother out of a bind. If you and I looked a like I would be going all over the world telling people that you are my brother - cas you are always there to drag me from the edge of the cliff.
YOU ARE THE BEST ADAM KHORY (AK AK)
Thank you. That was great!
I'm new to html5
...help my please? sorry for my english
a) i have a form
b) and send with
var formdata = new FormData();
formdata.append("file1", file);
formdata.append("practica", practica);
C) but I get
$practica=$_REQUEST['practica'];
echo $practica
[object HTMLInputElement]
which is my error?
tnks..
Am I the only one getting index.html:36 XMLHttpRequest cannot load file:///C:/xampp/htdocs/fileupload/file_upload_parser.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
How to edit the code so that there are 5 separate choose and corresponding upload and single document can be uploaded in any of them.
hi, I copy and paste your code tried to upload an .mp3 file and I got an error of ERROR: Please browse for a file.. which is no tmp_name.I tried to put file_get_contents in the $fileTmpLoc and I got the error of file_get_contents cannot be empty. how will I fix this?
+adam khoury my code is just echoing browse file before hitting upload what could be the problem
I know this is kind of old, but I am having an issue and maybe you have some feedback on how to prevent it. I noticed that in google chrome I still see upload percentage as well as the progress bar percentage. The issue is that they are rarely in sync, and IF the google chrome upload percent reaches 100% before the progress bar does it just reloads the page and the progress bar script doesn't run all it's processes. Any idea how to address this issue?
will see this TUT for sure !
my PHP page is not fetching any post data...so i went to copy paste your codes from scratch and still the same error that the $_FILES['file']['tmp_name'] is empty...anyone else had this issue and managed to fix it?
thanks for making a tutorial that's easy to understand.
Your tutorial helped me a lot! Thank you so!
Hi sir i need a help. when i choose a file on file input it want to be resize and convert to base64 and make ready to post by php. how can i do like that..
when i disable the java-script the code works but when i turn it on i get file1 not found similar to a code i dit anyone help me like the name is not passed to post.
Why this code doesn't work to me?
I have everything like that but it's not working....
Download jquery first
I tried to get the file object in IE9 browser using javascript, but not working, getting only undefined value. Any code to support file upload or getting file object in IE9
How do I abort the upload using a button? I tried ajax.abort() but it doesn't work.
This unfortunately not working in IE
alway echo ERROR: Please browse for a file before clicking the upload button.
status is 200, file also in request payload
why?
Try your codes in your localhost. If it works on your localhost but not your public server, then you need to upload php.ini on your root folder on your public server
how to process time of ajax file . if i upload .csv file and my ajax php file is doing some validations means i want to know the processing status
In Mozilla I am getting some errors, first showing is "TypeError: this._recipeManager is null", not sure if I edited something wrong or if is a Mozilla bug that can be avoided.
hey so i was trying to get this coding to work and i guess it cant find my php file ive copied and pasted the exact same code and tried to test it out and it wasnt working for me on google chrome
Hello,
Its working fine for android and windows desktop...
But its not working when i upload it through my iphone... It shows upload aborted...
Plz help...
This video helps me a lot 🤩
Thanks for your tutorials. But I am facing problem, please any one help, I have browse and selected the filre from my computer but the progress bar is not responding at all, its not moving. Thanks in advance
how to store the uploaded data to database? i mean each user have their own file storage to database and have a specific database size? how can i do that? thanks
Thanks for your tutor Adam Khoury
What can I do to modify this code to deal with multiple upload files? I still want to keep the use of the progress bar. I am hoping for moderate modifications to the tml file and underrstand that I have to modify considerably the php file. Thanks.
EXCELENTE TUTORIAL MIL GRACIAS... DESDE CHIHUAHUA MEX. SALUDOS
EXCELLENT TUTORIAL THANKS ... FROM CHIHUAHUA MEX. GREETINGS
I tried using ajax.abort(); in this module. it doesn't seem to work.
i uploaded with this script 25 mb size file but it dont working for more size files :((
I wrote the same code but the upload button 's not working, please anyone can tell me what am I missing here.
simply... the best.
Love it Adam
Much appreciate it
Thank You, a very good documentation!
The mafia accent. Love it !
When I upload jpg files it works fine. However when I try to upload mp3 or mp4 files I receive this message -
"ERROR: Please browse for a file before clicking the upload button." I am using my localhost on my own computer. Any suggestions?
See my comment above.
Dear Im trying to upload multiple file with Progress bar , How I do it, please help me
Thanks
is it possible to use that when downloading data? or when having an ajax file loading to server back to the client?
A very good tutorial in file uploads
Great Tutorial
Hi. I tried everything the video said, and i even copied the codes, but the "upload" option didn't work. Can you please help me figure out what's wrong? Thanks in advance.
Try a more simple and basic upload application on your server using the same file you tried to upload. It may be that your server has upload size limits in place? If you are on a live server online, and you have adjusted the max file size for uploads in your PHP configuration, it should work. Also make sure the "uploads" folder exists and you are pointing to it correctly, and that it has the correct chmod setting to allow files to upload into it. You could also make errors render to a log file so you can inspect it for issues. It is a setting on your server. Good luck!
Very, very nice tutorial. Thank you a lot!
perfect simple and to the point :)
Hey Adam, sorry to be a n00b, but can you explain (or some link or something) on why you didnt use the onreadyState etc for the AJAX. I thought that construct is a requirement for AJAX calls?
thank you :D
How can I do this with more than 1 file?
when opening the ajax request post with an empty string and make sure your upload code is in that file
Awesome explanation...
Adam Khoury, my code for html and .php file matches your code from the tutorial. When I choose a file to upload, it selects it, but when I try to upload the file the progress bar does nothing. I'm using a file that is 254 MB and it's an mp3. I'm using Windows 10 with notepad++. How can I verify if the file was uploaded? Any suggestion to make the progress bar work?
+Edgar Panduro
Never mind Adam, I made a few corrections, and it finally works. I think I need to find a better IDE, consequently notepad++ doesn't alert a user of a miss spell or must importantly unexpected end of input. I used a different IDE that is Linux based and it worked with no issues. My experience tells me that Linux machines perform better than Windows operating system, in terms of programming. Also Linux is better at running a network as oppose to running a Windows network.