Как сделать Uploader файлов (React.js)?

Question

[VladimirovJS]

Подскажите, где можно найти готовую реализацию загрузки файла на react

У меня есть окно, в котором ссылка. При нажатии на нее, должно появляться окно, где можно выбрать файл и загрузить его. Так называемый Uploader. при нажатии на "закрыть" файл удаляется. Без drag-in-drop.
Готовые плагины не нужны. Заранее спасибо

Answer 1

[Роман Александрович]

думаю вам должно помоч это https://codepen.io/hartzis/pen/VvNGZP

Comments

[VladimirovJS]

спасибо. а не знаете случайно еще, как реализовать удаление файла? чтобы при нажатии на какую-нибудь кнопку можно было удалить файл

[Роман Александрович]

VladimirovJS: Если удалить выбранный но не загруженный на сервер тогда редактируйте state->file а если файл на сервере то думаю необходимо передавать какой нибудь id и удаление уже ляжет на бэкэнд

[VladimirovJS]

И еще. А если у меня просто текст - span или ссылка. и при клике на нее нужно вызывать окно загрузки. То есть у меня не input и не такая кнопка у которого есть type = file
как тогда быть?

[Роман Александрович]

VladimirovJS: тогда на form навесьте стиль display:none чтобы спрятать форму. так же добавьте на кнопку Upload Image какой нибудь ref. и необходимо на ваш span или ссылку повесить onClick с функцией в которой будет так this.ref.click() для эмитации нажатия на кнопку. Таким образом вы спрячите форму но при этом весь функционал останется рабочим

[VladimirovJS]

Сделал как вы говорите, но что-то не выходит
https://jsfiddle.net/2sawb92n/
где я ошибаюсь?

[Роман Александрович]

VladimirovJS: https://jsfiddle.net/8fkxhsrx/

[VladimirovJS]

пишет что TypeError: Cannot read property 'uploadButton' of null

[Роман Александрович]

VladimirovJS: ну если через ref не хочет работать ну повесьте вы на кнопку id или class и вызовите на чистом js. https://www.w3schools.com/jsref/met_html_click.asp

[VladimirovJS]

ну это плохая практика. хотелось бы через ref

может быть тут что-то не так
48 строка
ref = {(e) => this.uploadButton = e }

[Роман Александрович]

VladimirovJS: давайте вы оформите ваш компонент в любом онлайн редакторе который умеет отображать написанные компоненты и я постараюсь поправить что б всё работало. Но я всё равно не понимаю почему js это плохая практика.

[VladimirovJS]

Роман Александрович: можете скопировать этот код просто в codepen вместо css и js, в тот, что кидали
https://jsfiddle.net/p2v2aa87/

у меня проблема с ним. не могу туда выложить

При клике на ссылку Upload должно октрываться окно загрузки файла, как при клике на кнопку "загрузить файл"

[Роман Александрович]

VladimirovJS: https://codepen.io/anon/pen/oegpeg?editors=0010

[VladimirovJS]

Роман Александрович: не открывается почему-то. перезагружается постоянно.ОО

[Роман Александрович]

VladimirovJS: https://codepen.io/anon/pen/EvaoEB?editors=0010
пробуйте другой браузер

[VladimirovJS]

Роман Александрович: Спасибо большое!

[Роман Александрович]

VladimirovJS: поставьте 1 пост как решение

[VladimirovJS]

Роман Александрович: а есть какая-то функция для удаления полученного файла?

[Роман Александрович]

this.inputElement.value="";
и почистить в state file

[Роман Александрович]

VladimirovJS: https://jsfiddle.net/ujsvutLs/