Discussion on "10 useful HTML file upload tips for web developers"

Tapas Adhikary · 2020-10-18T07:55:09.169Z

Introduction The ability to upload files is a key requirement for many web and mobile applications. From uploading your photo on social media to post your resume on a job portal website, file upload is everywhere. As a web developer, we must know tha...

This is information that is both great and helpful.

This article has helped me to How to get full path of uploaded file in html using JavaScript. This website and this kodlogs.net/234/how-to-get-full-path-of-uploaded-… website came in handy when I think about it. Thanks to the website authorities

That's Great! Thank you so much and please keep sharing like these contents.

Hey Tapas thanks for sharing!

I'm trying to recreate the very first simple file upload using your code, but getting like 5 console.logs instead of 1??

Am I doing something wrong?

The code: const fileUploader = document.getElementById('file-uploader');

    fileUploader.addEventListener('change', (event) => {
    const files = event.target.files;
    console.log('files', files);
    });

Thanks for this article. I've a question. How do we monitor file upload progress if we use URL.createObjectURL()

Hi saptharishi suresh, file upload progress 'monitoring' will be difficult to do with URL.createObjectURL().

The URL.createObjectURL() is to get the object(image, PDF) URL to render(display) them on DOM. So with progress monitoring(assuming I am uploading multiple image files), I can use the URL.createObjectURL() when the upload of each of the images is done and display them like a thumbnail on the page.

Is that what you are looking for? Did I understand your question correctly?

Glad to find this awesome article!

Glad it was helpful to you, Sanvi.

Awesome work. Kudos Brother. Very Informative

Thank you Kannan for liking and commenting.

Awesome overview! Thanks for sharing ✨

Superb! I'm definitely saving this. Thanks for sharing!

Fantastic article Tapas Adhikary. I love it.

Informative content... But what about back end process of uploading a file. Can it be achieved only through php or is there some other efficient way too?

Kritesh Kaushik,

Great point Kritesh! Yeah, the scope of this article was to introduce the HTML support of file upload capabilities.

The back-end part starts exactly where this article ends. I'm planning to write one sooner with node.js as backend.

Can it be achieved only through php or is there some other efficient way too?

Yes, there are multiple ways.

It could be a combination of both front-end and back-end. For example, the HTML File API provides ways to get the file object and convert it into a stream, blob, string, etc.

The same converted output can be used to store using a backend service written in node.js.
We can use something like Multer which is very efficient in handling the file upload in the node.js ecosystem.

I think it would be an exciting item to explain some steps to file upload using back-end services.

Thank you for reading through and asking. Appreciate it.

Tapas Adhikary Excellent article. Bookmarked immediately after reading it.

I especially liked #9 and #10. I didn't know that we could do drag and drop using native HTML and vanilla JS. I would definitely try to look for native solutions for my problems from next time. Thanks for this article.

Thanks Bhanu Teja Pachipulusu for reading through and glad that, it was useful to you.

Search Hashnode

10 useful HTML file upload tips for web developers

Responses14