Показывать пользователю сообщение об ошибке сервера после загрузки файла в Symfony v6.4 с помощью OneUpUploaderBundle и ⇐ Php

[Anonymous]

Введение
Я использую:

• Symfony v6.4.8
  < li>OneUpUploaderBundle v5.0.1
• UPPY (с помощью Yarn)
  

  Код: Выделить всё

  "@uppy/core": "^3.12.0"

• Код: Выделить всё

  "@uppy/dashboard": "^3.8.3"

• Код: Выделить всё

  "@uppy/golden-retriever": "^3.2.0"

• Код: Выделить всё

  "@uppy/locales": "^3.5.3"

• Код: Выделить всё

  "@uppy/xhr-upload": "^3.6.7"

На момент написания официального OneUploaderBundle не существует< /code> интеграция с UPPY.
К счастью, разработчики OneUpUploaderBundle дальновидно и добавили поддержку пользовательского загрузчика!
Поэтому я решил реализовать его.

Реализация
Во-первых, я решил настроить загрузку с помощью Blueimp jQuery File Uploader, как есть. поддерживается пакетом.
После успеха я перешел к настройке загрузки с помощью UPPY и пользовательского загрузчика.
Для моего CustomUploader Я выбрал BlueimpController - из множества других загрузчиков, поддерживающих пакет.
На данный момент загрузка работает с помощью специального загрузчика (для UPPY).

Проблема
Из соображений безопасности я не разрешаю загрузку файлов, расширение которых не соответствует с его MIME-типом. Я проверяю это (на сервере после получения файла) с помощью Symfony в UploadValidationListener. В этом случае мне нужно показать ошибку пользователю, но я не знаю, как передать ее на панель управления UPPY.
Статус: файл успешно загружен, но такое файл не сохраняется — поскольку он не прошел проверку. Без сообщения пользователь мог бы задаться вопросом: где находятся фантомные файлы, ведь он увидел, что они успешно загружаются!

Код

вот как настраивается UPPY

Код: Выделить всё

'use strict';

import Translator from 'bazinga-translator';
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import GoldenRetriever from '@uppy/golden-retriever';
import XHR from '@uppy/xhr-upload';

import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';
import en_US from "@uppy/locales/lib/en_US";

const js_data = document.querySelector('#js-data');
let data_allowed_file_types_str = js_data.dataset.allowedFileTypes;
const data_allowed_file_types = data_allowed_file_types_str.split('|');
const data_allowed_file_size_min = js_data.dataset.allowedFileSizeMin;
const data_allowed_file_size_max = js_data.dataset.allowedFileSizeMax;
const data_upload_endpoint = js_data.dataset.uploadEndpoint;

const uppy = new Uppy({
debug: false,
locale: en_US,
onBeforeFileAdded: (currentFile, files) =>
{
const do_not_allow_arr = ['do_not_allow_me_1.txt', 'do_not_allow_me_2.txt', 'do_not_allow_me_3.txt'];
let allowed = true;
do_not_allow_arr.forEach((element) =>
{
if (currentFile.name === element)
{
allowed = false;
uppy.log(Translator.trans('upload.error.skipFilesFromBlockList'));
uppy.info((Translator.trans('upload.error.skipFilesFromBlockList')), 'error', 5000);
return allowed;
}
});
return allowed;
},
});

uppy.use(GoldenRetriever);

uppy.use(Dashboard, {
inline: true,
target: '#uppy-dashboard',
id: 'uppy',
width: '100%',
proudlyDisplayPoweredByUppy: false,
showProgressDetails: true,
});

uppy.use(XHR, {
endpoint: data_upload_endpoint
});

uppy.setOptions({
restrictions:
{
minNumberOfFiles: 1,
maxNumberOfFiles: 1,
minFileSize: data_allowed_file_size_min,
minTotalFileSize: data_allowed_file_size_min,
maxTotalFileSize: data_allowed_file_size_max,
allowedFileTypes: data_allowed_file_types
},
//autoProceed: true
});

uppy.on('file-added', (file) => {
console.log('Added file', file);
});

uppy.on('upload-success', (file, responseObject) => {
// (depending on the uploader plugin used, it might contain
// less info, the example is for @uppy/xhr-upload)
// responseObject = {
//     status, // HTTP status code (0, 200, 300)
//     body, // response body
//     uploadURL // the file url, if it was returned
// }
console.log('after upload success');
});

uppy.on('upload-error', (file, responseObject) =>  {
// responseObject = {
//     status, // HTTP status code (0, 200, 300)
//     body // response body
// }
console.log('after upload error');
});

вот код валидатора

Код: Выделить всё

Подробнее здесь: [url]https://stackoverflow.com/questions/76863441/show-message-about-server-error-to-user-after-file-upload-in-symfony-v6-4-with[/url]