Will input type of file work ?

Question

I just tried to get image as user input on browser (not on sololearn), but it didn't work.

This is the code:
https://code.sololearn.com/WCTO0DsPazPh/?ref=app

I just hosted it on GitHub, but it didn't work. Why ?

This is the hosted site:
https://prasantkumar123.github.io/imageinput.github.io/

This is the repository:
https://github.com/prasantkumar123/imageinput.github.io

I know it will not work on sololearn. But how to get image from their local folder as user input on browser ? (Using HTML, CSS and JavaScript)

Answer 1

https://code.sololearn.com/WMfSO7Ay86na/?ref=app

have a look at this...
there are 2 things you need to do to display that uploaded image ..
#1is obviously calling that fun() function 😁

and
#second is to convert that file's file property which is an array which holds data about multiple uploaded files..here in this code we have targeted the first one ...and then you need to create an url of that file object to use it in your code (this url is just an temporarry )
and thats it...now you can set the generated url to display selected image ...it could also be anysort of video / audio etc...

Answer 2

👍🏻..wlcm

Answer 3

yes but you will need a little serverside script ...(i can help with php if you want)

Answer 4

idk about firebase ...
i havnt used it 😅..but there should be some ways in there

Answer 5

Prashanth Kumar

Thanks a lot 😊
Now I can show my projects to my non-programming friends

*I had also forgotten to add onclick 😅. Thanks also for reminding

Answer 6

Prashanth Kumar
Can I save users image in my database and show to all users in this method ?

Answer 7

Amardeep kesharwani
Prashanth Kumar
Naqab Posh
Aad Hoogenboom
Sheida Hedayati
👰Safalta 👰
Calviղ
Kode Krasher
Love
ye🇸 🇰ay

Please help me 🙏🏻🙏🏻🙏🏻

Answer 8

But my project is based on JavaScript, firebase 😒
Will php work here ?

Answer 9

Prashanth Kumar

I am telling about this project.
https://code.sololearn.com/W79ZA5kMoxnv/?ref=app

In this project, users enter their profile link for profile picture.
But my non-programming friends don't have sololearn account. That's why I want to take image input from them in this way 😥

How can it be possible ?

Answer 10

Kode Krasher

Yes sir, I got solution for securing my database. I want to add an approval feature like the code

https://code.sololearn.com/WikgaeRFs863/?ref=app

But now I want show my project to my non-programming friends, who can't do anything with my database. And also they don't have sololearn account. So I want to take image as user input for profile picture.

Answer 11

Prashanth Kumar [left]

Oh
Thank you 😊
but is there any way to create a permanent link of that image ?

Answer 12

Kode Krasher
Yes sir I know it.
But I want that my non-programming friends would also participate in my code. So I want to host that site on internet.

(I will not post that link on sololearn, because there are my friends and relatives who will see my projects)

Is there any way to create a permanent link of the image ? As in Prashanth bro's code it creates a temporary link.

Answer 13

You will have to use the file reader API.
Check out this link.

https://javascript.info/file

Answer 14

Kode Krasher

https://code.sololearn.com/WMfSO7Ay86na/?ref=app

This one

Actually it will not work on sololearn. It is working on browser
I have hosted it on GitHub

https://prasantkumar123.github.io/imageinput.github.io/

There it is working

I just want to add this feature in my "for your fav 😍" project instead of profile picture from Sololearn profile link, so that my non-programming friends can also upload their profile picture (On browser, not on sololearn)