Only saving last image of multiple uploads about file-upload-with-preview

[inelion]

Ok, well, thanks for great uploader - much appreciated.

…

On Sun, Oct 31, 2021, 3:49 AM John Datserakis ***@***.***> wrote: Ahh yes I'm sorry you're right. Because you're in control of that HTML code, sure, you're solution would be just fine. I would hesitate to add it to the actual example code, but I'm glad you made an issue because now others can find the solution of they're using the same tech. Thank you. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#45 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASDPXBCQT4Z4SGLBFT3EYFLUJSVC7ANCNFSM5HBTPZYQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[johndatserakis]

Hi there. I just checked and when I add images, I do see the images added to the cachedFileArray, so it seems like everything is working there.

Because file-upload-with-preview is simply a way to "gather" the images that are ready to be sent, however you do that will be up to the backend you choose to use.

Updating this enctype is not a feature supported by file-upload-with-preview. You can do basically the same thing though by formatted your data before upload.

In a previous comment I shared two ways to do that - one with jQuery's ajax method, and one using axios. You can also tweak it to whatever you use before you send up the data. In this way, you should be able to upload all the files.

[inelion]

Hi John, Thanks for the quick response. This is an ASP. NET project and by just adding that value to the form tag it fixed the problem.

…

On Sun, Oct 31, 2021, 2:38 AM John Datserakis ***@***.***> wrote: Hi there. I just checked and when I add images, I do see the images added to the cachedFileArray, so it seems like everything is working there. Because file-upload-with-preview is simply a way to "gather" the images that are ready to be sent, however you do that will be up to the backend you choose to use. Updating this enctype is not a feature supported by file-upload-with-preview. You can do basically the same thing though by formatted your data before upload. In a previous comment <#37 (comment)> I shared two ways to do that - one with jQuery's ajax method <#28 (comment)>, and one using axios <https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data/47630754#47630754>. You can also tweak it to whatever you use before you send up the data. In this way, you should be able to upload all the files. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#45 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASDPXBFAUMVSALN6I5RWHQTUJSM2TANCNFSM5HBTPZYQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[johndatserakis]

Ahh yes I'm sorry, you're right. Because you're in control of that HTML code, sure, you're solution would be just fine. I would hesitate to add it to the actual example code because not everyone is using the same backend, but I'm glad you made an issue because now others can find the solution of they're using the same tech. Thank you.

[inelion]

I was wrong when I reported that I fixed this issue with enctype="multipart/form-data" :/

[inelion]

This works correctly IF you select ALL of the images at the same time but not if you select multiple images one at a time. So, for example, if you select three images at the same time using the Ctrl key, then it will place all of the images in Request.Files but if you select one by one it will only put the last image in Request.Files.

[inelion]

Is this working correctly for you?

[johndatserakis]

Yea this is working correctly - really this is going to depend on your backend. Make sure you're sending the cachedFileArray to your backend. My comment here has more info on how I would go about it, but again, this is more of a backend thing. This component simply collects the images from the user selection - the part you're talking about is on the backend and is not really part of this, from how I understand your question.

[inelion]

Ok, thanks. [image: cloudHQ] <https://www.cloudhq-mkt3.net/mail_track/link/067ef7e5845c905147_1636235009459?uid=875251&url=https%3A%2F%2Fwww.free-email-tracker.com> Powered by cloudHQ <https://www.cloudhq-mkt3.net/mail_track/link/067ef7e5845c905147_1636235009459?uid=875251&url=https%3A%2F%2Fwww.free-email-tracker.com>

…

On Fri, Nov 5, 2021 at 11:57 PM John Datserakis ***@***.***> wrote: Yea this is working correctly - really this is going to depend on your backend. Make sure you're sending the cachedFileArray to your backend. My comment here <#45 (comment)> has more info on how I would go about it, but again, this is more of a backend thing. This component simply collects the images from the user selection - the part you're talking about is on the backend and is not really part of this, from how I understand your question. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#45 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASDPXBA3ABWWOLW7OXXY3XTUKSYTVANCNFSM5HBTPZYQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[randylou]

i am having the same problem. but i am not using some ajax method to submit my uploads, in this case, what should i do, thanks for your help

[johndatserakis]

Yup so really this is backend specific - all you need to do is send the upload.cachedFileArray to your backend - whatever method that is will change based on what backend you're using.

A FormData approach is a common method, perhaps that way will work for you.