Problem when selecting a file from the iOS gallery

25 Views Asked by At

the problem closes with the fact that when opening "" . After that, the gallery opens on the iPhone, when you select a video, it is first uploaded to the galleries -> sent to the page -> validated. Is it possible to make the process of uploading to the galleries transferred to the page, that is, I waited not in the gallery, but on the page

<div class="input-file-row">
                    <label class="input-file">
                           <input type="file" accept="image/*, video/*, application/pdf" name="file[]" capture="user" multiple>     
                           <span> + Добавить фото/видео</span>
                     </label>
                    <div class="input-file-list"></div>  
                </div>  
var dt = new DataTransfer();
    let statusText = document.querySelector(".status");

    (function () {
        var statusText = document.querySelector(".status");
        var maxVideoSize = 200 * 1024 * 1024;
        var maxImageSize = 10 * 1024 * 1024;
        var maxPdfSize = 4 * 1024 * 1024;

        function handleFileInputChange(inputFile) {
            inputFile.addEventListener('change', function () {
                var filesList = this.closest('.input-file').nextElementSibling;
                var filePromises = [];

                for (var i = 0; i < this.files.length; i++) {
                    var file = this.files[i];
                    filePromises.push(validateFile(file, filesList));
                }

                Promise.all(filePromises)
                    .then(function () {
                        statusText.innerText = '';
                        inputFile.value = '';
                    })
                    .catch(function (error) {
                        statusText.innerText = error;
                    });
            });
        }

        function validateFile(file, filesList) {
            return new Promise(function (resolve, reject) {
                if (file.type.includes('video')) {

                    if (file.size <= maxVideoSize) {
                        if (!isFileAlreadyAdded(file, dt)) {
                            addFileToList(file, filesList);
                            resolve();
                        } else {
                            reject('Файл уже добавлен.');
                        }
                    } else {
                        reject('Файл не прошел проверку. Размер файла не более 200 МБ.');
                    }
        
                } else if (file.type.includes('image')) {
                    if (file.size <= maxImageSize) {
                        if (!isFileAlreadyAdded(file, dt)) {
                            addFileToList(file, filesList);
                            resolve();
                        } else {
                            reject('Файл уже добавлен.');
                        }
                    } else {
                        reject('Размер превышает допустимый объем для изображения.');
                    }
                } else if (getFileExtension(file.name).toLowerCase() === 'pdf') {
                    if (file.size <= maxPdfSize) {
                        if (!isFileAlreadyAdded(file, dt)) {
                            addFileToList(file, filesList);
                            resolve();
                        } else {
                            reject('Файл уже добавлен.');
                        }
                    } else {
                        reject('Размер превышает допустимый объем для PDF.');
                    }
                } else {
                    reject('Тип файла не поддерживается.');
                }
            });
        }
        

        function getFileExtension(filename) {
            return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
        }

        function addFileToList(file, filesList) {
            var newFileInput = document.createElement('div');
            newFileInput.className = 'input-file-list-item';
            newFileInput.innerHTML = '<span class="input-file-list-name">' + file.name + '</span>' +
                '<a href="#" class="input-file-list-remove">x</a>';
            newFileInput.querySelector('.input-file-list-remove').addEventListener('click', function (event) {
                event.preventDefault();
                removeFilesItem(this);
            });
            filesList.appendChild(newFileInput);
            dt.items.add(file);
        }

        function removeFilesItem(target) {
            var name = target.previousElementSibling.textContent;
            var inputFile = target.closest('.input-file-row').querySelector('input[type=file]');

            target.closest('.input-file-list-item').remove();

            for (var i = 0; i < dt.items.length; i++) {
                if (name === dt.items[i].getAsFile().name) {
                    dt.items.remove(i);
                }
            }

            inputFile.files = dt.files;
        }

        function isFileAlreadyAdded(file, dataTransfer) {
            for (var i = 0; i < dataTransfer.items.length; i++) {
                if (file.name === dataTransfer.items[i].getAsFile().name) {
                    return true;
                }
            }
            return false;
        }

        var inputFileElements = document.querySelectorAll('.input-file input[type=file]');
        inputFileElements.forEach(handleFileInputChange);
    })();

I expected that the video would not be uploaded directly to the gallery

0

There are 0 best solutions below