Skip to content
Sign UpLog In
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs

Image Uploader


Do you need an image uploader that can generate an image URL that isn't extremely long, without reloading the page? Luckily, I've got you covered. I created my own image uploader, and you can use it too. Here's how to use it.

How to use Image Uploader

First, we create the HTML input:

<!DOCTYPE html> <html> <head></head> <body> <input type="file"> </body> </html>

And in the JavaScript code, first we add the event listener:

const input = document.querySelector("input"); input.addEventListener('change', () => { uploadFile(input.files[0]); });

Next is the uploadFile function, where we will use the fetch method to generate a URL for the file:

function uploadFile(file){ const fd = new FormData(); fd.append('image', file); fetch('', { method: 'POST', body: fd }).then(response => response.text()).then(response => { // the response is the URL of the image alert("Image URL: " + response) }).catch(err => alert(err)); }

If you upload a file that isn't an image, it will give you an error that says TypeError: Failed to fetch.

I hope this was helpful!

2 years ago
You are viewing a single comment. View All