I have implemented a button that, when clicked or pressed, triggers a click event on an input type=file, allowing the user to upload a file. This functionality works seamlessly on all platforms, but there is an issue with Safari/iOS Safari. In Safari, when I need to make a request before opening the upload window, the request is made and I receive a response, but the input click event is not triggered.
Below is the code snippet:
async handleClickUpload(origin: string) {
try {
this._setDocumentType({ origin });
const { code: documentCode } = this.currentDocument;
if (this._isDocumentBackVariant(documentCode)) {
await this._variantBackDocumentHandler();
}
this._handleUploadMethod();
} catch (e) {
console.error(e);
}
}
The above code handles making the request and setting the variation of the document, which functions correctly on Safari as well.
async _variantBackDocumentHandler() {
const { variation } = await this.getSpecificDocument("cnh_rg_frente");
console.error("Encontrou variação", variation);
if (!variation) {
this._setDocumentType({ open: true });
throw new Error("Variação não encontrada");
}
this._setDocumentType({ variation });
}
This method determines whether to open the camera or allow the user to upload files, which also works well on Safari.
_handleUploadMethod() {
const { origin = "" } = this.documentType;
if (origin === "camera") {
this.cameraController.open = true;
} else {
this._uploadInputHandler();
}
}
In the following method, I trigger the click event for a hidden input element. Even in Safari, the hidden input element can be successfully selected. However, on Safari, clicking the input to open the upload window does not work.
_uploadInputHandler() {
const uploadInput: HTMLInputElement | null = document.querySelector("#uploadInput");
uploadInput?.click();
}
Here is the input element:
<input
id="uploadInput"
@change="(event) => $emit('receiveFile', event)"
type="file"
style="visibility: hidden"
accept="application/pdf, image/png, image/jpeg"
/>
.browserlistrc configuration:
defaults
not IE 11
maintained node versions
last 10 ios_saf versions
last 10 safari versions
babel.config.js configuration:
const plugins = () => {
const defaultPlugins = [
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-syntax-throw-expressions",
[
"@babel/plugin-transform-runtime",
{
absoluteRuntime: false,
corejs: false,
helpers: true,
regenerator: true,
useESModules: false,
},
],
];
return defaultPlugins;
};
module.exports = {
presets: [
[
"@vue/cli-plugin-babel/preset",
{
polyfills: [
"es.array.iterator",
"es.promise",
"es.object.assign",
"es.promise.finally",
"es.symbol",
],
},
],
],
plugins: plugins(),
};
Imports in main.ts:
import "core-js/stable";
import "regenerator-runtime/runtime";
The functionality works flawlessly on other browsers, but on iOS Safari, when a request needs to be made before triggering the click event, nothing happens.