How I Created a File Sharing Website using Simple JavaScript

Sure 👍

I think Learning is part of doing project so i recommend you to go through Youtube for basics understanding and gthen go read some articles on it. But be sure not to fall in to Tutorial Hell

Anurag Vishwakarma • Oct 5 '22

Can you please share all files, codes etc.

Yeah sure its in my github github.com/Varshithvhegde/anyshare

Comment deleted

Check the permission in firebase realtime allow read and write as true.

Bro already did but not working.

And permission in storage also right??

Are you talking about this ?

About What?

imgur.com/a/wVp961q

I dont see any errors just try to check it in console error may show there

I don't know what should I do ? imgur.com/a/xUglDfG I have to edit rules too ?

Nope everything seems correct here

I tried to run code locally and removed some comments for javascript file, showing error : file not found - imgur.com/a/rF6aybH

Is file uploading?

Yes file upload works but when I try to download file by putting code : doesn't work.

bro can we chat in live ? like on messenger or WhatsApp / any other ?

Anurag Vishwakarma • Oct 9 '22 • Edited

Faisal N. • Oct 6 '22

Omg I’m in “tutorial hell” lol
Great project!

If you know you are in it then sure you will be out of it. Just think of any project in domain which you are good at. Do some simple project without any tutorials that's it. Yiu will be out of it in no time. That's how I came out of it. 😊

Anurag Vishwakarma • Oct 5 '22

Ok! No Problem.

Devarshi Shimpi • Oct 5 '22

Probably deploy it to Github or maybe Vercel, you don't need much of coding experience for that. It's one click deploy to Vercel, but yes do replace with your firebase API ID's

Devarshi Shimpi • Oct 5 '22

I think it's not actually safe using because the unique ID's r just random numbers, and entering someone else's ID's might reveal their files uploaded. Maybe fix would be generating a random string instead that too of 20+ Characters???
Nevertheless, Great article!!!

Varshith V Hegde • Oct 5 '22 • Edited

But number is 5 digit so probability is very less and this is my cloud so i don't recommend you can trust cloud. Because here i am not encrypting the file so. I would try to implemet it. By the way thanks for it. And i made it 5 digit because it would be easy to share.

Devarshi Shimpi • Oct 5 '22

Yep I understand 5 digit are easy to share. And yes, you can always develop further add encryption. If possible find an alternative to Firebase where the pricing is more affordable. And Welcome Of course 😊😊

Emil • Oct 6 '22

I would suggest you have a look at pre signed urls when it comes to sharing

Ok i will look at it thank you

Matt Ellen-Tsivintzeli • Oct 6 '22

I could be wrong, prehaps your security model is that anyone can use firebase with your credentials, in which case nevermind, but it seems reckless to put your API key in the open like that.

Sivuyile Magutywa • Oct 6 '22

The Firebase config object contains unique, but non-secret identifiers for your Firebase project. From Google,

you can checkout this article

Thank you 👍

Varshith V Hegde • Oct 6 '22 • Edited

I dont think i have made my api public bcz in the repo which i hace kept the code i removed the api key and all credentials and even if the account gets hacked it 's my test account. And i have set some functions for autodelete so no worries.

Matt Ellen-Tsivintzeli • Oct 6 '22 • Edited

You API key is visible on your website, in the script.js file. It ends "NqAHfM".

If it's your test account, then that's probably fine.

Comment deleted

Varshith V Hegde • Oct 6 '22 • Edited

If you have any idea to close this loop hole you can give me. It would be great help👍

Matt Ellen-Tsivintzeli • Oct 6 '22

I can't see a way to do it with a pure frontend application. Your users will always download the API key one way or another if it's in the client side JS.

If you don't want users to have access to the key then you'd need to send their file to a server and have the backend store the file to firebase and return the file id. Maybe you can do it with an AWS lambda function?

Hello, now even if my api key is public no one else can't use because i have given restriction to api key so that if the api key is used in my domain then only it will be working else its just a useless string. 😅

Matt Ellen-Tsivintzeli • Oct 6 '22

That sounds like a good solution

yeah, you just made me research me and my friend about it for about half a day, and thanks to you for pointing it out.

Leopold • Oct 5 '22 • Edited

Sharing the file with a 5 digits number feels a bit meh for me, what about asking the user to enter a password to secure his file ? I think this is a more elegant way to handle this, also you make the user more responsible to protect his own file. Other than that cool work, I like the concept!

Yeah i am going to add that feature. If the user wants his file to nore secure he can use his own password or he can just use random number to share it with his friends so they can download it from the server.

HackNetAyush • Oct 7 '22

What if anyone keep uploading files (like spamming) and never download them .... then your firebase storage will be full. Because you wrote

 ref.child(childSnapshot.key).remove()

In the downloding section....

But the better method is that you should limit the file size and no. of uploads for each IP address. And then you can also put time of 24hrs or anything else to delete those files regularly.

Varshith V Hegde • Oct 7 '22

It's in auto delete of 24hrs😅😂 and file upload limit is 25 MB

HackNetAyush • Oct 7 '22

Then fine 😄

stefnotch • Oct 6 '22

This isn't safe at all. I can enumerate all files by using

ref = firebase.database().ref("image");
ref.on("value", function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
        var childData = childSnapshot.val();
        console.log(childData.url);
        });
    }
    );

(Bad code style, I know)

Also, using 5 digits means that you've got 100000 (one hundred thousand) different files that you can upload at a time. So if it becomes more popular, you'll quickly end up in a situation where uploads can randomly fail or overwrite other people's work. Worse yet, it'll become quite easy to accidentally find other people's stuff.

Heck, if I wanted to mess with people, I'd upload a few hundred zip bombs (substitute for worse options) to the site and wait.

If you want any semblance of private urls, generating a UUID is the easiest option. These days, there's even developer.mozilla.org/en-US/docs/W... . (And feel free to ignore old iOS Safari versions, they suck and nobody should be using them.)

Varshith V Hegde • Oct 7 '22

Yeah i know there are lot of loop holes. At first because it's firebase free tier there is a possibility of limited read write. And the storage is also very less that's why i have kept the file sixe less tgan 25 MB and codee style because i am not a pro at this time I focused more on functionality rather code itself. So these may be the reason. Thank you for your suggestion it's great to see you took time to explain this to me. 👍🔥

Injamul Mohammad Mollah • Oct 12 '22 • Edited

You can take a look at this github.com/chroline/lightning-share .
What do you mean by "Secure file sharing"?
It's not secure at all, we can always crawl back to get all the files. As we are giving access to the database.

Varshith V Hegde • Oct 12 '22

Nice one bro

Joe Code • Feb 23

Good work I want to ask what happens if the receiver are much and they want to download the file at a time what happens if one receiver download with the unique ID since once the unique ID is used the file will be deleted from firebase

Varshith V Hegde • Feb 23

Yeah actually it is simple one to one file sharing so it's serves the purpose!!

shinjith • Oct 5 '22

Excellent work!

I attempted to download the file that I had uploaded, but it instead opened the file. Was that on purpose?