Hi Alex, I am following you when i was in college and because of you I am now a good web developer. Each tutorial made by you is very precise and exposes a great learning to a new technology. Thanks for all your efforts.
i'm my project report I have to leave a space to thank you and your tutorials. My computer science final project is more interactive with your help, and for that reason I bought your book :D Thanks Alex
Thank you for this tutorial. I used this tutorial as a starting point. I got it all working and now I am turning it into a jQuery upload plugin and my plugin now works. I had to replace ondragover with base.on("dragover", function(e) { but basically my jQuery plugin works the same as the javascript code, and I can use it on multiple elements if I require. Now I have to add the bells and whistles and make sure they can't send any old file LOL.
😢$_files works without enctype? But not in my case. I'm trying the same code ..But as soon as I start working with $_files the console log is not responding anymore. I've very limited knowledge on js and php.
Hi although this is a year ago. you probably won't reply to me. but the XMLHtttpRequest(); does not pass value to the "upload.php" file. I literally copy every step you did.
when i send fornData using xhr to upload.php, it's not getting the data, and in responseTest, it's showing undefined all the time and nothing showing in php file
Works fine for me, but not "out of the box". Remember: This tutorial is 8 years old. Going through it, also checking every console.log, brings it to an success.
Thank you very much for this great tutorial! Worked like a charm! :D I rewrote my version, my version does not upload the files right after dropping them into the field, it stores them in an array and sends all of the data if the user clicks on the submit button :D
In the "formData.append('files[]', files[x]) line, please could you help me understand the semantics behind 'files[]' , I don't really understand when and where to use the square brackets in such a context.
Hi, Odd, working in chrome - but when draging a image over the dropzone I get a not allowed symbol (cirle with strip in it) why?? looked at other script with samples the same thing so what is wrong all help is welcome
I have everything working great. But for my purpose I would like to pass a sting variable that contains which directory I would like the files to upload to. Example: Accounting, Sales, Purchasing, ect.. I found how to pass it to my PHP file using this statement: formData.append('department', 'Accounting'); I would like to use it more dynamically and pass the string 'Accounting' as a variable named 'department'. That way I can just make a call to the external javascript in my HTML files and pass the 'department' variable to it. Any ideas on how i can do that?
I'd like to upload and have the latitude and longitude be read from the file upload - or the location data - then the user to add a name - + an autogenerated #id - How do I carry this out?
Thank you for video. Actually, can you upload this code somewhere? Any idea how to make file managment via website? Like list of files in uploads folder and options like remove, rename file?
Dang we can't use this for commercial use :(? Know anywhere I can learn code that I can learn for commercial use? Almost everywhere I go I try to learn code but they all say I can't use for commercial. I don't know how I'm supposed to make a job out of learning code if I learn from somewhere I can't even use code from :/
Why cant i get the length of the files with files.length ? it is undefined, and i chekked i have something in files, but it seems like its an object? it is only when i choose 1 file ?
Hello. I am having trouble with sending the form data using xhr i.e xhr(formData) ... it keeps returning undefined in the response text. I cannot continue until this works..what is wrong?
His example calls the JS function before the DOM has loaded all the elements. The DOM hasn't yet loaded the id which is why it's null. Do something like window.addEventListener("load", initiate); then create a function called initiate and place the above code in. This will ensure the window has loaded all the necessary components before the function is triggered. Hopefully this helps.
Just a curiosity, have anyone tried this with firefox? Somehow I got it working perfectly in chrome but when I try it with firefox, the files uploads perfectly but the link to the files doesn't show. Anyone got this problem?
my consol gives me an error if i try to upload an image the Error: main.html:24 XMLHttpRequest cannot load file:///C:/Users/user1/Desktop/HTML/D&D/main_PHP.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.upload @ main.html:24Dropzone.ondrop @ main.html:29
It's habit after hearing Douglas Crockford speak on the subject. See stackoverflow.com/questions/971312/why-avoid-increment-and-decrement-operators-in-javascript for more information on this, there are some good links in there.
Hello there, Are there an other solution than "move_uploaded_file"? My webservice doesn't support that function which is a big handicap for me. My webservice use php 5.3.xx
DeeJayEbbes Highly recommend you switch to something that allows you more flexibility. Why not set up your own VPS on Digital Ocean? It's easy, and we have a series on getting it all set up. Cloud Server Set Up: Introduction (Part 1/8)
Suburius, If this project did not work for you then please consider numerous variables as to why it hasn't worked. Such as out of date code seeing this code is 3 years old now. Maybe a syntax error in your code somewhere.? Or if you want to become a developer yourself how about finding a way to debug the issue. Just a suggestion.
Hi Alex, I am following you when i was in college and because of you I am now a good web developer. Each tutorial made by you is very precise and exposes a great learning to a new technology. Thanks for all your efforts.
webdeveloperify I love comments like this. You're more than welcome, and I hope our videos continue to inspire you!
This tutorial boosted my knowledge of AJAX, JSON, PHP, CSS, HTML, file upload and the inspection feature in IE and Chrome.
Way to go.. I have gone thru lots of drag and drop tutorials.. yours is supreme as you explain each step. Thank you!
i'm my project report I have to leave a space to thank you and your tutorials. My computer science final project is more interactive with your help, and for that reason I bought your book :D Thanks Alex
Thank you for this tutorial. I used this tutorial as a starting point. I got it all working and now I am turning it into a jQuery upload plugin and my plugin now works. I had to replace ondragover with base.on("dragover", function(e) { but basically my jQuery plugin works the same as the javascript code, and I can use it on multiple elements if I require. Now I have to add the bells and whistles and make sure they can't send any old file LOL.
Saved my life during a hackathon! Thanks for the detailed and precise instructions :)
It's awesome! Thank you so much for overview all details and not using external libraries especially jQuery!
didn't work at first. after a long lasting 15 minutes. i actually came up with the fact that i hat my localhost not running.
pretty imberasssing i say
Happens to all of us! At least you sorted it in the end... you'll never make that mistake again!
True
+Codecourse bet he does... :)
😢$_files works without enctype? But not in my case. I'm trying the same code ..But as soon as I start working with $_files the console log is not responding anymore. I've very limited knowledge on js and php.
Your tutorial is amazing, easy to understand, so much helpful and informative.
Hi although this is a year ago. you probably won't reply to me. but the XMLHtttpRequest(); does not pass value to the "upload.php" file.
I literally copy every step you did.
fuck
Alex thank you, you've learned me a lot about javascript.
for some reason it wont run the ondrag events or the on drop event. my code is exactly like yours from what i can tell yet it doesn't run
when i send fornData using xhr to upload.php, it's not getting the data, and in responseTest, it's showing undefined all the time and nothing showing in php file
I am having the same problem. Is there a solution for this?
What about image compression? Wouldn't that be a must for speed purposes?
Works fine for me, but not "out of the box". Remember: This tutorial is 8 years old. Going through it, also checking every console.log, brings it to an success.
that's great. I haven't coded in years and am using this to get back into it. i just wished you used Jquery for your JS...
Thank you very much for this great tutorial! Worked like a charm! :D I rewrote my version, my version does not upload the files right after dropping them into the field, it stores them in an array and sends all of the data if the user clicks on the submit button :D
Love your voice! Btw nice tutorial!
Would be awesome to have a fallback so you can just click the drag div to allow upload.
instead of having a div dropzone try using
make sure to add a html
you could actuely try learning or at least google before you ask...
good work bro, How to handle progress bar while uploading files....?
Amazing, really amazing is just what im looking for, thank you very much.
Perfect tutorial
it helped me a lot
BIG THANKS
Hi , we can use this.classList.add("dragover"); rather than this.className.
Love this tutorial since first seconds
Thank you, from Mexico!
You saved my life bro thank you
Really great tutorial. Thanks for sharing.
21:23 you should use
anchor.textContent=data[x].name;
because innerText not working properly in Firefox
In the "formData.append('files[]', files[x]) line, please could you help me understand the semantics behind 'files[]' , I don't really understand when and where to use the square brackets in such a context.
Very good, but is not working with IE and Explorer Edge, but is not just this one. How can I make it work everywhere? Thankyou.
Thats exacily a was looking for!
thank you it's simple and works
Could you change an input[type="file"] value with e.dataTransfer.files and submit the form instad of having an ajax request?
Hi,
Odd, working in chrome - but when draging a image over the dropzone I get a not allowed symbol (cirle with strip in it) why??
looked at other script with samples the same thing so what is wrong
all help is welcome
I have everything working great. But for my purpose I would like to pass a sting variable that contains which directory I would like the files to upload to. Example: Accounting, Sales, Purchasing, ect.. I found how to pass it to my PHP file using this statement: formData.append('department', 'Accounting'); I would like to use it more dynamically and pass the string 'Accounting' as a variable named 'department'. That way I can just make a call to the external javascript in my HTML files and pass the 'department' variable to it. Any ideas on how i can do that?
I'd like to upload and have the latitude and longitude be read from the file upload - or the location data - then the user to add a name - + an autogenerated #id - How do I carry this out?
great material as always! what about if we had to pass in csrf token as in laravel ...before posting??
I have this problem. do you have solution to this now?
Thank you for video.
Actually, can you upload this code somewhere?
Any idea how to make file managment via website? Like list of files in uploads folder and options like remove, rename file?
How do i get the code tested during programming, I have follow your steps in creating the code
Fantastic !!
Thanks !!!!
what if i wanted to store my files in a database? how would i go about that?
Dang we can't use this for commercial use :(? Know anywhere I can learn code that I can learn for commercial use? Almost everywhere I go I try to learn code but they all say I can't use for commercial. I don't know how I'm supposed to make a job out of learning code if I learn from somewhere I can't even use code from :/
how can i create a random name where should i do this.? hash('algorithm',$name.time());
Why cant i get the length of the files with files.length ? it is undefined, and i chekked i have something in files, but it seems like its an object? it is only when i choose 1 file ?
very good tutorial
Thanks
Awesome video
My editor sublime text is not recognising $_FILES can anyone suggest anything?
Hello. I am having trouble with sending the form data using xhr i.e xhr(formData) ... it keeps returning undefined in the response text. I cannot continue until this works..what is wrong?
+Angel Beats Sorry solved it. Spelling error for responseText
Nice video, could you please share index.html and upload.php files?
Excelent!
HTML5 Drag and Drop Uploading
You do realize none of this code is working right? I debugged nearly everything and it seems none of this is up to date.
He states that this won't work in all browsers and it’s 4 years old …
Please, how suposed to be the security way to do this?
Not working on firefix why
Is it possible to download full script somewhere? i really dont know where is problem.
Why don't use Emmet? It would make codewriting more faster
I got an error of:
Unexpected token < in JSON at position 0
When I upload an image with a size of 8Mb +.
Can someone help me with this please?
jsonlint.com/#
validate the json
how to animate the file upload sucess
browser support for this tutorial??? not working on firefox and internet explorer
I am receving Uncaught TypeError: Cannot set property 'ondrop' of null in the ondrop method. Any ideas, solutions?
you have to write your js block after input whose id is 'dropzone' before body's end tag
His example calls the JS function before the DOM has loaded all the elements. The DOM hasn't yet loaded the id which is why it's null. Do something like window.addEventListener("load", initiate); then create a function called initiate and place the above code in. This will ensure the window has loaded all the necessary components before the function is triggered. Hopefully this helps.
how do you get your cursor to blur like that?
Just a curiosity, have anyone tried this with firefox?
Somehow I got it working perfectly in chrome but when I try it with firefox, the files uploads perfectly but the link to the files doesn't show.
Anyone got this problem?
ah! nevermind as 'Cor van Dooren' said innerHTML instead of innerText works. Just that innerText is not supported by firefox
ET I've got same problem. Thanks for usefull tip!
does this drag and drop uploading use ftp protocol?
If I am already using jQuery would it be better to use jQuery rather than javascript, or is javascript better for this?
AFAIK JQuery is JS. It's just a different, and usually preferred, way of writing JS.
Graciassssss buen tuto
Very helpful, thank you for the guide!
my consol gives me an error if i try to upload an image
the Error:
main.html:24 XMLHttpRequest cannot load file:///C:/Users/user1/Desktop/HTML/D&D/main_PHP.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.upload @ main.html:24Dropzone.ondrop @ main.html:29
you have to set up an e.g. apache server
(xampp for windows will be enough for you)
Can you have the javascript in an external file?
Indeed you can. Recommended.
Have you done external file? I've done it, but it doesn't work as an external file
hi Alex, i'm having an issue with this script, can you please help me
To whom found php wouldn't work, use a php server like using "php -S localhost:8000" runing a local server on linux.
Can you provide the code ?
What type of text editor are you using?
Sublime Text 2.
Where can i get the source code?
im having trouble with e.preventDefualt JS can anybody help me with that?
+Elliot La Fave e.preventDefualt
why you're typing "x = x + 1" and not "x++"?
It's habit after hearing Douglas Crockford speak on the subject. See stackoverflow.com/questions/971312/why-avoid-increment-and-decrement-operators-in-javascript for more information on this, there are some good links in there.
eslint.org/docs/rules/no-plusplus
Does not work at all...
Hello there,
Are there an other solution than "move_uploaded_file"? My webservice doesn't support that function which is a big handicap for me. My webservice use php 5.3.xx
you should think about switching to atleast a 5.4 server.
They won't update the php version, so that's why I asked for another solution :)
I ment switching hosting provider.
DeeJayEbbes Highly recommend you switch to something that allows you more flexibility. Why not set up your own VPS on Digital Ocean? It's easy, and we have a series on getting it all set up. Cloud Server Set Up: Introduction (Part 1/8)
According to the PHP manual, it has been supported since 4.0.3. www.php.net/manual/en/function.move-uploaded-file.php
How do this thing limiting one file per upload?
length
DON'T WORK ANYMORE !!
this one is nice but also i want to store this file or its path in database how can i
Stop removing comments just because they are not what you like. This script doesn't work at all.
Suburius, If this project did not work for you then please consider numerous variables as to why it hasn't worked. Such as out of date code seeing this code is 3 years old now. Maybe a syntax error in your code somewhere.? Or if you want to become a developer yourself how about finding a way to debug the issue. Just a suggestion.
1ST
Well done!
Did this nigga just write x=x+1?
This does not work, dont waste your time. The channel is good but dont waste a few minutes trying this, as it wont work