Not able to upload multiple images

[carlosEleao]

Hi,

This lib is very usefull, it would be good to have support to multiple uploads at once.

router.post('/update', isAuthorized, upload.array('images', 20), update);

const upload = multer({
storage: s3Storage({
s3,
ACL: 'public-read',
Bucket: config.awsBucket,
multiple: true,
crop: 'attention',
resize: [
{ suffix: 'xlg', width: 1200 },
{ suffix: 'lg', width: 800, height: 600 },
{ suffix: 'md', width: 500, height: 500 },
{ suffix: 'sm', width: 265, height: 190 },
{ suffix: 'xs', width: 100 },
],
Key(req, file, cb) {
cb(null, ${Buffer.from(file.originalname).toString('base64')}_${Date.now().toString()});
},
}),
});

Right now if I use this code to upload several images, the first one is uploaded successfully but the rest all are stored with 0 bites.

[ikhsanalatsary]

Thanks for reporting this issue. Yes, actually I haven't tested yet the use of upload.array. If you don't mind and knowing the problem. you can make a pull request. PRs are welcome 😄

[dimitrius-ion]

Even when doing multiple posts with singe upload some files end up with 0 bites

[ikhsanalatsary]

@dimitrius1986 how to repro what you said? I didn't face any problem for single upload

[dimitrius-ion]

when you do multiple calls to the endpoint, something like this:
files.forEach(file => {
var formData = new FormData()
formData.append('file', file)
axios.post(
'/' +appName + '/api/upload/image/',
formData,
{ headers: { 'Content-Type': 'multipart/form-data' } }
)
})
routher.post('/image/', upload('image').single('file'), (req, res) => console.log(req.file))
files that come after first file still end up with 0 bytes

[ikhsanalatsary]

@susutew & @dimitrius1986 you can try again in this branch https://github.com/ikhsanalatsary/multer-sharp-s3/tree/fix/bumps-version
I need feedback. thanks

[ashishchandr70]

I will try this today and give you my feedback. It is a great package.

[ashishchandr70]

Hi @susutew I am using the bumps fix branch and it now creates and resizes images passed in the array. However, it is only using the very last image in the input array and only using that one. For example:

I am passing 4 images via Postman. The images created are:

"media": [
                    {
                        "id": 63,
                        "full": "http://api.eosnode.io/media/stuff/-FyyQAKtj-original",
                        "med": "http://api.eosnode.io/media/stuff/-FyyQAKtj-md",
                        "sm": "http://api.eosnode.io/media/stuff/-FyyQAKtj-sm"
                    },
                    {
                        "id": 64,
                        "full": "http://api.eosnode.io/media/stuff/iq2paSjPJb-original",
                        "med": "http://api.eosnode.io/media/stuff/iq2paSjPJb-md",
                        "sm": "http://api.eosnode.io/media/stuff/iq2paSjPJb-sm"
                    },
                    {
                        "id": 65,
                        "full": "http://api.eosnode.io/media/stuff/kTP0pe7kTq-original",
                        "med": "http://api.eosnode.io/media/stuff/kTP0pe7kTq-md",
                        "sm": "http://api.eosnode.io/media/stuff/kTP0pe7kTq-sm"
                    },
                    {
                        "id": 66,
                        "full": "http://api.eosnode.io/media/stuff/F69xLJ-159-original",
                        "med": "http://api.eosnode.io/media/stuff/F69xLJ-159-md",
                        "sm": "http://api.eosnode.io/media/stuff/F69xLJ-159-sm"
                    }
                ],

As you can see, all the images are the same.

The function is being invoked as multer.instance.array()

e.g. uploadStuff.array(...)

exports.uploadStuff = multer({
    storage : s3Storage({
        s3,
        Bucket: 'tradestuff-stuff',
        Key: function (req, file, cb) {
            var path = shortid.generate();
            cb(null, path);
        },
        multiple: true,
        ACL:'private',
        resize: [
            { suffix: 'md', width: 500 },
            { suffix: 'sm', width: 150, height: 150 },
            { suffix: 'original' }
        ]
    })
});

[dimitrius-ion]

@ashishchandr70 can you try my fork https://github.com/dimitrius1986/multer-sharp-s3

[ashishchandr70]

@dimitrius1986 sure will try that as well

[ikhsanalatsary]

@susutew I see, uploaded successfully but the return is wrong. Isn't it?

[ashishchandr70]

@ikhsanalatsary yes exactly. I was able to modify the size of the multiple images but the images are all the same....but sizes are of course different. This is using the bumps version.

[ashishchandr70]

@ashishchandr70 can you try my fork https://github.com/dimitrius1986/multer-sharp-s3

Hi @dimitrius1986 I tried with your fork. However, all the files are not present.

Here is my code snippet for using multer-sharp-s3

And as you can see in the image below, not all sizes are present. Some has sm only, some has original only, some has md only, but not all. Am I doing something wrong?

[ashishchandr70]

Guys @ikhsanalatsary @dimitrius1986 any updates on when you plan to resolve this?

[ashishchandr70]

Hi @ikhsanalatsary what do you suggest I do? The only other option is to pull out this library and write more code for resizing the sharp generated images.

[ferdigokdemir]

any update?

[prashanthalpha]

Any Update

[jeanmayorga]

any update?

[ikhsanalatsary]

@ashishchandr70 , @jpmayorga , @prashanthalpha , @ferdigokdemir I already tried to fix this. please try on this branch https://github.com/ikhsanalatsary/multer-sharp-s3/tree/fix-not-able-to-upload-multiple-images. and don't forget to give me feedback

[carylaw]

@ikhsanalatsary
able to upload files, but terrible result

upload.array("images", 10)

Uploading 2 files case

Uploading 3 files case (all image becomes last image)

[kimkong88]

Any update on this? if fixed, when is the release?

[riyasksalim]

https://developer.aliyun.com/mirror/npm/package/multer-s3-transform

This will help you to resolve the issue . please check
npm install multer-s3-transform

[kimkong88]

https://developer.aliyun.com/mirror/npm/package/multer-s3-transform

This will help you to resolve the issue . please check
npm install multer-s3-transform

yes I decided to go with multer-s3-transform. works well !