Как я могу проверить тип загружаемого файла с помощью Laravel React?

#javascript #php #reactjs #database #laravel

#javascript #php #reactjs #База данных #laravel

Вопрос:

Я использую React Laravel. Для загрузки файла я использую библиотеку Maatwebsite. Я только учусь, так что все это для «домашнего проекта» 🙂 Есть форма ввода для выбора файла и кнопка:

 <form>
  <input type="file" name="file" onChange={e => preUploadFile(e)} />
  <Button onClick={importFileHandler} disabled={!file}>Upload</Button>
</form>
  

Я сохраняю выбранный файл в состояние:

 const [file, setFile] = useState(null);
const preUploadFile = e => {
        const file = e.target.files[0];
        setFile(file);
};
  

Затем я «сбрасываю» состояние в выборку:

 // post for import
export const importFileInDataBase = async file => {
    try {
        const formData = new FormData();
        formData.append("file", file);
        await fetch(`${url}/v2/organizations/import`, {
            method: "POST",
            body: formData
        }).then(response => {
            console.log("result", response);
        });
    } catch (error) {
        console.log(error);
    }
};
  

После этого я вызываю эту функцию, нажимая на кнопку, а также, нажимая на кнопку, я вызываю функцию, которая запрашивает данные из таблицы с помощью запроса get и отображает их на странице.

 const importFileHandler = () => {
    new Promise((resolve, reject) => {
        resolve(importFileInDataBase(file));
    }).then(() => {
        getAllOrganizations();
    });
};
  

Моя модель на серверной части:

 class ScheduledInspectionModel extends Model
{
    protected $table = 'scheduled_inspection';
    protected $fillable = ['name_smp', 'name_control', "verification_start", "verification_end", 'verification_duration'];
    public $timestamps = false;
}
  

Контроллер:

 class OrganizationsImportController extends Controller
{
    public function import(Request $request)
    {
        // return dd($request->file);
        Excel::import(new OrganizationsImport, $request->file);
        return response()->json('Success upload');
    }
}
  

И файл с настройками для импорта:

 class OrganizationsImport implements ToModel
{
    /**
     * @param array $row
     *
     * @return IlluminateDatabaseEloquentModel|null
     */
    public function model(array $row)
    {
        return new ScheduledInspectionModel([
            'name_smp' => $row[0],
            'name_control' => $row[1],
            'verification_start' => $row[2],
            'verification_end' => $row[3],
            'verification_duration' => $row[4],
        ]);
    }
}
  

Пожалуйста, скажите мне, как я могу нужно проверить тип импортируемого файла (нужен только файл .xls)? PS: еще один вопрос, я хотел бы отобразить какое-либо сообщение об успешном импорте или нет. Я в контроллере возвращаю сообщение response () -> json ('Import completed'); как я могу использовать это? PSS: может быть, это как-то пригодится dd($ response); :

 IlluminateHttpUploadedFile {#282
  -test: false
  -originalName: "test.xls"
  -mimeType: "application/vnd.ms-excel"
  -error: 0
  #hashName: null
  path: "/tmp"
  filename: "phpzFcBzS"
  basename: "phpzFcBzS"
  pathname: "/tmp/phpzFcBzS"
  extension: ""
  realPath: "/tmp/phpzFcBzS"
  aTime: 2020-08-25 14:39:02
  mTime: 2020-08-25 14:39:02
  cTime: 2020-08-25 14:39:02
  inode: 318670
  size: 6144
  perms: 0100600
  owner: 1000
  group: 1000
  type: "file"
  writable: true
  readable: true
  executable: false
  file: true
  dir: false
  link: false
}
  

Комментарии:

1. FWIW: security.stackexchange.com/questions/57856 /…

Ответ №1:

Вы можете просто использовать accept атрибут ввода файла.

 <input type="file" name="file" accept=".xls,application/vnd.ms-excel" onChange="..." />
  

Это позволит вам выбирать файлы .xls только при нажатии кнопки.

Комментарии:

1. Да, похоже, он уже разобрался с серверной частью. Я был бы удивлен, если Excel::import() смог импортировать что-то другое, кроме электронной таблицы.

2. Да, имеет смысл. Я бы все же упомянул об опасности для будущих посетителей 🙂

3. Согласен. Проверьте расширение, проверьте тип mime, ограничьте столько, сколько сможете, и все равно никогда не доверяйте. OWASP всегда был хорошим источником для этих тем: owasp.org/www-community/vulnerabilities /…

4. @ficuscr — Все , что ваше приложение отправляет на сервер, является проверкой доверия. Вы не можете гарантировать безопасность всего, что браузер отправляет клиенту. Никакое количество кода Jaavscript или чего-либо еще на клиенте не может этого изменить. Это не поможет с потенциальными проблемами безопасности, это улучшение пользовательского интерфейса. Его серверная часть защищена в силу того, как анализируется файл.