File Type Upload Restriction
Hello,
I set up a block to allow users to upload a file in one of the following formats: .jpg, .jpeg, .png, .heic, .HEIC.
When I try to upload a .jpg file, there’s no issue. However, when I attempt to upload a HEIC file, I get an error message: "An error occurred while uploading the file(s)."
Did I miss something in the configuration? The HEIC format is officially listed here: https://www.iana.org/assignments/media-types/media-types.xhtml .
If you have any ideas, I’d appreciate your help!
P.S.: I've tested different formats to restrict the field: image/heic, just .HEIC or .heic, with/without uppercase letters
Best,
Killian
17 Replies
I also tried removing the restriction and the file is handled correctly. This is good, but I still need to restrict the scope.
You are self-hosting? What version are you hosting?
Is this a error toasts that pops up?
Can you check server logs for any details?
Yes, I am self-hosting. I have version 3.7.1.
A window pops up indicating there was an issue during the upload (screenshot).
When checking my console, here is what appears:
1745.721b58e2117ed183.js:1
POST https://<my-typebot-instance.com>/api/v3/generate-upload-url 400 (Bad Request)
t2 @ 1745.721b58e2117ed183.js:1
mH @ 1745.721b58e2117ed183.js:1
f @ 1745.721b58e2117ed183.js:1
g @ 1745.721b58e2117ed183.js:1
y @ 1745.721b58e2117ed183.js:1
1745.721b58e2117ed183.js:1 {message: 'File type not allowed', code: 'BAD_REQUEST', data: {…}}code: "BAD_REQUEST"data: code: "BAD_REQUEST"httpStatus: 400path: "generateUploadUrl"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (…)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()message: "File type not allowed"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (…)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
t2 @ 1745.721b58e2117ed183.js:1
await in t2
mH @ 1745.721b58e2117ed183.js:1
f @ 1745.721b58e2117ed183.js:1
g @ 1745.721b58e2117ed183.js:1
y @ 1745.721b58e2117ed183.js:1
Can you share a simple typebot that I can use to reproduce the issue?
Here is a simple Typebot for testing purposes.
While setting it up, I noticed an unexpected behavior related to file uploads.
Initially, I limited the allowed file extensions to .heic and .jpg. Despite this, I encountered an issue when trying to upload a .heic file — which was expected.
However, I also experienced the same issue with a .jpg file, even though its extension was indeed .jpg (and not .jpeg).
When I added the .jpeg extension to the list of allowed types, the .jpg files were then uploaded successfully.
However, I’m still unable to upload .heic files — the problem persists.
Initially, I limited the allowed file extensions to .heic and .jpg. Despite this, I encountered an issue when trying to upload a .heic file — which was expected.
However, I also experienced the same issue with a .jpg file, even though its extension was indeed .jpg (and not .jpeg).
When I added the .jpeg extension to the list of allowed types, the .jpg files were then uploaded successfully.
However, I’m still unable to upload .heic files — the problem persists.
Can't reproduce. Can you try to upgrade to v3.8.0, try again and if it still fails, tell me how I can reproduce it exactly?
I performed the update to 3.8.0, but unfortunately it didn't improve the situation. Here's the process I am following: https://www.screenpresso.com/=P7xJaOtZcQbK
Do you think this could be due to S3 storage?
You did not show the
File type not allowed error on the screen recording that would've helped 🙏What error do you want to see? In the recording, you can see the error message in the bottom right corner during upload.
Maybe the console? Here is a video with the console: https://www.screenpresso.com/=VbV5hAjWpKSO
If you want to try my typebot, here is the link: https://typebot.leweb2ks.net/mon-typebot-qqbx208
Right so we can see the issue with your S3 endpoint (400 bad request) for some reason
Something must be misconfigured there
Can you double check this doc? https://docs.typebot.io/self-hosting/guides/s3
Typebot Docs
S3 Configuration - Typebot Docs
I have verified my configuration with my Scaleway S3, and the policy as well as the CORS rules are correctly in place
I also tested uploading a HEIC file to the typebot directory via CLI, and it works
Can you provide your configs?
I can't really guess without more info 🙏
Could you please specify which part of the configuration can help?
I have updated the Typebot: https://typebot.leweb2ks.net/mon-typebot-9blm1q0 by removing the restriction on the file format. This time, the file is correctly uploaded to S3, but Typebot consider it as a document while it is actually an image format.
Mon typebot
Mon typebot
Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.