3

I want my users to upload profile pictures. Right now I can choose a file and pass it into a POST request body. I'm working in Node.js + JavaScript.

I am using DigitalOcean's Spaces object storage service to store my images, which is S3-compatible.

Ideally, my storage stores the file as an actual image. Instead, it is storing as a strange file with Content-Type application/octet-stream. I don't know how I'm supposed to work with this -- normally to display the image, I simply reference the URL that hosts the image, but in this case the URL is pointing to this strange file. It is named something like VMEDFS3Q65JV4B7YQKLS (no extension). The size of the file is 14kb which seems right and it appears to hold the file data. It looks like this:

enter image description here

etc...

I know I'm grabbing the right image and I know the database is hooked up properly as it's posting to the exact right place, I'm just unhappy with the file type.

Request on front end:

fetch('/api/image/profileUpload', { 
      method: 'PUT',
      body: { file: event.target.files[0] },
      'Content-Type': 'image/jpg',
    })

Code in backend:

      const AWS = require('aws-sdk')

      let file = req.body;
      file = JSON.stringify(file);
        
      AWS.config.update({
        region: 'nyc3',
        accessKeyId: process.env.SPACES_KEY,
        secretAccessKey: process.env.SPACES_SECRET,
      });
      
      const s3 = new AWS.S3({
        endpoint: new AWS.Endpoint('nyc3.digitaloceanspaces.com')
      });
    
      const uploadParams = {
        Bucket: process.env.SPACES_BUCKET,
        Key: process.env.SPACES_KEY,
        Body: file,
        ACL: "public-read",
        ResponseContentType: 'image/jpg'
      };
    
      s3.upload(uploadParams, function(err, data) {
        if (err) console.log(err, err.stack);
        else console.log(data);
      });

What I've tried:

  • Adding content-type header in request and content-type parameters in back
  • Other methods of fetching the data in the backend -- they all result in the same thing
  • Not stringifying the file after grabbing it from the req.body
  • Changing POST request to PUT request

Would appreciate any insight into either a) converting this octet-stream file into an image or b) getting this image to upload as an image. Thank you

Justin Jaeger
  • 181
  • 1
  • 6
  • I fully answered my own problem in this post: https://stackoverflow.com/questions/66499319/uploading-image-data-appears-like-this-1aqaq2b-and-image-is-bla – Justin Jaeger Mar 06 '21 at 19:47

1 Answers1

1

I solved this problem somewhat -- I changed my parameters to this:

const uploadParams = {
    Bucket: 'oscarexpert',
    Key: 'asdff',
    Body: image,
    ContentType: "image/jpeg",
    ACL: "public-read",
  };

^^added ContentType.

It still doesn't store the actual image but that's sort of a different issue.

Justin Jaeger
  • 181
  • 1
  • 6