Thanks for this really powerful, useful, and simply described (well-coded) tutorial. Your typing is perfectly correct and fast as always )) Thank you very much again. Small Tip: Watch this on 1.25x speed as the tutorial is a little bit long.
Thanks for the amazing tutorial! If there are folks who are used to write javscript without semicolons, you're going to run into trouble here with the eventListeners array of ['dragleave', 'dragend']. Don't forget to add the semicolon after the eventlistener above. Might save you half an hour :)
Hey I have a problem. Whenever I drag a picture like you do in a minute 21:21 It does not show me the "dataTransfer" It shows me "data : undefined". My code is written jquery and its looks fine. What do you think?
This is good but when I .center the , the element is where I want it to be but when I drag the photo, the dotted line becomes skinny and there is no thumbnail in it. I will have to mess around with this more to figure out what is going wrong
Thanks a lot for the tutorial. Just a few things to notice : - 18:40 ['dragleave", "dragend"].forEach ... seems not to be working on modern version of Chrome. Instead of this, you can take this opportunity to refactor the code : Drop("change", inputFile) Drop("dragover") Drop("dragleave", undefined, false) Drop("dragend", undefined, false) Drop("drop", undefined, false) function Drop(type, eventTarget = dropZone, addClass = true) { eventTarget.addEventListener(type, e => { e.preventDefault() if (addClass) { dropZone.classList.add("drop-zone-over") } else { dropZone.classList.remove("drop-zone-over") } const currentFile = e.dataTransfer?.files || e.currentTarget.files if (currentFile.length) { inputFile.files = currentFile updateThumbnail(currentFile[0]) } }) } This covers all the cases you encounter in this video. Tip from another comment under this video : wrap your span and input with a label class="drop-zone" instead of a div (34:32). - 28:38 you can just use optional chaining : dropZone.querySelector(".drop-zone-prompt")?.remove() - 32:40 you can use this to have a centered, no repeated image, letting you see the whole image (contain) : thumbnailElement.style.background = `url('${reader.result}') center / contain rgb(255, 255, 255) no-repeat NB : yeah forgot to mention that at 21:50 it's not a bug. When you expand an object, look at the right little blue i icon. Javascript will evaluate the expression at the time you expand it, not at the time it is executed. It's normal : )
Very smart I'm not even at file drop portion of the video and I've learned 2 very useful skills: content: attr(data-label)😎 and how to attach 2 listeners at once using an array of types, that's very clever!! Awesome job 🤩
Hi, I copied everything, however, I am still having an error which is thumbnailElement.style.backgroundImage = 'url('${ reader.result }')'; --> the error exist on the dollar sign. could you help me? thank you.
data-label in the after content.... wow. I got errors when I tried ['dragleave', 'dragend']. Did this instead.. const dragTypes = ["dragleave","dragend"] dragTypes.forEach(type => { ....
@@mehmetcemunal evet işime yaradı benim. Sadece projemde kullanırken kücük resim kısmında hata çıktı ama benim icin onemli değildi o. Sizin nerede hata çıkıyor?
I would love to get one with multiple thumbnails and where it stores the uploads, thumbnails and all that in localStorage. Maybe set it up, so when you upload a file, a new empty file upload field appears right next to the one where you’ve just uploaded a file.
Check out this link on codepen. codepen.io/kent_iyo/pen/VwLbvmg I built it with UIKit framework. You should probably start learning more javascript so you can build custom things you'd like in your project.
@@senseicodes, I've just started becoming a little bit better at Js, and I've figured out that my way to learn JS is by creating projects, googling what I don't understand and challenge myself to extend the projects by adding different functionalities to it. So that's what I'm trying to do everyday.
Can we show the drop area only when the file dropping into the form? Otherwise normal form should show by default. is there any event to find whether file getting dropping or not? Accordingly we can change the class
I don't get it. I did everything you did and i checked 3 times for missing parenthesis, semi-colons, etc but its still not working. The moment I drop an image, it opens in a new tab.
That means you lack the .js codes that enable the drag and drop functionality specifically within the square. If you have the .js file, then make sure you reference it correctly e.g within your HTML file. It should work as long as the referenced path and the codes themselves are correct.
@@ian-jo9qv holy shit! Finally an answer! Thank you so much. But I have completely forgotten about this project. I'll have to do it over again to see where I fucked up. Then I'll try to do what you said
I put 'required' on and I'm getting following Error: An invalid form control with name='Picture' is not focusable. Can anyone help? How to make this dropzone as required field? with hidden input .drop-zone__input { display: none;
Dom, Im just now learning Javascript. Your turorials are excellent! I just walked thru the drag drop image tutorial, and I'd like to know, how can I copy or clone the uploaded image to another element, a second image thats duplicate and bigger?
Thanks for the tutorial! But how can I insert the image into phpmyadmin? I tried adding sql query in php file, but it does'nt work. Could you make a tutorial about it? Thank you in advance!
Hello, Ive modified the drag and drop to accept only video formats and to display the video. The problem is that I can not change the source of the video. Could you give me some advice? stackoverflow.com/questions/63441429/changing-the-video-source-based-on-file-input-using-javascript Thanks
Thank you so much for this video! Could you do another about the File Reader object? I'm looking forward to watching the video using the Fetch API as well 😀
Yes, Dom, we want to see a video on multiple file upload. : ) And thank you for all the great videos!
Yes, we want to see a video on multiple file upload. it will really help
Thanks for this really powerful, useful, and simply described (well-coded) tutorial. Your typing is perfectly correct and fast as always ))
Thank you very much again.
Small Tip: Watch this on 1.25x speed as the tutorial is a little bit long.
Thanks b e
Thanks for the amazing tutorial! If there are folks who are used to write javscript without semicolons, you're going to run into trouble here with the eventListeners array of ['dragleave', 'dragend']. Don't forget to add the semicolon after the eventlistener above. Might save you half an hour :)
Yep!! Very good point, I was into JavaScript without semi colons until I ran into that exact problem
@@dcode-software
@dcode-software
Hey
I have a problem.
Whenever I drag a picture like you do in a minute 21:21
It does not show me the "dataTransfer" It shows me "data : undefined". My code is written jquery and its looks fine.
What do you think?
When connected with a PHP form the image selected is not getting submitted to the script after clicking on submit button.How to fix it ?
thank you for the video. how can you make the thump nail display the image its full size instead of enlarging for example if it is a passport size
Around 24 minutes, it was golden for me. Totally game changer. Thank you very much.
This is good but when I .center the , the element is where I want it to be but when I drag the photo, the dotted line becomes skinny and there is no thumbnail in it. I will have to mess around with this more to figure out what is going wrong
You can skip the click listener in drop zone replacing the div to a label, actually great job, it was really didactic
Thanks a lot for the tutorial. Just a few things to notice :
- 18:40 ['dragleave", "dragend"].forEach ... seems not to be working on modern version of Chrome. Instead of this, you can take this opportunity to refactor the code :
Drop("change", inputFile)
Drop("dragover")
Drop("dragleave", undefined, false)
Drop("dragend", undefined, false)
Drop("drop", undefined, false)
function Drop(type, eventTarget = dropZone, addClass = true) {
eventTarget.addEventListener(type, e => {
e.preventDefault()
if (addClass) {
dropZone.classList.add("drop-zone-over")
} else {
dropZone.classList.remove("drop-zone-over")
}
const currentFile = e.dataTransfer?.files || e.currentTarget.files
if (currentFile.length) {
inputFile.files = currentFile
updateThumbnail(currentFile[0])
}
})
}
This covers all the cases you encounter in this video. Tip from another comment under this video : wrap your span and input with a label class="drop-zone" instead of a div (34:32).
- 28:38 you can just use optional chaining : dropZone.querySelector(".drop-zone-prompt")?.remove()
- 32:40 you can use this to have a centered, no repeated image, letting you see the whole image (contain) : thumbnailElement.style.background = `url('${reader.result}') center / contain rgb(255, 255, 255) no-repeat
NB : yeah forgot to mention that at 21:50 it's not a bug. When you expand an object, look at the right little blue i icon. Javascript will evaluate the expression at the time you expand it, not at the time it is executed. It's normal : )
Instead of a span, you could use a label for the input so it’s semantic and also works to trigger the file upload window
That moment when you realize you have overworking!
Fantastic tutorial ... Thank you so very much!
Just "Well done mate!", very good tutorial.
Very smart I'm not even at file drop portion of the video and I've learned 2 very useful skills: content: attr(data-label)😎 and how to attach 2 listeners at once using an array of types, that's very clever!! Awesome job 🤩
Thank for this but i need to add multiple images as u told to add multiple in input , it is not working for multiple images
Best tutorial, of course
Hi, I copied everything, however, I am still having an error which is thumbnailElement.style.backgroundImage = 'url('${ reader.result }')'; --> the error exist on the dollar sign. could you help me? thank you.
Excellent tutorial, very well explained. Thank you much. more blessings.
Image is Bieng saved in localstorage ?
How about image resize on upload?
Man you're lifesaver. Thanks a lot!!!!!!
Hi! Nice video! Is it possible to have a video where there is an icon on the box that can delete the uploaded file?
Great video, please make a video for multiple file uploads. Thx
This was very helpful! Thank you for taking the time to make this video. 👍
is it possible if i want to change, only for uploading excels?
data-label in the after content.... wow. I got errors when I tried ['dragleave', 'dragend']. Did this instead..
const dragTypes = ["dragleave","dragend"]
dragTypes.forEach(type => { ....
Very Good Thanks Too Much but why we got this error ?
@@ahmedatya6226 I'm not sure why. I can't remember.
Hello from Turkey...
thanks, finally found what I was looking for.
Merhabalar. Isinize yaradi mi ? Ben de deniyorum ama biraz fazla eksigim var anlasilan.
@@mehmetcemunal evet işime yaradı benim. Sadece projemde kullanırken kücük resim kısmında hata çıktı ama benim icin onemli değildi o. Sizin nerede hata çıkıyor?
Really appreciate this video and your work man. This was really useful to me and works perfectly. Thank You
Hi!!, can you pls make one so that when the user reloads the page the image still remains
I would love to get one with multiple thumbnails and where it stores the uploads, thumbnails and all that in localStorage. Maybe set it up, so when you upload a file, a new empty file upload field appears right next to the one where you’ve just uploaded a file.
Check out this link on codepen. codepen.io/kent_iyo/pen/VwLbvmg I built it with UIKit framework. You should probably start learning more javascript so you can build custom things you'd like in your project.
@@senseicodes, I've just started becoming a little bit better at Js, and I've figured out that my way to learn JS is by creating projects, googling what I don't understand and challenge myself to extend the projects by adding different functionalities to it. So that's what I'm trying to do everyday.
hello i have a question how can select path of folder or empty directory
hi I don't want base64 output I want output as binary. can you help me with that
Great video! really appreciate the walk through!
Perfect work.
What if we'll input multiple file? Will it preview multiple images?
Can we show the drop area only when the file dropping into the form? Otherwise normal form should show by default. is there any event to find whether file getting dropping or not? Accordingly we can change the class
Excellent Job, work perfectly in MVC Core
Thanks for your video man, it was really useful and it is what I was looking for :)
Hello thanks for this ttutorial. its very helpfull. but what if i'd like to fetch url from database and display it into thumbnail? thanks
hello how can we make it printable ty
I wanna know how to do this with multi images files with miniature
Awesome guide! Thank you, mate!
I don't get it. I did everything you did and i checked 3 times for missing parenthesis, semi-colons, etc but its still not working.
The moment I drop an image, it opens in a new tab.
the same here...
That means you lack the .js codes that enable the drag and drop functionality specifically within the square. If you have the .js file, then make sure you reference it correctly e.g within your HTML file. It should work as long as the referenced path and the codes themselves are correct.
@@ian-jo9qv holy shit! Finally an answer! Thank you so much. But I have completely forgotten about this project. I'll have to do it over again to see where I fucked up. Then I'll try to do what you said
@@tuxedious1782 😄You're welcome.
Hi! is there any way i can do this in wordpress?
Hey great job with the drag & drop form. Nice tutorial!!
what a great tutorial
Is there a way to center the dropped image.... thanks so much for the lesson!
In the drop-zone__thumbanail class, you can add background-position: center;
how to insert this JavaScript into export default vue?
Event.preventDefault() on event drop don’t prevent jpg opening. Please help
This awesome, thanks dom
+1
1st
you got a new subscriber mate, thanks for your time
Awesome, thank you!
Hi. Thank you for this great video. It works like a charm.
I feel so silly asking this but how do you get the icon in there?
I put 'required' on and I'm getting following
Error: An invalid form control with name='Picture' is not focusable.
Can anyone help? How to make this dropzone as required field?
with hidden input
.drop-zone__input {
display: none;
update - I did opacity:0 to still have the required form validation..
Thanks so much, for this well explained tutorial
How can make it in React JS?
thanks man , you're like my mdn tutor
the onload event should be attached to the listener before calling the readAsDataURL method.
awesome tutorial, thanks a lot!
Dom, Im just now learning Javascript. Your turorials are excellent!
I just walked thru the drag drop image tutorial, and I'd like to know, how can I copy or clone the uploaded image to another element, a second image thats duplicate and bigger?
How to save the file into a folder?
Very nice video! Thanks for sharing your work!
No problem! Cheers ☺️
Appreciate the love on Twitter!
Why is it not working on MAC computers. Could anyone say?
Nice work! Thank you!
Great job. Thank you!
Glad it was helpful!
Subscribed, what an amazing content
Hey can I ask what editor is being used in this video?
Virtual Studio Code
Thanks for the tutorial! But how can I insert the image into phpmyadmin?
I tried adding sql query in php file, but it does'nt work.
Could you make a tutorial about it?
Thank you in advance!
you can encode and decode the file, also have to use blob in database
Good tutorial man!
And how is vscode having more line spacing?
why is not working in my VS :(
a very helpful video, thank you!
Hello, Ive modified the drag and drop to accept only video formats and to display the video. The problem is that I can not change the source of the video. Could you give me some advice? stackoverflow.com/questions/63441429/changing-the-video-source-based-on-file-input-using-javascript
Thanks
Of course we want and thank you very much
JS: 14:40
а есть русскоязычные такие видео? может кто ссылку кинет?
Thnaks you for tutorial..
yeayy nice tutorial, and i would love to know how to make it multiple upload with thumbnail..
could u please create that tutorial also
thanks
Cheers and yeah I do have plans to create a large scale document upload form!
Thank you so much for this video! Could you do another about the File Reader object? I'm looking forward to watching the video using the Fetch API as well 😀
love you bro
DOM please make tutorial on DOM
38 MIN UTES IS QUICK?
Thank you
Thank you !
Brilliant !
Dang bro this didnt work for me
nice, you know es6.
21:45 this bug ruined my life😭
you are fucking awesome
goooooooooooood thx a lot
👍
nice
Cool
Wanna be friends man?
great tutorial thanks a lot 💕
That was an amazing tutorial. Thank you!