Question

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!

Subscribe
Share

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

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.

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

Router.js

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;


router.post("/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(error);
      res.sendStatus(500);
    }
    console.log("Successfully Uploaded Image to DO");
  });

});

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

https://www.digitalocean.com/community/questions/can-i-upload-images-to-spaces-using-node-js

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

Hi! Any updates here? I need upload images from a react native app to Spaces…!

I dont see where you put your access and secret key credentials when you’re instantiating S3.

You should have gotten a 401 Unauthorized error with that code.

Hey friend,

That is an interesting one. As this isn’t something I code in specifically, I’m thinking a bit high level here. Maybe it can stir up the right idea though. My thought is, can you have the code output a debug message that includes the raw response from our API? That may give some more insight into what is happening.

Kind Regards, Jarland