@fortawesome/free-solid-svg-icons#faUpload JavaScript Examples

LoadIcon = <FontAwesomeIcon icon={faUpload} color="#007bff" />

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

Dropzone = ({file, onFileUploaded }) => {

    const [selectedFiles, setSelectedFiles] = useState('');
    const onDrop = useCallback(acceptedFiles => {
        const file = acceptedFiles[0];

        const fileUrl = URL.createObjectURL(file);

        setSelectedFiles(fileUrl);
        onFileUploaded(file);

    }, [onFileUploaded])

    const {getRootProps, getInputProps, isDragActive} = useDropzone({
        onDrop,
        accept: 'image/*'
    })

    return (
        <DropBackground  {...getRootProps()}>
            <input {...getInputProps()} accept="image/*" />
        {/* {
            isDragActive ?
            <p>Drop the files here ...</p> :
            <p>Drag 'n' drop some files here, or click to select files</p>
        } */}
            { selectedFiles || file
                ?
                <div className="image">
                    <img src={!selectedFiles ? `${process.env.REACT_APP_API_URL}/uploads/business/${file}` : selectedFiles
                    } alt="Point File" />
                    <span><FontAwesomeIcon icon={faPencilAlt} /> Alterar</span>
                </div>
                :
                <div className="image-default">
                    <img src={Profile} alt="Point File" />
                    <span><FontAwesomeIcon icon={faUpload} /> Carregar</span>
                </div>
            }

        </DropBackground>
    )
}

AttachmentsDropzone = ({ parentType, parentId, onUploadFinished = null, attachmentId = null }) => {
    const onFileDrop = (newFiles) => {
        setAcceptedFiles(newFiles);
    };

    const {
        getRootProps, getInputProps,
        isDragActive, isDragAccept, isDragReject
    } = useDropzone({ onDrop: onFileDrop });

    const [acceptedFiles, setAcceptedFiles] = useState([]);

    const onUploadButtonClick = ev => {
        const formData = new FormData();
        formData.append('parentType', parentType);
        formData.append('parentId', parentId);
        acceptedFiles.forEach(file => {
            formData.append('attachment[]', file);
        })

        let uri = '/attachments';
        if (attachmentId) {
            formData.append('attachmentId', attachmentId);
            uri = `/attachments/${attachmentId}`;
        }

        secureApiFetch(uri, {
            method: 'POST',
            body: formData
        })
            .then(() => {
                setAcceptedFiles([]);
                if (onUploadFinished) onUploadFinished();
            })
            .catch(err => console.error(err));
    }

    const style = useMemo(() => ({
        ...baseStyle,
        ...(isDragActive ? activeStyle : {}),
        ...(isDragAccept ? acceptStyle : {}),
        ...(isDragReject ? rejectStyle : {})
    }), [
        isDragActive,
        isDragAccept,
        isDragReject
    ]);

    return (
        <div className="container">
            <div {...getRootProps({ style })}>
                <input {...getInputProps()} />
                <p>Drag and drop some files here, or click to select files</p>
            </div>
            <aside>
                {acceptedFiles.length === 0 && <div>(upload list empty)</div>}
                {acceptedFiles.length > 0 && <List spacing={3}>{acceptedFiles.map(file => (
                    <ListItem key={file.path}>
                        <FontAwesomeIcon color='var(--primary-color)' icon={faUpload} /> {file.path} - {file.size} bytes
                    </ListItem>
                ))}</List>}
            </aside>
            <hr />
            <PrimaryButton onClick={onUploadButtonClick} disabled={acceptedFiles.length === 0}>Upload file(s)</PrimaryButton>
        </div>
    );
}

UploadFile = ({ className, formRef }) => {
  const { selectedLayout, playlist, project } = useSelector((state) => state.myactivities);
  const imgUpload = useRef();
  const dispatch = useDispatch();
  const currikiUtility = classNames('curriki-utility-uploadfile', className);
  const setH5pFileUpload = (e) => {
    e.preventDefault();
    formRef.current.handleSubmit();
    const h5pFile = e.target.files[0];
    const fileArr = h5pFile.name.split('.');
    const fileExtension = fileArr.length > 0 ? fileArr[fileArr.length - 1] : '';
    if (fileExtension !== 'h5p') {
      Swal.fire('Invalid file selected, kindly select h5p file.');
      return true;
    }
    const submitAction = 'upload';
    const payload = {
      e,
      submitAction,
      h5pFile,
    };
    console.log(formRef.current.values, 'upload file');
    dispatch(createResourceByH5PUploadAction(playlist.id, selectedLayout?.h5pLib, 'h5p', payload, formRef.current.values, project));
  };
  return (
    <>
      <div className={currikiUtility}>
        <div className="uploadfile-box">
          <div className="drop-area">
            <button
              type="button"
              onClick={() => {
                formRef.current.handleSubmit();
                if (formRef.current.values.title && formRef.current.values.title.length < 255) {
                  imgUpload.current.click();
                }
              }}
            >
              <FontAwesomeIcon icon={faUpload} className="curriki_btn-mr-2" />
              Select File
            </button>
            <input
              type="file"
              name="h5p_file"
              id="h5p-file"
              className="laravel-h5p-upload form-control"
              onChange={(e) => {
                formRef.current.handleSubmit();
                if (formRef.current.values.title && formRef.current.values.title.length < 255) {
                  setH5pFileUpload(e);
                }
              }}
              ref={imgUpload}
              style={{
                cursor: 'pointer',
                background: '#F1F1F1',
                padding: '160px 41px 0px 41px',
                borderRadius: '8px',
                border: 'none',
              }}
              onClick={(e) => {
                e.target.value = '';
              }}
            />
            <div className="upload-holder">
              <img src={UploadImg} alt="upload" className="mr-2" />
              <p>
                Drag & drop file or &nbsp;
                <span style={{ color: '#2e8df5' }}>browse</span>
                &nbsp;to upload
              </p>
            </div>
          </div>
        </div>
        {/* <div className="upload-btn">
          <Buttons
            text="upload"
            primary={true}
            width="142px"
            height="35px"
            hover={true}
          />
        </div> */}
      </div>
    </>
  );
}

render() {
    const { looseFilesIsDisplayed } = this.state;

    const {
      closePath, filterFunc, idToken, looseFileList, moveExternal,
      moveWithin, openFolder, openFolderList, refreshFunc, removeFunc, sortFunc,
      topLevelFolderList, updatePath, userId,
    } = this.props;

    const { name, email, picture } = parseIDToken(idToken);
    const createFunc = loadAuthParam(email, this.create);
    return (
      <ContextMenuTrigger className="user" id={userId.toString()}>
        <button
          type="button"
          className="user-banner"
          onClick={() => this.viewToggle()}
          onKeyDown={() => this.viewToggle()}
        >
          <img className="profile-picture" src={picture} alt="Account profile" />
          <span className="profile-text">
            {' '}
            <span className="profile-name">{name}</span>
            {' '}
            <span className="profile-email">
              (
              {email}
              )
            </span>
          </span>
          <ContextMenuTrigger className="context-menu" id={userId.toString()} holdToDisplay={0}>
            <FontAwesomeIcon className="fa-ellipsis menu-icon" icon={faEllipsisV} size="lg" onClick={(event) => this.handleIconClick(event, () => {})} title="Options" />
          </ContextMenuTrigger>
        </button>
        <ContextMenu className="context-menu" id={userId.toString()}>
          <MenuItem className="menu-item upload">
            <SubMenu
              className="context-menu sub-menu-upload"
              title={
              (
                <span>
                  <FontAwesomeIcon className="fa-plus menu-icon" icon={faPlus} onClick={(event) => this.handleIconClick(event, () => {})} />
                  Create New...
                </span>
              )
            }
            >
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.folder', 'New Folder')}>
                <FontAwesomeIcon className="fa-folder menu-icon" icon={faFolderPlus} />
                Folder
              </MenuItem>
              <hr className="divider" />
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.document', 'New Doc')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.document" alt="Google Doc icon" />
                Google Doc
              </MenuItem>
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.spreadsheet', 'New Sheet')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.spreadsheet" alt="Google Speardsheet icon" />
                Google Sheets
              </MenuItem>
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.presentation', 'New Presentation')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.presentation" alt="Google Slides icon" />
                Google Slides
              </MenuItem>
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.form', 'New Form')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.form" alt="Google Forms icon" />
                Google Forms
              </MenuItem>
            </SubMenu>
          </MenuItem>
          <label htmlFor={email}>
            <MenuItem className="menu-item">
              <FontAwesomeIcon className="fa-upload menu-icon" icon={faUpload} />
              <input
                type="file"
                id={email}
                className="file-input"
                onChange={(e) => this.uploadController(e, idToken)}
                multiple
              />
              Upload
            </MenuItem>
          </label>
          <MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => this.toggleLoose())}>
            <FontAwesomeIcon className="fa-eye-slash menu-icon" icon={(looseFilesIsDisplayed) ? faEyeSlash : faEye} />
            Toggle Folder View
          </MenuItem>
          <MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => refreshFunc(userId))}>
            <FontAwesomeIcon className="fa-sync menu-icon" icon={faSyncAlt} />
            Refresh Account
          </MenuItem>
          <MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => removeFunc(userId))}>
            <FontAwesomeIcon className="fa-trash menu-icon" icon={faTrash} />
            Remove Account
          </MenuItem>
        </ContextMenu>
        <div style={{ display: 'none' }} className="Files/Folders" ref={this.props.forwardRef}>
          <Filters
            filterFunc={filterFunc}
            sortFunc={sortFunc}
            userId={userId}
          />
          <TopLevelFolderList
            email={email}
            userId={userId}
            topLevelFolderList={topLevelFolderList}
            shareFile={loadAuthParam(email, this.shareFile)}
            moveWithin={moveWithin}
            moveExternal={moveExternal}
            refreshFunc={refreshFunc}
            openFolder={openFolder}
          />
          <OpenFolderList
            email={email}
            userId={userId}
            openFolderList={openFolderList}
            shareFile={loadAuthParam(email, this.shareFile)}
            moveWithin={moveWithin}
            moveExternal={moveExternal}
            refreshFunc={refreshFunc}
            openFolder={openFolder}
            closePath={closePath}
            updatePath={updatePath}
          />
          {looseFilesIsDisplayed && (
            <LooseFileList
              email={email}
              userId={userId}
              looseFileList={looseFileList}
              shareFile={loadAuthParam(email, this.shareFile)}
              moveWithin={moveWithin}
              moveExternal={moveExternal}
              refreshFunc={refreshFunc}
            />
          )}
        </div>
      </ContextMenuTrigger>
    );
  }