Error uploading images or PDFs to Bucket.

[tough dome]

Hello Appsmith team!

I'm having trouble displaying the files I uploaded to my buckets. The file uploads to the bucket, but when I try to access it, the file is corrupted or empty.

1 - I had no problems connecting my repository, either GCP Bucket or Minio.

2 - I can list the files and upload them; the problem is with reading them, both in Minio and GCP.

3 - When I successfully upload a file, I receive a signed URL. When I try to open this URL, it shows nothing or keeps loading indefinitely.

4 - I can see the file in the bucket, but I can't open it. In the console (Minio or GCP), the file doesn't open, and I can't download it. But if I upload the exact same file manually, I can open it normally in the console.

5 - In my tests, I had problems with PDFs and images, and curiously no problems with .txt files.

6 - The problem occurs both in my self-hosted instance (1.94) and in the cloud (source of the screenshots below).

7 - File Picker, Data format, set to Binary, and in the Upload Text / Binary query.

*image with a blank pdf example, error loading a image file and a sucefull .txt opening (all signature respse url)

The problem seems to be that the file gets corrupted the moment I select it in the file picker. In an image, you can see that the data/base64 meta is completely malformed, and I haven't even clicked "Run query" yet.

Thank you for your attention to my problem, I really hope I can count on your help. I have already read the documentation and searched for solutions on the internet or in AI chats.

[keen oriole]

Hello! I'm Appsmith Support Bot, here to help you with your file upload and display issues.

Based on your description, it sounds like the problem is related to how the FilePicker widget handles binary files (like PDFs and images) versus text files. Here are some key points and troubleshooting steps:

1. FilePicker Data Format: For binary files, ensure the FilePicker's "Data Format" is set to "Binary". This is correct as you mentioned.

2. Uploading Binary Data: When uploading, you should use the FilePicker1.files[0].data property in your upload query. Make sure you are not using FilePicker1.files[0].base64 for binary files, as this can corrupt non-text files.

3. Headers in Upload Query: When uploading to Minio or GCP, ensure you are setting the correct Content-Type header (e.g., application/pdf for PDFs, image/png for PNGs, etc.). If you always use text/plain, binary files may get corrupted.

4. Query Body: The body of your upload query should be set to ** {?{ FilePicker1.files[0].data }?} ** for binary uploads.

5. Signed URL Access: If the file is corrupted after upload, the issue is likely with the upload process, not the signed URL generation.

Example for Uploading a PDF:

• Data Format: Binary
• Query Body: ** {?{ FilePicker1.files[0].data }?} **
• Headers: { "Content-Type": "application/pdf" }

Checklist:

• Are you using FilePicker1.files[0].data in your upload query body?
• Are you setting the correct Content-Type header for each file type?
• Are you using the "Binary" data format in the FilePicker?

If you can share your upload query configuration (headers and body), I can help you verify it. Let me know if you need a step-by-step example for your specific storage (Minio or GCP)!

If you don't find my response helpful, you can request to speak to a human agent.

[tough dome]

Adding .data to the content doesn't solve the problem; as you can see in the image, adding .data captures the malformed base64 string at the end.

If it wasn't clear, the problem is the same for Minio or GCP, and for Appsmith self or cloud.

[keen oriole]

Thank you for clarifying and sharing the screenshot. If the FilePicker widget is showing a malformed base64 string in the .data property even before you run the upload query, this suggests the issue may be with how the FilePicker is reading the file.

Here are some focused troubleshooting steps:

1. FilePicker Widget Settings:

• Double-check that the "Data Format" is set to "Binary" (not "Base64" or "Text").
• After selecting a file, inspect FilePicker1.files[0].data in the debugger or by binding it to a Text widget. For binary files, this should be a Blob or ArrayBuffer, not a base64 string.

2. Appsmith Version:

• You mentioned using version 1.94. There have been fixes related to file uploads in recent versions. If possible, try updating to the latest Appsmith version to see if the issue persists.

3. Widget Binding:

• Do not use FilePicker1.files[0].base64 for binary uploads.
• Use FilePicker1.files[0].data directly in the upload query body.

4. Known Limitation:

• If the FilePicker widget is still producing malformed data for binary files, this could be a bug. Please confirm if the same issue occurs with a brand new FilePicker widget in a new app.

Next Steps:

• Can you confirm what you see if you bind ** {?{ FilePicker1.files[0].data }?} ** to a Text widget after selecting a PDF or image? Is it a long string, or does it show [object Blob] or similar?
• If it?s a string, it should not be. For binary, it should be a Blob/ArrayBuffer.

If the widget is not producing the correct binary data, this may require escalation to the Appsmith support team. Please let me know what you observe, and I can guide you further!

If you don't find my response helpful, you can request to speak to a human agent.

[tough dome]

speak to a human agent

[keen oriole]

Someone from our team will reach out to you on this thread. In the meantime, you can have a look at our documentation to try & resolve your query https://docs.appsmith.com?utm=bot

[keen oriole]

Hello! Please follow the steps from this guide on how to upload files to S3. Please let us know if it works with the configurations from this documentation.

[tough dome]

It worked!

I'll do more tests, for minio and self, but cloud to gcp worked.
Well, I was sure I had tested it that way, I read that post with the instructions! Apparently I must have missed a step, but when you talk to the master, magic happens.

Thank you very much for now.