Upload image with caption

Questions and Answers
1

Hi,

I want to upload images in my plugin. This works great!
However I could not upload images with caption.

I use the following code:

        //uploading it directly to upload services.
        const image = await strapi.plugins.upload.services.upload.upload({
            data: {
                refId: estateID,
                ref: 'real-estate',
                field: field,
            },
            files: {
                path: filePath,
                name: attachment.fileName,
                fileInfo: {
                    caption: attachment.caption,
                },
                caption: attachment.caption,
                type: mime.lookup(filePath), // mime type of the file
                size: stats.size,
            },
        });

It is not working. Any ideas? Thank you :slight_smile:

1 Like
2

for strapi version 3 this worked for me

request in nodejs Request
`var fs = require(“fs”);
var request = require(“request”);

var options = { method: ‘POST’,
url: ‘http://llocalhost:8080/upload’,
headers:
{ ‘postman-token’: ‘3458b68d-c4a1-ffbd-4b90-f466a27371a1’,
‘cache-control’: ‘no-cache’,
‘content-type’: ‘multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW’ },
formData:
{ files:
{ value: ‘fs.createReadStream(“IMG-20211104-WA0000.jpg”)’,
options: { filename: ‘IMG-20211104-WA0000.jpg’, contentType: null } },
refId: ‘1’,
ref: ‘class-subjects-chapter-topics’,
field: ‘file’,
fileInfo: ‘{“caption”: “attachment.caption”,“alternativeText”:“alternative text”}’ } };

request(options, function (error, response, body) {
if (error) throw new Error(error);

console.log(body);
});`

same request in php cURL
`<?php

$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_PORT => “8080”,
CURLOPT_URL => “http://localhost:8080/upload”,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => “”,
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => “POST”,
CURLOPT_POSTFIELDS => “------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name="files"; filename="IMG-20211104-WA0000.jpg"\r\nContent-Type: image/jpeg\r\n\r\n\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name="refId"\r\n\r\n1\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name="ref"\r\n\r\nclass-subjects-chapter-topics\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name="field"\r\n\r\nfile\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name="fileInfo"\r\n\r\n{"caption": "attachment.caption","alternativeText":"alternative text"}\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW–”,
CURLOPT_HTTPHEADER => array(
“cache-control: no-cache”,
“content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW”,
“postman-token: 0ee5200c-9a99-fef0-8c51-8479d06fc699”
),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo “cURL Error #:” . $err;
} else {
echo $response;
}`
for refrence below screenshot

postman
postman967×496 50 KB

3

is it possible to post a request for upload image from frontend with Axios

4

yes, just append info to form data

myFile.append('fileInfo', '{"alternativeText": "some text"}');