Блог

Добрый день,

Я хочу использовать FilePond с Reactjs для облегчения загрузки изображений на сервер.Я хочу, чтобы файл был заполнен в пруду, как показано в описании, а затем появилась кнопка загрузки, чтобы пользователь мог загрузить файл.

Изначально, используя их демонстрационный код, я заметил, что он автоматически загружает файлы, и, прочитав документацию, я вижу, что я отключаю эту функцию автоматической загрузки, используя «instantUpload = {false}» на моем сервере. Однако я сделал это, и у меня все еще нет кнопки загрузки для использования пользователем. Я еще немного прочитал документацию, и они говорят, что мне нужно указать сервер, который у меня есть. Есть ли что-то, чего мне не хватает, чтобы показать кнопку загрузки в моем коде.

Код ниже:

 import React, { Component } from "react";
/*import agent from "superagent";*/
import classNames from "classnames";
import cookie from 'react-cookies';

// Import React FilePond
import { FilePond, registerPlugin } from "react-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";

// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);


export default class FotoUpload extends Component {
  constructor(props) {
   super(props);

   this.state = {
     // Set initial files, type 'local' means this is a file
     // that has already been uploaded to the server (see docs)
     files: [
       {
         source: "index.html",
         options: {
           type: "local"
         }
       }
     ]
   };
 }

 handleInit() {
   console.log("FilePond instance has initialised", this.pond);
 }

 render() {
   return (
     <div className="App">
       {/* Pass FilePond properties as attributes */}
       <FilePond
       ref={ref => (this.pond = ref)}
                  allowFilePoster={true}
                  instantUpload={false}
                  server=
                      {
                        {
                          url: 'http://mybackend.com:5000/upload/images',
                          process: {
                          headers: {
                                'cookie-token':  cookie.load('cookie')
                                  },
                            }
                          }
                        }
                  name="image"
                  acceptedFileTypes={['image/*']}
                  oninit={() => this.handleInit()}
         onupdatefiles={fileItems => {
           // Set currently active file objects to this.state
           this.setState({
             files: fileItems.map(fileItem => fileItem.file)
           });
         }}
       />
     </div>
   );
 }
}
 

Если я разрешу функцию instaupload, файл загрузится, и вернется успех, но я все равно не получу кнопку загрузки.

Myimage

Как вы можете видеть, нет кнопки загрузки, как показано в официальной документации.

Аналогичная проблема
https://github.com/pqina/vue-filepond/issues/5

Документация
FilePond https://pqina.nl/filepond/docs/patterns/api/server /

Официальный репозиторий
https://github.com/pqina/react-filepond