If you want to learn more about how Data URLs work, see my quick overview video below 👇 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ipoLqQCEQMs.html
Very good tutorial, I just have a question, do you know how to do that but having 2 input files in the same form without repeating the function 2 times?
how did you fix it may I ask? I'm having the same issue, It say's it's something to do query selector being null or something and I cannot find the issue.
Why not use createObjectURL(file) which will create a blob reference to the file in memory vs creating a base64 string ? which one is more performance. createobjecturl is easier one line no callback needed.
Brilliant tutorial, explained clearly and comprehensively. How would one save the image after it was uploaded, ie if we changed the image size? Thank you in advance.
It's great tutorial! I would like you make tutorial about showing preview image with remove button and upload multiple files. thank you for all tutorial from you. It's very nice.
Thank you so much for the awesome video.. I am kindly asking could you do a QNS drag where a user drags a series of disordered options in the correct order.
Why its not working while I have written same code as video in html fiile... Where is missing... And tell me about links before head tag... Should I link any other js, css... Files to this file... Help..
Ultimately, I think you have to use/create a webscraper. Alternatively, you can use a link previewer API that already have this functionality implemented. I use Facebooks Link Preview API.
Just 1 question though. The css link with href /assets/docde.css where is the actual css? Like is it a code I have to code myself or that is on the internet, what?
Why its not working while I have written same code as video in html fiile... Where is missing... And tell me about links before head tag... Should I link any other js, css... Files to this file... Help..
hey! too late, but you can try making the containers that you need with the same classnames an id's, and in JS just querySelectorAll, like this (more or less): inpFile.addEventListener('change',function (){ for(let i = 0; i < this.files.length; i++){ const file = this.files[i] if(file){ const reader = new FileReader() previewDefaultText[i].style.display = "none" previewImage[i].style.display = "block" previewImage[i].style.objectFit = "cover" reader.addEventListener('load', function(){ console.log(this) previewImage[i].setAttribute("src", this.result) }) reader.readAsDataURL(file) } } }) hope help you ! (sorry for my english)
Unfortunately for some reason keep giving me error.excel.js:38 Uncaught TypeError: Cannot read properties of null (reading 'style') at HTMLInputElement. (excel.js:38:24) previewDefaultText.style.display = "none"; I am doing something wrong but don't know what.Source code would be helpful.
i don't understand, where the javascript is in the same file but i see that there are .js files that contain only javascript. what's the difference between those two?
Hey mate, just wondered if you can do a tutorial on getting the exir data extracted from the image using js, before upload? Been trying to do this with node js packages including exfir but am not having any success getting the gps coords extracted. I get all other data bit no gps coords. Any help would be awesome!
Why its not working while I have written same code as video in html fiile... Where is missing... And tell me about links before head tag... Should I link any other js, css... Files to this file... Help..
Hi! Thank you for your tutorial (one more subscriber). Can I use this code in a contact form 7 (upload file field)? How can i keep the proportion of the image with the dimension of the image-preview class so that it doesn't appear distorted?
Hey in the line of previewDefaultText.style.display="none"; i get this error message. Cannot read property 'style' of null at HTMLInputElement. (home?inpFile=:64)
It means you're trying to select an element that doesn't exist (or doesn't YET exist). As a potential solution, try using the DOMContentLoaded event or put the SCRIPT tag at the end of your BODY tag.
Why its not working while I have written same code as video in html fiile... Where is missing... And tell me about links before head tag... Should I link any other js, css... Files to this file... Help..