Building a web app(Whinst) Part 21: Adding file editing and page loading functionality

In the last few articles, I told you about how I added functionality that allowed users to add files that included images and videos and how to create thumbnails for the uploaded videos. In this article, I’ll walk you through how I set up functionality that allows users to edit or change the files they uploaded and also how I set up functionality that displays a loading page before a page or contents of a page are fully loaded.

File editing functionality🗂

As mentioned in the previous articles, when a file is uploaded it is saved in two parts. The name of the file and the actual file. The name of the file is saved in the database and is used to reference the actual file via the API. The actual file is saved in a media folder in the backend. With that being said, to edit or change a file the filename first has to be removed from the database and the actual file has to be deleted from the media folder on the backend. Then after this, a new file can be entered.

To change the filename and delete the actual file I used a simple PUT request that sends the name of the file to the backend. When the backend receives this filename it deletes the file from the media folder using the unlink method found in the fs(file system) node module. This takes the media folder directory and filename and deletes the file. Just before this is done the filename in the database is set to null and the actual file is only deleted if this editing was successful. The code below shows how this is done.

var fs = require('fs')

app.put("/edit-file/:id/:filename",async(req,res)=>{
  try{
    const {id} = req.params;
    const {filename} = req.params;
    file_name = null
    const editFileName = await pool.query("UPDATE file_name SET  = $1 WHERE id = $2",
    [file_name,id]
    );
    fs.unlink(path.join(__dirname,`/media/${filename}`),(err)=>{
      if(err){
        throw err
      }
    })
    res.json('Updated successfully')
  }catch(err){
    res.status(500)
}
})

Page loading functionality⏱

When a page that contains fetched data is opened, while this data is still being fetched it is important to have a loading indicator to let users know the page isn’t yet ready for viewing. To add this I created a simple bool(true/false) type loading state that is by default set at false. When a user clicks on the page and a request is made to the backend via the API the loading state is set to true which returns a loading indicator that is displayed on the screen. When the request is completed the loading state is set to false and the loading indicator is removed thus showing the user a complete page with data. The code below shows how this is done.

export default function Page(){
const [isLoading,setIsLoading] = useState(false)

async function getData(){
setLoading(false)
//After data has been fetched
setLoading(true)
}

if(isLoading){
return(
<div>
<p>Loading...</p>
</div>
)}

return(
<div>
<h1>My Page</h1>
</div>
)}

With these smaller but necessary pieces of functionality added I’m now a huge step closer to completing the Whinst web app. Thank you for reading🙏.