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
5

Image Uploader

ruiwenge2
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!

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