DEV Community

Build File Upload/Download Functionality with Image Preview using MERN stack

Yogesh Chavan on October 09, 2020

Introduction In this article, we will create a file upload and download functionality with a preview of the image using the MERN stack. ...

Read full post

Akemylia • Dec 15 '22

Hi..i faces some problem here when i try run the npm

Yogesh Chavan • Dec 15 '22

Looks like you have installed react-router-dom version 6. Please use version 5 of react router dom.

Akemylia • Dec 15 '22

I try to follow as you show and change it to yarn but it show like this.

Yogesh Chavan • Dec 15 '22

You can clone the final code repository from here which is working fine or you can share your github repository so I can check what's causing the error

Comment deleted

Akemylia • Dec 19 '22

Hi..I already change the react-router-dom to version 5 bit it still does not work. This my github repository..github.com/Akemylia/File-testing

Yogesh Chavan • Dec 19 '22

You're missing bootstrap, react-bootstrap npm packages.
Install them using

npm install bootstrap react-bootstrap

OR

yarn add bootstrap react-bootstrap

Also, you have named the file style.scss instead of styles.scss that's why you're getting error.

Akemylia • Dec 19 '22

already done it..but it seem another error popup..

Yogesh Chavan • Dec 19 '22

You can clone the final repository code and use it.

Akemylia • Dec 20 '22 • Edited

olrite sir..I will try to run the code first..I want to ask sir if it possible to use mongodb compass instead for this project? Also can it be run when we use npm instead of yarn?

Manish Chaudhary • Nov 6 '23

I needed to ask about, if i could delete the image file inside given source , how can I delete it and not display on the browser.

_ The given file is all deleted but still it shows its title and description.

Yogesh Chavan • Nov 6 '23 • Edited

You can use fs.existsSync function to check, If the file exists or not inside the getAllFiles route and add only those files that exist, like this:

Router.get('/getAllFiles', async (req, res) => {
  try {
    const files = await File.find({});
    const finalFiles = [];
    files.forEach((file) => {
      if (fs.existsSync(file.file_path)) {
        finalFiles.push(file);
      }
    });
    const sortedByCreationDate = finalFiles.sort(
      (a, b) => b.createdAt - a.createdAt
    );
    res.send(sortedByCreationDate);
  } catch (error) {
    res.status(400).send('Error while getting list of files. Try again later.');
  }
});

Manish Chaudhary • Nov 7 '23 • Edited

got this err message, even if I submit some file the file will be uploaded but it won't show in the given display

*Can i ask you for a help if i can make this file preview before downloading too? *

Yogesh Chavan • Nov 7 '23

Check your server console for errors you're getting, you will be able to find out what's going wrong.

Archana Shrestha • Nov 29 '22

hello, thank you for the explanation. I am getting error while uploading. Could you please help me solve this error.

Yogesh Chavan • Nov 29 '22 • Edited

Looks like you have not created a files folder in your server folder. Create one and try again.

Mahamadou-Nouridine • Sep 15 '22

thank you very much, nice explanation

Yogesh Chavan • Sep 15 '22

Glad you found it useful. Thanks for reading @mahamadounouridine

Mahamadou-Nouridine • Sep 15 '22

It's been a pleasure @myogeshchavan97 🙏🏽

Comment deleted

Comment hidden by post author - thread only accessible via permalink

Gune • Aug 6 '21

I did that as well. But it still gives that same error :(

onidemon • Nov 12 '20

Thank you for the tutorial! I have an issue though, the file list page will crash if refreshed and get a cannot get 404 error. Works fine when i refresh the main page but not the list page. Also the file list is giving an error about the favicon.

Refused to load the image because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Yogesh Chavan • Nov 12 '20

Thanks for pointing out the 404 error. You just need to add the following code inside the server/index.js file before the app.listen call

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
});

I have updated the article with these instructions at the end of the article. So please check that out.

Regarding the favicon error, I'm not able to reproduce that. You might not have the favicon.ico file in the public directory so that might have caused that issue. But that is fine, Its not required for the application.

Maxim Claynin • May 17 '21

Thanks for giving the precious tutorial.
I just followed the full tutorial. Uploading is work, but donwloading has got an issue.
'downloadjs' successfully download the file, but can't open.
Text format files like .txt, .doc, are able to open, but media files like .png, .mp4 can't be open even though they're successfully downloaded.
Hope you give me resolution.

Yogesh Chavan • May 17 '21 • Edited

Hi @webandmobiledeveloper95 , the code works even for images and mp4. Please clone my final repository code and check If it works. You might have missed something to add.

Akemylia • Dec 20 '22

Sir can you teach me how to setup the mongodb using window..i try to follow the instruction in this article levelup.gitconnected.com/how-to-in... but I seem stuck with it.

Engnr. Zaks • Apr 22 '21

Thank you sir. This is a very important piece that we're learning from.
One thing though. How do we get to display the image along side the details. I want to upload to the server and then get to display them later. to test this, I added an extra td with img with src to the path from the API response

Engnr. Zaks • Apr 22 '21

but that hasn't been working

olsard • Oct 9 '20

Cool, thanks for sharing!

Yogesh Chavan • Oct 9 '20

Thank you 🙂

Priyank-17 • Mar 14 '21

Sir can show how to delete a particular file.

Yogesh Chavan • Mar 14 '21

You can use unlinkSync function in Node.js to delete a file like this:

const fs = require('fs')

try {
  fs.unlinkSync("path_of_the_file_you_want_to_delete");
  // file removed -  return success
} catch(err) {
  console.log(err); // error while deleting file
}

AtulyaJaiswal • Sep 12 '21

return download(response.data, "Resume", "application/pdf");

response.data is showing undefined and in response i have parameters like basic and url data parameter is not present there

Duy Thanh Nguyen • Oct 9 '20

How to handle high dimension photo

Yogesh Chavan • Oct 9 '20

This application will work for files with any dimension. You just need to change the fileSize property of the limits property in server/routes/file.js file, If the file you're uploading is larger in size. Currently, I have set it to only 1MB which I verified for 4291 × 3218 dimension which is this image

limits: {
    fileSize: 1000000 // max file size 1MB = 1000000 bytes
  }

vinod sharma • Apr 20 '22

download function not working can you please help me

Some comments have been hidden by the post's author - find out more