Getting undefined filename, filetype when uploading files to AWS S3

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.

Problem:

Not uploading and not recognizing the file in filename or filetype. Coming up with undefined for filetype and filename in URL and signedURL

The code for my fileUploadService.js used in Node.js is shown below.

The getSignedURL looks like this:
https://sabio-training.s3.us-west-2.amazonaws.com/C56/filename/?AWSAccessKeyId=AKIAJF53EJKW7SJUV55Q&Content-Type=filetype&Expires=1536877443&Signature=WxSvLSzfyZKDRN9LawVOwj1ayVY%3D&x-amz-acl=public-read

getSignedURL

The URL looks like this:
https://sabio-training.s3.amazonaws.com/C56/filename/filetype

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 =
Bucket: 'sabio-training',
Key: fileName,
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/>

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

1 Answer
1

First of all, take a look at https://s3browser.com/features-content-mime-types-editor.aspx after you can figure out what kind of type you have to use (for ContentType). I think it should be 'text/plain' or 'text/html'.
Then you have to add one more property to s3 params named Body (the body have to contain your entity that you want to upload to s3 bucket)

Here is a snippet that you can use to upload your entity to s3 and then get a location:

let s3 = new AWS.S3( region: process.env.AWS_REGION, apiVersion: '2006-03-01' );
let params =

Bucket: // a bucket's location,
Key: fileName // a path,
Body: // your entity to upload,
ACL: 'public-read',
ContentType: 'text/plain'
;

let s3Response = await s3.upload(params).promise();


console.log(`Entity uploaded to S3 at $s3Response.Bucket bucket. Location: $s3Response.Location`);

return s3Response.Location;

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.