Upload Resized/Compressed Image In Javascript (Base 64 Data URL to File and FormData)
HTML-код
- Опубликовано: 19 сен 2024
- Previous Video: • Resize & Compress Imag...
In last video we resized and compressed an image in browser using javascript. In this part we will take the image from data url format and convert it into file and then upload by sending it to server in file format. We will take it slow and try to understand each and every line of code we write.
**************************************
Catch Me On Social Media
**************************************
Instagram: / mudassir2m & / codev5
Facebook: / mudassir2mofficial & / codedev55
Twitter: / mudassir2m
Tiktok: / mudassir2m
Source Code On Github: github.com/mud...
Also checkout my main channel: / @mudassir2m
Great presentation and explanation. I'd suggest linking resources to the concepts you mentioned to research outside the video.
I'm late to the party, but just want to say thank you for two excellent videos on JS image processing. I normally do my image processing on the backend with .Net/C#, but this was really good stuff, and well presented. Bravo!
Thanks ❤️
you are a great teacher... I hope more videos, my english is basic but you make it very easy to understand.... Good luck in your life
The last video was great... but I was browsing for this one. Please, don't change my mind!
First of all thanks for your content, keep up the quality work. I'm glad that you used Laravel on the server side
Like to see example of creating and uploading an audio file strictly in the browser. Thanks for everything!
Este video debería ser visto por todos los full stacks del mundo
Great tutorial again, loved this 2 part serie!
Enormous Thank You Sir.
This successive tutorial is robust helpful as the previous one.
❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
Such a good explanation. Please keep uploading videos!
I know it's been 7 months but I really appreciate what you did man, I got my problem solved thanks to this video of you. Wish you all the best
You look a lot like Jim Carrey :) good video, thanks
great job brother... well done
Thank you so much for this video and the first one also. I am having trouble getting this to work with my server. Im echoing out all the POST values being sent to a PHP file on my server, but it is never populated with any data. Any ideas what I am missing?
Thanks!
Nice content 🎉
Very nice :)
Thanks you are the best!
Great video brother it was very helpful, Thanks Mate
Great Video and the video before this one as well ! Well Done ! Your videos are great, please do keep up the good work. Your style is very nice, I was struggling with this code but after watching your video, it became clear and more understandable to use. Also I wanted to ask a question: I am uploading my image in a form and uploading to server from my PHP script along with SQL query, how do I take the compiled image to the original input field for uploading in a form ?
Thank you! For the kind words. Really appreciate your feedback. If your question is that you want to add this image to your form and submit the image with the form, then I believe it's not possible due to security risk. User can only select an image for an input field we cannot set the file otherwise. Therefore I would suggest instead of submitting the image with form. Either upload the image first using Fetch and then send the uploaded image file id/path with the form. or Submit entire form using AJAX/fetch. Otherwise you will have to compress the image on backend.
@@code_dev Thank for the reply, yes you understood correctly. I now understand that we cannot change the file input however is it possible to create a new hidden input (file) field in the form and append / attach this blob to the new input ?
@@alphauby the question is very important indeed. Sometimes users may change their mind picking different images before eventually submitting the form so we can end up uploading more images than expected. Especially when we allow more than one image. We should also check that uploaded images are not the same. In my case I need to allow user to upload up to 3 images. To use your awesome idea comfortably I now need to learn how to compile whole form data along with compressed images and send it in a single POST request to process in one file at backend as if it was sent via regular form. So third video on the topic would be highly appreciated 👍 Still, your work on the topic is so valuable and well-explained!
Thank you so much, helped me a lot!
dude why you stopped posting please don't
Wow, So amazing!!! But is it efficient speedy way to do ?
Depends on your case. This is not a lot of code. If you are using a framework it might be even simpler
@@code_dev I am using ruby on rails. Thank u 😊 🙏 😊 appreciate your tutorial.
great work
hello sir please i want send a image from client side into another using websocket the problem is when i send it's long stringfiy data how to fixed please
?
Can you explain your problem please. If you are trying to send the base 64 image string thats going to be long. Ideally if you can upload the image to server and use websocket to send the url of the image or something along those lines would be a better solution. You can DM me on Instagram @mudassir2m.
@@code_dev thank you so much sir and i send screen into your account instagrame
can't we make this whole a separate function that returns a compressed file? And then we can upload that file...
You can refactor your code in any why you prefer. As long as the process remains in tact.
Are there any way to make the same with videos?
Not in browser. Wouldn’t recommend that. Generally you can use 3rd party videoEncoding services API with your backend.
Good day sir, how to download the created image file? Thank you in advance sir :)
WHY???? Why would you do that? A Laraval application, I don't know Laravel!!!! Why can't, you use Vanilla Javascript, send it to a local file? That's it I'm out looking for something I can actually use. Very disappointing. : - (
Hi Nigel. Ideally you would like yo send the file to server and handle the upload and storing files and record in database. We cannot do that in Javascript. You can use Node/express to create a server which is no different from how larval work.
I think what you want to do is simple save the file in your machine. For that you can simple create an a tag and download using that
You can use this code to download image on client.
let d_image = document.createElement("a")
d_image.href = new_image_url;
d_image.download = 'download.jpg';
console.log(d_image)
document.body.appendChild(d_image)
d_image.click()
document.body.removeChild(d_image)
Nigel its sad you dont understand that this is a tutorial to learn, and he touches upon how you could use this for anything