In this tutorial, we will learn how to build a photo sharing website using Appwrite's file storage capabilities. Appwrite is open source cloud solution that simplifies backend development. By the end of this tutorial, you will have a fully functional web application that enables users to upload and share their photos.
Prerequisites
To follow along with this tutorial, you should have:
Basic knowledge of HTML, CSS, and JavaScript.
An Appwrite account. If you don't have one, you can sign up for free at appwrite.io.
Getting Started
To start, create a new HTML file and name it index.html. This gonna be the main entry point for our website.
Setting Up the Project
First, let's set up the basic structure of our HTML file and link the necessary resources:
<!DOCTYPE html>
<html>
<head>
<title>Photo Sharing Website</title>
<link rel="stylesheet" href="indexstyle.css">
<script src="https://cdn.jsdelivr.net/npm/appwrite@11.0.0"></script>
<script>
// JavaScript code snippets will be placed here
</script>
</head>
<body>
<!-- HTML markup will be added here -->
</body>
</html>
In above code, we have included a link to an external stylesheet (indexstyle.css) for custom styles and imported the Appwrite JavaScript library from CDN to interact with the Appwrite backend.
Adding Styles
Next, let's create the CSS file that will define the styles for our photo sharing website. Create a new file named indexstyle.css and add the following CSS code:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
text-align: center;
}
h2 {
margin-bottom: 20px;
}
form {
margin-bottom: 20px;
}
.file-select-button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
input[type="file"] {
display: none;
}
input[type="button"] {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
.filename {
margin-bottom: 20px;
}
#images {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#images img {
width: 300px;
height: auto;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
This CSS code will define the basic styles for our photo sharing website, including the appearance of the file select button and the image grid layout.
Initializing Appwrite
To interact with the Appwrite backend service, we need to initialize the Appwrite client and storage instances. Let's add the necessary JavaScript code to our HTML file:
const { Client, Account, ID, Storage } = Appwrite;
const client = new Client()
.setEndpoint('https://cloud.appwrite.io/v1')
.setProject('<YOUR_PROJECT_ID>');
const storage = new Storage(client);
Make sure to replace <YOUR_PROJECT_ID> with the ID of your Appwrite project. You can find the project ID in the Appwrite console.
Uploading Images
Now, let's implement the functionality to upload images to the Appwrite server. Add the following JavaScript code inside the <script> tags in your HTML file:
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const fileContent = e.target.result;
storage.createFile('<COLLECTION_ID>', ID.unique(), file)
.then(function (response) {
console.log('File uploaded successfully:', response);
fileInput.value = '';
showImage(); // Refresh the image grid
})
.catch(function (error) {
console.error('Error uploading file:', error);
});
};
reader.readAsDataURL(file);
} else {
console.log('No file selected');
}
}
In the code snippet above, <COLLECTION_ID> should be replaced with the ID of the collection where you want to store the uploaded images. If you haven't created a collection yet, you can do so in the Appwrite console and retrieve its ID.
To enable file selection and upload, modify the HTML file as follows:
<form>
<label for="fileInput" class="file-select-button">
Select an Image
</label>
<input type="file" id="fileInput">
<input type="button" value="Upload" onclick="uploadFile()">
<div id="images">
<div id="image-grid"></div>
</div>
</form>
Displaying Images
To complete our photo sharing website, we need to fetch and display the uploaded images. Add the following JavaScript code inside the <script> tags:
async function showImage() {
const imageGrid = document.getElementById('image-grid');
imageGrid.innerHTML = ''; // Clear existing images
const files = await storage.listFiles('<COLLECTION_ID>');
for (let i = 0; i < files.files.length; i++) {
const file = files.files[i];
const result = await storage.getFilePreview('<COLLECTION_ID>', file.$id);
const img = document.createElement('img');
img.src = result.href + "&quality=20&width=500";
const link = document.createElement('a');
link.href = result.href;
link.target = '_blank';
link.appendChild(img);
imageGrid.appendChild(link);
}
}
// Call the showImage function on page load
showImage();
Make sure to replace <COLLECTION_ID> with the ID of the collection where your images are stored.
In the HTML file, find the <div> element with the id attribute set to image-grid. This is where the images will be displayed:
<div id="image-grid"></div>
Finalizing the Setup
Save all the changes and open the index.html file in a web browser. You should now see a simple web page with a file input, an upload button, and an empty image grid.
Try selecting an image file using the file input and click the "Upload" button. You should see the uploaded image appear in the image grid. Repeat the process to upload multiple images, and they will be displayed in the grid.
Congratulations! You have successfully created a photo sharing website using Appwrite. Users can now upload their images, and the uploaded images are displayed in a grid format on the webpage.
Feel free to customize the styles, add more features, or explore other functionalities offered by Appwrite to enhance your photo sharing website!
Final product
That concludes the tutorial. You have learned how to utilize the Appwrite backend service to build a fully functional photo sharing website. By following the steps and code snippets provided, you should now have a solid foundation to create your own image-centric web applications using Appwrite. Happy coding!