Image upload from Vue/Express to Spaces
I’m trying to upload a file from Vue/Express app to my DigitalOcean space, but I am having issues.
I worked through this tutorial, but in this example they are just using Express and I can’t submit the form data the way it is done in this tutorial.
https://www.digitalocean.com/community/tutorials/how-to-upload-a-file-to-object-storage-with-node-js
So, I continued playing around with it.
Here is the Vue part:
<template>
<div>
<h1>Upload a file</h1>
<label>File
<input type="file" id="file" ref="file" name="file" v-on:change="handleFileUpload()"/>
</label>
<button v-on:click="submitFile()">Submit</button>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
file: ""
};
},
methods: {
submitFile() {
// Initialize the form data
let formData = new FormData();
// Add the form data we need to submit
formData.append("file", this.file);
// Make the request to the POST /single-file URL
axios
.post("/upload", file, {
baseURL: "http://localhost:8000/"
// headers: {
// "Content-Type": "multipart/form-data"
// }
})
.then(function() {
console.log("SUCCESS!!");
})
.catch(function() {
console.log("FAILURE!!");
});
},
// Handles a change on the file upload
handleFileUpload() {
this.file = this.$refs.file.files[0];
}
}
};
</script>
code
And in express I have my route:
const Uploads = require("./controllers/Uploads");
module.exports = app => {
app.post("/upload", Uploads.index);
};
code
And within the controller I have:
// Load dependencies for file uploading to DO
const aws = require("aws-sdk");
const multer = require("multer");
const multerS3 = require("multer-s3");
// Set S3 endpoint to DigitalOcean Spaces
const spacesEndpoint = new aws.Endpoint("nyc3.digitaloceanspaces.com");
const s3 = new aws.S3({
endpoint: spacesEndpoint
});
// Image upload middleware
// Change bucket property to your Space name
const upload = multer({
storage: multerS3({
s3: s3,
bucket: "1410",
acl: "public-read",
key: function(request, file, cb) {
console.log(file);
cb(null, file.originalname);
}
})
}).array("upload", 1);
module.exports = {
index(req, res) {
console.log("backend hit");
upload(req, res, function(error) {
if (error) {
console.log(error);
return res.redirect("/error");
}
console.log("File uploaded successfully.");
res.redirect("/success");
});
}
};
code
When I upload the image I actually get the “File uploaded successfully” message, but there is no file in my bucket when I check DigitalOcean
Any help is appreciated!
Log In to Comment