@@CodingNepal Hello. When my task is to download only pictures, everything is ok, but as soon as I want to download mp4 videos, that's the problem. Here's what I added as you did: let validExtensions = ["image/jpeg", "image/jpg", "image/png", "video/mp4"]; let videoTag = ``; dragArea.innerHTML = videoTag; Or this entire part: function showFile() { let fileType = file.type; //getting selected file type let validExtensions = ["image/jpeg", "image/jpg", "image/png", "video/mp4"]; //adding some valid image extensions in array if (validExtensions.includes(fileType)) { //if user selected file is an image file let fileReader = new FileReader(); //creating new FileReader object fileReader.onload = () => { let fileURL = fileReader.result; //passing user file source in fileURL variable let imgTag = ``; //creating an img tag and passing user selected file source inside src attribute let videoTag = ``; dragArea.innerHTML = imgTag; //adding that created img tag inside dropArea container dragArea.innerHTML = videoTag; } fileReader.readAsDataURL(file); } else { alert("This is not an Image File!"); dragArea.classList.remove("active"); dragText.textContent = "Drag and drop here to upload"; } } But now only a video tag is created in html, although for example I clicked on a picture = video tag, and in src - a picture (( ( How to fix?? Help, please!
how do we validate that on drag and drop the file/attachment is successfully loaded in our input filed which is hidden, because we need to send data to the server or need to other stuff
hello thanks alot for this video, im trying to do similar thing for my senior project , i was wondering if i want to insert more than one file, is it possible ?
Hi..!!.. How can i link the Input to a php script to upload the image on a server..??.. I named the input to link it to a php variable but it don't works :c
Thank's for video ! Could you please create dropdown bar with searching engin? each dropped document file searchable with searching engin. thank's made tuto like it.
You may did some mistakes. You can download the source codes file this project from here - www.codingnepalweb.com/drag-drop-file-upload-feature-javascript/
How do you edit multiple line at once? I can only edit multiple lines that are neighbours. Also how to deal with excel and other type of files Overall gr8 video!!
I have tried to explain each JavaScript line with comments... Hope you understand!!
We want to listen code description from your voice.
Sir one video for droodown
Can u pls share those imgs with us?
coding nepal i love your all videos really i appericate of all over tutorial course , i understood from this channel programming
Glad to hear that and keep it up
Merci beaucoup pour vos efforts monsieur, c'est très apprécié par les gens qui commencent la longue route.
The man who actually know the real use of javascript 😍😍🔥🔥
I made projects by watching your channel and the other one is @Florin Pop channel.
Thank you so much for appreciating my work 😁💙
same here
Creative level 💯
Mind blowing ❤️
Thank you 🙂🙂
Thanks for all,It is easy to understand
Glad it was helpful!
can you change the file type to excel and if you can can you tell me how?
Awesome !!
Keep up the good work...
Excellent, thanks for what you are doing !!!
Let the next video be about “Parallax effect pure JavaScript”.
Noted
@@CodingNepal Hello. When my task is to download only pictures, everything is ok, but as soon as I want to download mp4 videos, that's the problem. Here's what I added as you did:
let validExtensions = ["image/jpeg", "image/jpg", "image/png", "video/mp4"];
let videoTag = ``;
dragArea.innerHTML = videoTag;
Or this entire part:
function showFile() {
let fileType = file.type; //getting selected file type
let validExtensions = ["image/jpeg", "image/jpg", "image/png", "video/mp4"]; //adding some valid image extensions in array
if (validExtensions.includes(fileType)) { //if user selected file is an image file
let fileReader = new FileReader(); //creating new FileReader object
fileReader.onload = () => {
let fileURL = fileReader.result; //passing user file source in fileURL variable
let imgTag = ``; //creating an img tag and passing user selected file source inside src attribute
let videoTag = ``;
dragArea.innerHTML = imgTag; //adding that created img tag inside dropArea container
dragArea.innerHTML = videoTag;
}
fileReader.readAsDataURL(file);
} else {
alert("This is not an Image File!");
dragArea.classList.remove("active");
dragText.textContent = "Drag and drop here to upload";
}
}
But now only a video tag is created in html, although for example I clicked on a picture = video tag, and in src - a picture (( ( How to fix?? Help, please!
thanks man! really helpful
Glad it helped!
When displaying the image the input is lost, how can I keep it to publish by button?
Ek number
Thank you 💙
Thanks for the tutorial, so please let next about multiple upload with preview, delete and add button
Thank you very much. The best explanation that I've found. Really good.
That's great. It was very helpful.💕❤️
Nice thanks man!
Glad to help!
That's great. It was very helpful.
Glad it was helpful!
Really needed
Cool video, keep it up
Thanks, will do!
Great video ,, keep it up bro
Can you click the box area too?
how do we validate that on drag and drop the file/attachment is successfully loaded in our input filed which is hidden, because we need to send data to the server or need to other stuff
instead of image what extension needs to be used for a pdf file
Amazing video
Thank you 💙
@@CodingNepal Your welcome
how i can add for exp, logo on the top? i can't do it...
Ótimo vídeo parabéns ✌.
You are awesome💕💕
Thank you 😍
Thank You
Amazing !!
Can I put the file name in this like the video 'Preview Image before upload'?
I want to make it by applying two videos.
Thank you for your awesome video :)
You're most welcome 💙
hello thanks alot for this video, im trying to do similar thing for my senior project , i was wondering if i want to insert more than one file, is it possible ?
this is great , bro how to add up numbers in input boxes
const input1 = document.querySelector("#input1");
const input2 = document.querySelector("#input2");
console.log(input1.value + input2.value);
Thanks.
Hi..!!.. How can i link the Input to a php script to upload the image on a server..??.. I named the input to link it to a php variable but it don't works :c
Watch this video for it: ruclips.net/video/_xDCVt1F6O0/видео.html
@@CodingNepal Thank you..!!..
Just awesome ❤️ 🔥 bro....... But why was the video late?🤔
I think it was fast!
Nice!!
When you drag and drop the file is it left in a download folder?
I didn't understand. Can you please explain more.?
How to post this image for further use ?
Awesome bro ❤️
Bro mera b Chanel hai web design ke related
can we drag or upload multiple files?
Thx
Thank you 🔥🔥🔥
Bhai image direct upload Nahi ho Sakti Kya
I love the song
Can you pls make one so that when the user reloads the page the image still remains
nice music
Just Love it
Thank you!
super
is it work for videos too or not ??? if not plz make one how to upload video file in db
No it's not work for video. This is only for image file
close or cancel upload image ?❤️
I didn't code for it because I already did it in my previous video ruclips.net/video/AYjOyQhZiK0/видео.html
crop image and save image in database sir.?
Hello sir I am unable to run the php with this plz
How to run php files.🙏🏻🙏🏻🙏🏻
you are epic!!!
How to make PDF viewer using HTML CSS and js
Спасибо!
I want to send that image to server. How can i do it when don't have input tag. Thank you for reading my question. 😘😘
You've to use php move_uploaded_file() function to upload/move it.
@@CodingNepal How I can do it, could you explain me?
Thank's for video ! Could you please create dropdown bar with searching engin? each dropped document file searchable with searching engin. thank's made tuto like it.
how to send any type of file to the server?
You can easily do this using PHP move_uploaded_file function and remember we do not store files in the database we just store the path of that file.
How do i upload multiple files?
I'm thinking to make separate video for it.
@@CodingNepal waiting for this video
@@CodingNepal Waiting for multiple files upload video great content thanks.
I don't understand the code. What do I need to learn in javascript to understand this code?
Tried with your code when i drag and dropped the file, getting file value as empty
You may did some mistakes. You can download the source codes file this project from here - www.codingnepalweb.com/drag-drop-file-upload-feature-javascript/
nice 💙💙💙💙💙💙💙💙
Thank you 💙
why are you adding this in all function --- dropArea.classList.remove("active");
how to recover file behind ?
why my javascript is not working ?
You can get codes from the description and check your codes with our codes or tell me the error that you may got in console.
How to save the file?
Means?
@@CodingNepal The files need to be saved in some folder. It may be local machine or a server.
@@CodingNepal Every you dragged, need to be saved somewhere. It could be local macine or a server.
15:41 My image is not showing it is giving an error :
Get ~image URL ~ 404 (Not Found)
please help me to resolve error
Same to me
Have u find it
@@gametime6965 yes there is a code where we have to write ` instead ' then you will not get the error
@@mansisharma5365 now it's working... Thanks
Linkd down....
Please check it again.
How do you edit multiple line at once? I can only edit multiple lines that are neighbours. Also how to deal with excel and other type of files Overall gr8 video!!
cod not get bro
Bro.. I've recently uploaded this video so codes will be available tomorrow... Please keep patience.
@@CodingNepal please give this code bro
can you change the file type to excel and if you can can you tell me how?