Load image from URL and upload to media library in Strapi

I'm building a CSV importer for my Strapi application and one of its task is to read an image URL from a cell and download it from the URL and save it to media library.

The code looks like this:

const request = require('request').defaults({ encoding: null });

request.get(src, function (err, res, body) {
    const fileName = src.split('/').pop();

    strapi.plugins.upload.services.upload.upload({
        files: {
            path: body,
            name: fileName,
            type: res.headers['content-type'],
            size: Number(res.headers['content-length']),
        },
        data: {
            ref: 'products',
            refId: data.itemID,
            field: 'images'
        }
    });
});

The download works and I get a Buffer in the body variable of the request.get callback. But passing this to strapi.plugins.upload.services.upload.upload give me the following error:

UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received <Buffer ff d8 ff e1 10 c1 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 0f 00 00 01 03 00 01 00 00 00 6c 05 00 00 01 01 03 00 01 00 ...

I already tried to replace path: body, with path: new Uint8Array(body), but without no luck.

Any idea what I do wrong here?

Thanks for your help!

I had this exact same requirement in one of my projects where I had to fetch a file from an URL and then upload it to media library. I've approached the problem by first fetching the stream of bytes from the URL and then saving it to a file in a tmp folder. Once the file is fully downloaded, I've simply used the inbuilt upload method of strapi to upload the file to the media library.

Libraries you need to install

$ npm install mime-types
$ npm install axios
$ npm install lodash

Implementation

// my-project/helpers/uploader.js

const _ = require('lodash');
const axios = require('axios').default;
const fs = require('fs');
const stream = require('stream');
const path = require('path');
const promisify = require('util').promisify;
const mime = require('mime-types');

module.exports = {
  getFileDetails(filePath) {
    return new Promise((resolve, reject) => {
      fs.stat(filePath, (err, stats) => {
        if (err) reject(err.message);
        resolve(stats);
      });
    });
  },

  deleteFile(filePath) {
    return new Promise((resolve, reject) => {
      fs.unlink(filePath, (err) => {
        if (err) reject(err.message);
        resolve('deleted');
      });
    });
  },

  async uploadToLibrary(imageByteStreamURL) {
    const filePath = './tmp/myImage.jpeg';
    const { data } = await axios.get(imageByteStreamURL, {
      responseType: 'stream',
    });

    const file = fs.createWriteStream(filePath);
    const finished = promisify(stream.finished);
    data.pipe(file);
    await finished(file);
    const image = await this.upload(filePath, 'uploads');
    return image;
  },

  async upload(filePath, saveAs) {
    const stats = await this.getFileDetails(filePath);
    const fileName = path.parse(filePath).base;

    const res = await strapi.plugins.upload.services.upload.upload({
      data: { path: saveAs },
      files: {
        path: filePath,
        name: fileName,
        type: mime.lookup(filePath),
        size: stats.size,
      },
    });

    await this.deleteFile(filePath);
    return _.first(res);
  },
};

Then in you're actual service/controller you can simply invoke the method from your helper like so:

const uploader = require('../../../helpers/uploader');
const img = await uploader.uploadToLibrary('http://www.example.com/demo-image.jpg');
console.log(img);

References:

• Mime-Types
• Axios
• Lodash