Share your repls and programming experiences

← Back to all posts
Image Uploader
ruiwenge2 (564)

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('https://image-uploader.ruiwenge2.repl.co/upload', {
        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!

Comments
hotnewtop
williham (11)

is this an app or just a way to do it?

williham (11)

@ruiwenge2 does it actully give a url to images, or just telling people how to do it themselves?

ruiwenge2 (564)

@williham this is an image uploader that you can use to generate image URLs, and I show you how to do it in the description

ruiwenge2 (564)

@williham it does give a url to images, but you need to add some code to make it work.

ruiwenge2 (564)

@williham its explained in the description

williham (11)

@ruiwenge2 ah, well, maybe add the code for the people so you only have to fork and add the url

ruiwenge2 (564)

@williham this was made so that you can quickly generate an image url without reloading the page or going to another.

CosmicBear (7)

@williham if it is telling people how to make it themselves, this would be in the tutorial section.