Any Share is a simple, lightweight, and fast file sharing service. It is written in Javascript and uses the Firebase platform.
Website I created for secure file sharing with friends and family.
You can Create your own website with this code.
Features
- Upload files
- Download files
- Delete files
- Share files
- View files
- Secure file sharing
Working
- Any Share uses Firebase to store files. It uses Firebase Storage to store files and Firebase Realtime Database to store metadata of files.
- When a file is uploaded, it is stored in Firebase Storage and a unique ID is generated for the file. This ID is used to access the file.
- The metadata of the file is stored in Firebase Realtime Database. This metadata includes the url to the file and the unique ID of the file.
- When a file is shared, the unique ID of the file is shared. This ID is used to access the file.
- Receiver of the file can access the file using the unique ID of the file.
- When the file is received by the receiver using the unique ID, the file is downloaded from Firebase Storage and displayed to the receiver.
- Once the file is received by the receiver, the file is automatically deleted from Firebase Storage.
- This way the file is shared securely.
How to use
- Visit Any Share.
- Upload a file.
- Wait for the file to be uploaded.
- Share the unique ID of the file with the receiver.
- Receiver can access the file using the unique ID of the file.
- Once the file is received by the receiver, the file is automatically deleted from Firebase Storage.
Code Review
- Code for Firebase storage uploading
function uploadFile() {
if(document.getElementById("file").value != ""){
var uploadtext = document.getElementById("upload").innerHTML;
document.getElementById("upload").innerHTML = "Uploading...";
var file = document.getElementById("file").files[0];
var storageRef = firebase.storage().ref("images/" + file.name);
var uploadTask = storageRef.put(file);
uploadTask.on('state_changed', function (snapshot) {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
}, function (error) {
console.log(error.message);
document.getElementById("upload").innerHTML = "Upload Failed";
}, function () {
uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
console.log('File available at', downloadURL);
saveMessage(downloadURL);
});
});
}
else{
var uploadtext = document.getElementById("upload").innerHTML;
document.getElementById("upload").innerHTML = "Please select a file";
// After 2 sec make it empty
setTimeout(function(){
document.getElementById("upload").innerHTML = uploadtext;
}
, 2000);
}
}
- Code for Firebase storage downloading
function showfile(){
var uniqueId= document.getElementById("unique").value;
if(uniqueId==""){
alert("Unique Id is empty\n Please enter a Unique Id");
return;
}
var ref = firebase.database().ref("image");
var flag = 0;
ref.on("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childData = childSnapshot.val();
if (childData.number == uniqueId){
flag = 1;
window.open(childData.url, "_blank");
// AFter this delete the image from the database
ref.child(childSnapshot.key).remove();
// Remove file from storage
//Run this with 5sec delay
setTimeout(function(){
var storageRef = firebase.storage().refFromURL(childData.url);
storageRef.delete().then(function() {
ref.child(childSnapshot.key).remove();
// File deleted successfully
}).catch(function(error) {
});
}, 15000);
}
});
}
);
}
- Generated unique ID
function createUniquenumber(){
// Create a unique 5 digit number for each image which is not in the database field number yet
var number = Math.floor(10000 + Math.random() * 90000);
var ref = firebase.database().ref("image");
ref.on("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childData = childSnapshot.val();
if (childData.number == number){
createUniquenumber();
}
});
});
return number;
}
- Code for saving metadata of file in Firebase Realtime Database
function saveMessage(downloadURL) {
var newMessageRef = messagesRef.push();
var unique= createUniquenumber();
// Hidding recive file div
var x = document.getElementById("downloadiv");
x.style.display = "none";
var showUnique = document.getElementById("ShowUniqueID");
var shU=document.getElementById("showunique");
shU.value=unique;
showUnique.style.display = "block";
newMessageRef.set({
url: downloadURL,
number: unique
});
document.getElementById("upload").innerHTML = "Upload Successful";
//Make file input empty
document.getElementById("file").value = "";
}
Conclusion
- In this tutorial I have explained how I created my own File Sharing Web App.
Oldest comments (57)
Thank you for your great suggestion. I will surely look through it. Try to add with pack of features. Keep supporting. 😊
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
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. 😊
Excellent work!
I attempted to download the file that I had uploaded, but it instead opened the file. Was that on purpose?
Yes as well as no. it was on purpose in order to auto delete it actually need to run the function so i thought to open it on new page would help. And also no because other options are not working for me. If you know any method to download a file from a link directly you can suggest me. I would be very grateful to use it.
Not sure how well this solution works,
You can research more about this :). Hope this is useful.
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!!!
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.
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 😊😊
I would suggest you have a look at pre signed urls when it comes to sharing
Ok i will look at it thank you
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
This is helpful.
Thank you👍
Yeah sure its in my github github.com/Varshithvhegde/anyshare
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.
Check my posts about CI/CD anytime 😁
Sure 👍
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.
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.
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.
If you have any idea to close this loop hole you can give me. It would be great help👍
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. 😅
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.
The Firebase config object contains unique, but non-secret identifiers for your Firebase project. From Google,
you can checkout this article
Thank you 👍
Some comments have been hidden by the post's author - find out more