Victor_20 0 Newbie Poster

1) What I'm trying to do: Uploading a file with aws s3 and then taking the filename and filetype and placing it at the end of the url to save it in sql so that every time the person logs in, it will pull the picture up by user image url

2) Problem: Not uploading and not recognizing file in filename or filetype. Coming up with undefined for filetype and filename in URL and signedURL

3) fileUploadService.js USED IN NODEJS (below)

Can anyone let me know what I'm doing wrong or anything missing?

const aws = require('aws-sdk');
aws.config.region = 'us-west-2';
aws.config.update({ accessKeyId: '', secretAccessKey: '' });
const PROFILE_S3_LINK = "https://sabio-training.s3.amazonaws.com/";

module.exports = {
  getUrl: getUrl
}

function getUrl(req, res) {

  const s3 = new aws.S3();
  const fileName = 'C56/'+"filename"+'/' ;    //hardcoded filename and filetype for it to work. 
  const fileType = "filetype";              //How to take filename from uploaded file to insert into "fileName" along with the "filetype"?
  const s3Params = {                                        getSignedURL looks like this : https://sabio-training.s3.us-west-2.amazonaws.com/C56/filename/?AWSAccessKeyId=AKIAJF53EJKW7SJUV55Q&Content-Type=filetype&
    Bucket: 'sabio-training',                                                                       Expires=1536877443&Signature=WxSvLSzfyZKDRN9LawVOwj1ayVY%3D&x-amz-acl=public-read
    Key: fileName,                                            URL looks like this :                 https://sabio-training.s3.amazonaws.com/C56/filename/filetype
    Expires: 3000,
    ContentType: fileType,
    ACL: 'public-read'
  };

  s3.getSignedUrl('putObject', s3Params, (err, data) => {
    if (err) {
      console.log(err);
      return res.end();
    }
    const returnData = {
      signedRequest: data,
      url: `${PROFILE_S3_LINK}${fileName}${fileType}` //unsigned URL
    };
    res.write(JSON.stringify(returnData));
    res.end();
  });
}

=========================================================================
fileUploadRoute.js

const router = require("express").Router();
const fileUploadController = require("../controllers/fileUploadController")

router.put("/", fileUploadController.getUrl);

module.exports = router;

==========================================================================
fileUploadController.js

const fileUploadService = require('../services/fileUploadService')
const responses = require("../models/responses");

module.exports = {
    getUrl: getUrl
}

function getUrl(req, res) {
    fileUploadService.getUrl(req, res)
        .then(response => {
            res.send(response)
        })
        .catch(error => {
            res.send(error)
        })
}
===========================================================================
index.js in node portion

const router = require("express").Router();
const pogsRoutes = require("./pogs.routes");
const userFromJWT = require("../filters/jwt.user");
const validateUser = require("../filters/validate.user");
const testRoutes = require("./test.routes");
const profileRoute = require("../profile/profileRoute");
const fileUploadRoute = require("../fileUpload/fileUploadRoute")

module.exports = router;
// router.use("/api/profilePage", profileRoute)

router.use("/api/pogs", pogsRoutes);
router.use("/api/upload", fileUploadRoute)
router.use("/api/profilePage", profileRoute)
// -----------------------------------
// Authenticated routes go below this:
// -----------------------------------

router.use(userFromJWT);
router.use(validateUser);

router.use("/api/test", testRoutes); // TODO: remove this before delivery to the client

============================================================================
USED IN REACT

Axios pulled from profile page 

handleClickUpload = evt => {
        evt.preventDefault()
        console.log("RESULT : ", this.state);
        // var file = evt.target.files[0]; <-- havent used this yet but I know its for upload

        axios.put(`${NODE_API_URL}/api/upload`, {
                // f:file
        })
        .then(response =>{
                console.log(
                response,"URL SIGNED REQUEST : ",response.data.signedRequest, " URL : ",response.data.url
                )
        })
        .catch(error => {
                console.log(error);
        })
}

Upload button and file upload portion inside profile page

               <div method="post" encType="multipart/form-data" action="/">
        <input type="file" name="fileName" className="btn" />
        <input type="submit" value="Upload" className="btn" onClick={this.handleClickUpload}/>