Sharing image using the MEAN stack

Question

Sharing image using the MEAN stack

While I've found numerous resources online discussing this topic, none of them seem to present a method that resonates with me.

My current setup involves a form with multiple inputs that are sent to the server upon clicking a "Submit" button. This data is transmitted through a json request using the conventional AngularJS controller/service, and then processed by my ExpressJS router before being stored in a MongoDB database.

I am looking to include an input for users to select an image file to upload. However, all the solutions I've come across online involve immediately copying the selected file to the server as soon as it's chosen - an approach that doesn't align with my requirements. Is there a way to delay the file upload until the user clicks the "Submit" button? If so, where can I find more information on how to achieve this?

Any help would be greatly appreciated.

javascript angularjs mongodb express mean

Answer 1

Answer №1

Check out this awesome npm package for file uploads: https://www.npmjs.com/package/express-fileupload

I decided to save the file on the filesystem, but it can easily be modified to store it in a MongoDB database.

The router

router.post('/foo', function (req, res, next) {
 if (!req.files){
    res.redirect('/foo');
 }
 let file = req.files.file;
 let fileName = req.files.file.name;
 if(sys.isJSFile(fileName)){
    //save to filesystem or mongodb
    let filePath = path.join('./images', fileName);
    // Use the mv() method to place the file somewhere on your server
    file.mv(filePath, function(err) {
        if (err){
            logger.error("Could not upload file: " + err);
            res.redirect('/foo');
        } else {
            res.redirect('/bar');
        }
    });
});

The view

<form class="form-horizontal" action="/foo" method="post" encType="multipart/form-data">
     <div class="form-group">
         <input class="form-control" type="file" name="file" />
     </div>
     <div class="form-group">
         <input class="form-control" type="submit" value="Submit"/>
     </div>
</form>

Answer 2

Check out this awesome npm package for file uploads: https://www.npmjs.com/package/express-fileupload

I decided to save the file on the filesystem, but it can easily be modified to store it in a MongoDB database.

The router

router.post('/foo', function (req, res, next) {
 if (!req.files){
    res.redirect('/foo');
 }
 let file = req.files.file;
 let fileName = req.files.file.name;
 if(sys.isJSFile(fileName)){
    //save to filesystem or mongodb
    let filePath = path.join('./images', fileName);
    // Use the mv() method to place the file somewhere on your server
    file.mv(filePath, function(err) {
        if (err){
            logger.error("Could not upload file: " + err);
            res.redirect('/foo');
        } else {
            res.redirect('/bar');
        }
    });
});

The view

<form class="form-horizontal" action="/foo" method="post" encType="multipart/form-data">
     <div class="form-group">
         <input class="form-control" type="file" name="file" />
     </div>
     <div class="form-group">
         <input class="form-control" type="submit" value="Submit"/>
     </div>
</form>

Sharing image using the MEAN stack

Answer №1

Similar questions

How can I fill the data array of arrays using an Angular Table component?

A guide on implementing Angular-DataTable within a TypeScript project

Filter out all elements that come before the comma in the sorted array's output

What is the best method for transmitting all parameters via a URL?

I am unable to get the documentclient put to work, despite trying all possible

Retrieve the content from paragraph elements excluding any text enclosed within span tags using the Document.querySelector method

The behavior of Date's constructor differs when applied to trimmed versus untrimmed strings

What magic powers the Async Express middleware possesses, I wonder?

Node-fetch enables dynamic requests

I am currently working on completing my order book code, but I am struggling to understand how to summarize the objects

Encountering an issue with Server Side Rendering in React Router Dom where an error message pops up saying: "Warning: React.createElement: type is

Retrieve child and descendant nodes with Fancytree JQuery

What is the method for replacing browser bundle sources using Rollup?

How can I extract information from Firebase and set it in the this.props of a React component?

Add the item to a fresh array using the Ajax function

Encountering an issue when trying to install Mongoose via NPM with the error message "Error: gss

Why are my styles not working when referenced from the .module.scss file?

organizing data using backbone marionette router

One potential solution is sending a message to a user via a server using JavaScript on Node.js

The jQuery ajax request was unsuccessful in connecting to the remote server