# Upload thumbnail as a separate file

**URL:** <https://community.transloadit.com/t/upload-thumbnail-as-a-separate-file/17032>\
**Category:** Uppy\
**Created:** [March 6, 2024, 4:18pm UTC](https://community.transloadit.com/t/upload-thumbnail-as-a-separate-file/17032 "2024-03-06T16:18:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![CozminM](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/cozminm/32/1110_2.png) [@CozminM](https://community.transloadit.com/u/CozminM)\
**Post date:** [March 6, 2024, 4:18pm UTC](https://community.transloadit.com/t/upload-thumbnail-as-a-separate-file/17032/1 "2024-03-06T16:18:55Z")

</div>

Hello,

I am trying to create a feature where when an image file is added to the Dashboard, another thumbnail file is created and added based on the `preview` property of the initial file. Until now, I have tried two methods:

1. Create the new file on the `file-added` trigger. Here it would enter an infinite loop that I have prevented with a `thumbnail` flag in the `meta` property of the created file. But this does not feel like a viable option as I need the upload of the thumbnail files to be invisible to the user.
2. Use the `addPreProcessor` method to trigger the function that generated and uploads the thumbnail files. Here, I encountered several problems. The library only keeps track of the initial files for upload, so I have to manually trigger the upload process again for each thumbnail file. But when I trigger the upload process manually, the `complete` event triggers, and I need the event to trigger other external processes.

Anyone have any advice on how to implement this without any of the drawbacks I have described?

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [March 7, 2024, 8:58am UTC](https://community.transloadit.com/t/upload-thumbnail-as-a-separate-file/17032/2 "2024-03-07T08:58:12Z")

</div>

Hi, for option 1 did you use `uppy.addFile()`? The file should appear then 🤔

---

<div class="post-metadata">

**Author:** ![CozminM](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/cozminm/32/1110_2.png) [@CozminM](https://community.transloadit.com/u/CozminM)\
**Post date:** [March 7, 2024, 9:09am UTC](https://community.transloadit.com/t/upload-thumbnail-as-a-separate-file/17032/3 "2024-03-07T09:09:36Z")

</div>

I did use `addFile`. The problem I have with this approach is that the file gets added to the `Dashboard` before the upload process starts and the user can see the new file there. The way I need it to work is that I add the original file and when the user clicks on `Upload`, the thumbnail file is added to the upload queue in the background.  
That is why I tried the `addPreProcessor` method, but then I encountered the multiple trigger of the `complete` event that has me blocked.

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [March 7, 2024, 9:18am UTC](https://community.transloadit.com/t/upload-thumbnail-as-a-separate-file/17032/4 "2024-03-07T09:18:13Z")

</div>

I’m afraid that only letting the new thumbnail files show up as you click upload, not before, is too specific for how Uppy is designed.

I understand that it’s a bit confusing to see files double from a user perspective, but it’s probably your best option.