To Dos

1st. Display file : How to send a video,image chunk file from NodeJS to an ejs file(index.ejs)?

 <% files.forEach((file)=>{%>
                      <% if(file.isImage === false){ %>
                        <div class="notice-item">
                          <span class = "notice-date">Date : <%- file.uploadDate %></span>
                          <video class = "notice-img">
                            <source src = "" type = "video/mp4">
                          </video>
                          <p class = "notice-content"><%- file.metadata.Text %> </p>
                        </div>
                        <% } else{%>
                          <div class="notice-item">
                            <span class = "notice-date">Date : <%- file.uploadDate %></span>
                            <img class = "notice-img" src= 'https://source.unsplash.com/random'' alt="">
                            <p class = "notice-content"><%- file.metadata.Text %> </p>
                          </div>
                        <%} %>
                      <% }); %>

problem is, The method I used to pass an video/image file source to ejs file
is not currently working...

Trial1 : It seems like the file I brought from mongodb through gridFSstorage is not appopriate type for video/img source > Try other method of retriving data

< Solved : Have to make specific get route that brings specific "image"file >

Backend

// route for display single fileObject : 1st case = image
router.get('/image/:filename', (req,res) => {
    gfs.files.findOne({ filename : req.params.filename}, (err,file) => {
        // check if file exist
        if( !file || file.length === 0){
            return res.status(404).json({
                err : "No file exists"
            })
        }

        // File Exist
        if( file.contentType === "image/jpeg" || file.contentType === "img/png" ){
            // Read output to browser
            const readStream = gfs.createReadStream(file.filename);
            readStream.pipe(res)

        }else{
            res.status(404).json({
                error : "Not an image"
            })
        }

    })
})

Frontend

<div class="cta-inner-notice text-center rounded">
                    <% files.forEach((file)=>{%>
                      <% if(file.isImage){ %>
                        <div class="notice-item">
                          <span class = "notice-date">Date : <%- file.uploadDate %></span>
                          <img class = "notice-img" src= "image/<%= file.filename %>" alt="">
                          <p class = "notice-content"><%- file.metadata.Text %> </p>
                        </div>
                        <% } else{%>
                          <div class="notice-item">
                            <span class = "notice-date">Date : <%- file.uploadDate %></span>
                            <video class = "notice-img" src ="video/<%= file.filename %>">
                            </video>
                            <p class = "notice-content"><%- file.metadata.Text %> </p>
                          </div>
                        <%} %>
                      <% }); %>
                  </div>

2nd. Edit Notice

2_1) Make EditPage( router ) with Get Method using file unique id

2_2) display other forms of client page according to each id ( with textarea )

How ? :
1st. send list of files and file_id that I want to edit

going throught foreach(files), if file._id matches the sent file_id from node.js( backend) then, display image/video

2_3) make New Router for image,video path

2_4) make Post Router for editing image/video

Pb1) : in node.js express app, req.body does not get 'textarea' value?

frontend

<form class="notice-item-edit" method = "POST" action ="/notice_edit/update/<%= file.filename %>">
                                        <span class = "notice-date">Date : <%- file.uploadDate %></span>
                                        <img class = "notice-img" src= "file/<%= file.filename %>" alt="">
                                        <textarea type = "text" name = "newtext"v class = "notice-content"><%- file.metadata.Text %></textarea>
                                        <div class="notice-buttons">
                                            <form method = "GET" action ="/notice">
                                            <button class="notice-button">
                                                Cancel
                                            </button>
                                            </form>
                                            <button class="notice-button">
                                                Complete
                                            </button>
                                        </div>
                                </form>

backend

// route for Editing single fileObject for Edit page
router.post('/notice_edit/update/:filename', (req,res) => {

    console.log("req.body for edit in post edit ", req.body)
    gfs.files.findOne({ filename : req.params.filename}, (err,file) => {
        // check if file exist
        if( !file || file.length === 0){
            return res.status(404).json({
                err : "No file exists"
            })
        }
        // File Exist

        console.log("files existing metadata : ", file.metadata.Text)

        if( file.contentType === "image/jpeg" || file.contentType === "img/png" || file.contentType === "video/mp4" ){
            // Read output to browser
            // const readStream = gfs.createReadStream(file.filename);
            // readStream.pipe(res)

        }else{
            res.status(404).json({
                error : "Not an image"
            })
        }
    })
})

result

req.body for edit in post edit  {}
files existing metadata :  Sample

Solution : add unique id to form

id : 5f32783afc64305128a8ac92 req.body for edit in post edit { newtext: 'Sample ' }

3rd. Delete Notice

backend

// route for deleting img file > /image/:id
router.delete('/image/:id', (req,res) => {
    gfs.remove({ _id : req.params.id, root : "notices"}, (err, gridStore) => {
        if(err){
            return res.status(404).json({ err : err});
        }else{
            res.redirect('/notice')
        }
    });
})

frontend

<div class="notice-item">
                          <span class = "notice-date">Date : <%- file.uploadDate %></span>
                          <img class = "notice-img" src= "image/<%= file.filename %>" alt="">
                          <p class = "notice-content"><%- file.metadata.Text %> </p>
                          <form method = "POST" action ="/image/<%= file._id %>?_method=DELETE">
                            <button class="notice-delete">
                              Delete
                            </button>
                          </form>
                        </div>

Pb2) : overwriting new metatdata text into existing file

Conclusion : Updating image through gridfs is impossible, but metat data is possible
https://stackoverflow.com/questions/41223691/how-to-overwrite-image-in-mongodb-gridfs

backend

// route for Editing single fileObject for Edit page
router.post('/notice_edit/update/:filename', (req,res) => {

  console.log("req.body for edit in post edit ", req.body)

  // update metadata
  gfs.files.updateOne(
      { filename: req.params.filename },
      { $set : { 'metadata.Text' : req.body.newtext}}
  )

  res.redirect("/notice")
})

frontend

<div class="row">
            <div class="col-xl-9 mx-auto">
              <div class="cta-inner-notice text-center rounded">
                  <% files.forEach((file)=>{%>
                      <% if( file._id == wantfile_id) { %>
                          <% if(file.isImage){ %>
                              <form id = "fileEdit" class="notice-item-edit" method = "POST" action ="/notice_edit/update/<%= file.filename %>">
                                      <span class = "notice-date">Date : <%- file.uploadDate %></span>
                                      <img class = "notice-img" src= "file/<%= file.filename %>" alt="">
                                      <textarea type = "text" name = "newtext"v class = "notice-content"><%- file.metadata.Text %></textarea>
                                      <div class="notice-buttons">
                                          <form method = "GET" action ="/notice">
                                          <button class="notice-button">
                                              Cancel
                                          </button>
                                          </form>
                                          <button class="notice-button">
                                              Complete
                                          </button>
                                      </div>
                              </form>
                              <% } else{%>
                              <form id = "fileEdit" class="notice-item-edit"method = "POST" action ="/notice_edit/update/<%= file.filename %>">
                                      <span class = "no ice-date">Date : <%- file.uploadDate %></span>
                                      <video controls autoplay class = "notice-img" src ="file/<%= file.filename %>" >
                                      </video>
                                      <textarea type = "text" name = "newtext" class = "notice-content"><%- file.metadata.Text %> </textarea>
                                      <div class="notice-buttons">
                                      <form method = "GET" action ="/notice">
                                          <button class="notice-button">
                                          Cancel
                                          </button>
                                      </form>
                                          <button class="notice-button">
                                          Complete
                                          </button>
                                      </div>
                              </form>
                          <%} %>
                      <% } %>
                    <% }); %>
                </div>
                
            </div>
          </div>