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.

So, I continued playing around with it.

Here is the Vue part:

    <h1>Upload a file</h1>

        <input type="file" id="file" ref="file" name="file" v-on:change="handleFileUpload()"/>
        <button v-on:click="submitFile()">Submit</button>


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
        .post("/upload", file, {
          baseURL: "http://localhost:8000/"
          // headers: {
          //   "Content-Type": "multipart/form-data"
          // }
        .then(function() {
        .catch(function() {
    // Handles a change on the file upload
    handleFileUpload() {
      this.file = this.$refs.file.files[0];

And in express I have my route:

const Uploads = require("./controllers/Uploads");

module.exports = app => {"/upload", Uploads.index);


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("");
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) {
      cb(null, file.originalname);
}).array("upload", 1);

module.exports = {
  index(req, res) {
    console.log("backend hit");
    upload(req, res, function(error) {
      if (error) {
        return res.redirect("/error");
      console.log("File uploaded successfully.");


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!

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

I found this method works to upload images to DO Spaces.


const aws = require('aws-sdk');
const multer = require('multer');
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

const space = new aws.S3({
  endpoint: process.env.DO_SPACE_ENDPOINT,
  useAccelerateEndpoint: false,
  credentials: new aws.Credentials(process.env.DO_SPACE_KEY, process.env.DO_SPACE_SECRET, null)

const bucket = process.env.DO_SPACE_NAME;"/createPost", upload.single('img'), (req, res) => {
  let uploadParams = {
    Bucket: bucket,
    Body: req.file.buffer,
    ACL: 'public-read',
    Key: req.file.originalname

  space.upload(uploadParams, function (error, data) {
    if (error) {
    console.log("Successfully Uploaded Image to DO");


You can find the answer in the comments. But instead of putObject I’m using upload

Hello, I’m facing the same issue right now but with Cloudinary storage. what I noticed while facing this problem is that: - Upload with postman works just fine. (which you can try to see if works with you too) - The post request I send from axios to the server fails after exactly 4 min. (which means the server is not responding in that 4 min) - When I consoled log the progress of the file upload in axios. I got that the file is completely uploaded.

This is my position now, I’m trying to figure a way out of this problem

Sorry. How can i have Location Url of this file