Skip to content
Sign upLog in
← Back to Community

Image Uploader

Profile icon
ruiwenge2

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!

Voters
Profile icon
exonax
Profile icon
PixiGem
Profile icon
CosmicBear
Profile icon
justaperson22
Profile icon
ruiwenge2
Comments
hotnewtop
Profile icon
williham

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

Profile icon
ruiwenge2

@williham
what do you mean?

Profile icon
williham

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

Profile icon
ruiwenge2

@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

Profile icon
ruiwenge2

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

Profile icon
ruiwenge2

@williham
its explained in the description

Profile icon
williham

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

Profile icon
ruiwenge2

@williham
uh what?

Profile icon
williham

@ruiwenge2
well, idk

Profile icon
ruiwenge2

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

Profile icon
williham

@ruiwenge2
ok

Profile icon
CosmicBear

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