text: import React, {useState, useEffect} from 'react';
  import ReactDOM from 'react-dom';
  import Modal from 'react-modal';
  
  import Button from '../../default_components/Button/Button';
  import { FileUploader } from "react-drag-drop-files";
  import close from '../../../../images/default/close.svg';
  
  import './AddMedia.scss';
  
  function AddMedia() {
  
      const csrfToken = $('meta[name="csrf-token"]').attr('content');
      const [modalIsOpen, setModalOpen] = useState(true);
  
      const [file, setFile]           = useState(null);
      const [fileName, setFileName]   = useState(null);
      const [error, setError]         = useState(false);
      const [category, setCategory]   = useState(null);
  
      const handleUpload = event => {
          setFileName(event.target.files[0]["name"]);
          setFile(URL.createObjectURL(event.target.files[0]));
      };
  
      const handleCategoryInput = event => {
          setCategory(event.target.value);
      }
      
  
      function closeModal() {
          
          window.location.replace("/admin/media");
      }
  
      const customStyles = {
          content: {
            top: '50%',
            left: '50%',
            right: 'auto',
            bottom: 'auto',
            marginRight: '-50%',
            transform: 'translate(-50%, -50%)',
          },
      };
  
      $.ajaxSetup({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
  
      const handleSubmit = event => {
          event.preventDefault();
          var formData = new FormData(this);
          formData.append('category', category);
          formData.append('files', $('input[type=file]')[0].files[0]); 
          $.ajax({
              type:'POST',
              url: "/admin/media",
              data: formData,
              cache:false,
              contentType: false,
              processData: false,
              success: (data) => {
                  //this.reset();
                  window.location.href = "/admin/media";
                  console.log("here");
              },
              error: function(data){
                  setError(true);
                  setTimeout(() => {
                      setError(false);
                  }, 5000);
              }
          });
      }
  
      const removeImagePreview = () => {
          setFile(null);
          setFileName(null);
      }
  
      return(
          <div className="">
              <div id="" className="col-md-12">
                  <div className="bg-white px-3 d-flex justify-content-between" id="login-inputs-container">
  
                      <Modal
                          isOpen={modalIsOpen}
                          onRequestClose={closeModal}
                          style={customStyles}
                          contentLabel="Example Modal"
                          ariaHideApp={false}
                      >
                          <div className="container mb-3">
                              <h3>Add media files</h3>
                              <span>Recommended media size &lt;2MB </span>
                          </div>
  
                          <form className="container" encType="multipart/form-data" id="someform" onSubmit={handleSubmit}>
                              <div className="row">
                                  <label className="sc-bdfBQB hyiOnG drop_area drop_zone">
                                      
                                      <input type="file" name="files[]" onChange={handleUpload} style={{opacity:"0", width:"0"}}/>
                                          {file === null ? 
                                              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.33317 6.66667H22.6665V16H25.3332V6.66667C25.3332 5.196 24.1372 4 22.6665 4H5.33317C3.8625 4 2.6665 5.196 2.6665 6.66667V22.6667C2.6665 24.1373 3.8625 25.3333 5.33317 25.3333H15.9998V22.6667H5.33317V6.66667Z" fill="#0658C2"></path><path d="M10.6665 14.6667L6.6665 20H21.3332L15.9998 12L11.9998 17.3333L10.6665 14.6667Z" fill="#0658C2"></path><path d="M25.3332 18.6667H22.6665V22.6667H18.6665V25.3333H22.6665V29.3333H25.3332V25.3333H29.3332V22.6667H25.3332V18.6667Z" fill="#0658C2"></path></svg>
                                              :
                                              <div className="sc-dlfnuX gqGyLE">
                                                  <span className="file-types mx-auto">{fileName}</span>
                                              </div>
                                          }
                                  </label>
                              </div>
                              {file === null ?
                                  null
                                  :
                                  <div className="container my-3 mx-auto d-flex">
                                      <img src={file} style={{maxHeight:"400px", margin:"0 auto"}} />
                                      <div className="delete-preview-image" onClick={removeImagePreview}>
                                          <img src={close} width="30px" height="30px" />
                                      </div>
                                  </div>
                                  
                              }
                              <div className="my-3 herald-input-custom-container">
                                  {file === null ? 
                                  <>
                                      <input type="text" className="herald-input-custom-padding w-25 mb-3 px-3" placeholder="Category" disabled></input>
                                      <input type="submit" className="form-submit-btn btn-blue w-25" value="Submit" disabled></input>
                                  </>
                                  :
                                  <>
                                      <input type="text" className="herald-input-custom-padding w-25 mb-3 px-3" placeholder="Category" name="media-category" onKeyUp={handleCategoryInput}></input>
                                      <input type="submit" className="form-submit-btn btn-blue w-25" value="Submit" ></input>
                                  </>
                                  }
  
                              </div>
                              {error ? <div className="alert alert-danger" role="alert">Something went wrong. Could not upload file. Please try again.</div> : null}
                          </form>
  
                          <div className="close-container" onClick={closeModal}>
                              <img src={close} width="18px" height="18px" />
                          </div>
  
                      </Modal>
                  </div>
              </div>
          </div>
  
      );
      
  }
  
  export default AddMedia;
  
  if (document.getElementById('admin-add-media-page')) {
      ReactDOM.render(<AddMedia />, document.getElementById('admin-add-media-page'));
  }
  