CODEWITHSUNDEEP
javascriptnode.jsreactjs
red house 87
red house 87

Reputation: 2415

Basic file uploads with Node & React

I've built a React App to teach myself React and Node.js. I'm using the boilerplate provided by Facebook called create-react-app which uses Webpack to bundle the App. I'm at the point now where i'm trying to create an upload file function within the app. I stumbled upon something called Multer which when used with Express enables for fairly straight forward file uploads. I plan to use this and express for the file upload part of my app. Here is the code below with what i'm trying to achieve:

App.js:

import React from 'react';
import testupload from './testupload/testupload';
var App = React.createClass({
        testUpload(e) {
            e.preventDefault();
            testupload();
        },
        render() {
            return (<div className="outer-most-container">   
               <form encType='multipart/form-data'>
                    <input type="file" method="post"/>
                    <button type="submit" onClick={this.testUpload}>submit</button>
                </form>
            </div>)
        }) export default App;

testupload.js:

var express = require('express')
var multer = require('multer')
var upload = multer({
    dest: 'uploads/'
})
var app = express()
var testupload = function() {
    app.post('/profile', upload.single('avatar'), function(req, res, next) {})
    app.post('/photos/upload', upload.array('photos', 12), function(req, res, next) {})
    var cpUpload = upload.fields([{
        name: 'avatar',
        maxCount: 1
    }, {
        name: 'gallery',
        maxCount: 8
    }])
    app.post('/cool-profile', cpUpload, function(req, res, next) {})
}
export default testupload;

I'm used to working with PHP when it comes to file uploads so my logic here is when you click the button to submit there is a prevent of the default event, then it executes the testupload function which was imported from another script. The error i'm getting at the moment is

Cannot read property 'prototype' of undefined

which is in the request.js so says the browser console. Not sure if my approach is the correct logic here so a push in the right direction would really help. What i'm finding particularly tough is determining where exactly the crossover from the front end JS to the server side JS is and if i'm attempting to execute the server side JS in the right place. I haven't found any good tutorials online on how to do this hence why i'm posting on here. Please let me know if anything is unclear as i'm fairly new to React & Node.js so I appreciate some of the code above might not be very logical in some parts.

Upvotes: 1

Views: 2253

Answers (1)

Conan
Conan

Reputation: 690

it looks like you're trying to import your Node code right in your React component. What you'll want to do is move your server code into another project, and run a server. you would add an app.listen(port, ....) to your server code, where port is your choice (create-react-app runs on 3000 by default, so pick something else). then, have your file upload code in your React application POST the files to your specified endpoints

Upvotes: 1

Related Questions