VDS за 300р от нашего партнера SpaceWeb
[2]
26 Июн 2018, 23:10

Как в React сделать поле input file с кнопкой?

Собственно, хотелось бы сделать поле выбора файла в нормальном виде — ни в стандартных ни в material-ui не нашел.

Комментарии (4)
jaga
26 Июн 2018, 23:14
#

примерно так:

<input
accept="image/*"
className={classes.input}
id="raised-button-file"
multiple
type="file" 
/>
<label htmlFor="raised-button-file" className={classes.label}>
<Button variant="contained" color="primary" component="span" className={classes.button}>Upload 
</Button>
</label>

Есть также react-file-input

admin
03 Июл 2018, 08:56
#

Есть еще готовое решение. Node + React.

Асинхронная загрузка файлов, готовое решение NodeJS + React

cinco
17 Июл 2018, 23:33
#

Напишу сюда же: 
Теперь не могу передать файл на api (express). Имя, атрибуты — ок, а как сам файл?

jaga
24 Июл 2018, 20:25
#

С помощью File API

Вот функция обработки формы:


uploadFile(event) {

    var reader = new FileReader(); 
    reader.onload = (function(theFile) { 

        return function(e) {

          axios({
            method: 'post',
            url: 'http://localhost:5000/api/upload/',
            params: {
              name: theFile.name,
              file: e.target.result
            }
          })
          .then(res => console.log(res))
          .catch(err => console.log(err));

        };

      })(event.target.files[0]);

    reader.readAsDataURL(event.target.files[0]); 

  }

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 3627]
[118]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 3056]
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 2831]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 2492]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 2321]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 2305]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 1862]
[1]
13 Фев 2019, 14:23
Как получить значение CSS в javascript
[просмотров 1837]

Вести с Хабра