-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1153 Dropzone-style file upload component (#1437)
* First pass at a dropzone Cloudinary uploader * Style the progress control and provide more complete flow * Tighten up Dropzone usability * Add id for accessibility * Update Changelog with #1437
- Loading branch information
1 parent
cf214be
commit f95fbca
Showing
9 changed files
with
217 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import axios from "axios" | ||
|
|
||
| interface CloudinaryUploadProps { | ||
| file: File | ||
| onUploadProgress: (progress: number) => void | ||
| cloudName: string | ||
| uploadPreset: string | ||
| tag?: string | ||
| } | ||
|
|
||
| export const CloudinaryUpload = async ({ | ||
| file, | ||
| onUploadProgress, | ||
| cloudName, | ||
| uploadPreset, | ||
| tag = "browser_upload", | ||
| }: CloudinaryUploadProps) => { | ||
| const url = `https://api.cloudinary.com/v1_1/${cloudName}/upload` | ||
| const data = new FormData() | ||
| data.append("upload_preset", uploadPreset) | ||
| data.append("tags", tag) | ||
| data.append("file", file) | ||
|
|
||
| if (!cloudName || cloudName == "" || !uploadPreset || uploadPreset == "") { | ||
| const err = "Please supply a cloud name and upload preset for Cloudinary" | ||
| alert(err) | ||
| throw err | ||
| } | ||
|
|
||
| const response = await axios.request({ | ||
| method: "post", | ||
| url: url, | ||
| data: data, | ||
| onUploadProgress: (p) => { | ||
| onUploadProgress(parseInt(((p.loaded / p.total) * 100).toFixed(0), 10)) | ||
| }, | ||
| }) | ||
| return response | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| .dropzone { | ||
| @apply border-2; | ||
| @apply border-gray-600; | ||
| @apply border-dashed; | ||
| @apply text-center; | ||
| padding: 2.5rem; | ||
| max-width: 32rem; | ||
| cursor: pointer; | ||
|
|
||
| &.is-active { | ||
| @apply bg-accent-cool-light; | ||
| } | ||
| } | ||
|
|
||
| .dropzone__progress { | ||
| max-width: 250px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import * as React from "react" | ||
| import { withKnobs, text } from "@storybook/addon-knobs" | ||
| import { CloudinaryUpload } from "./CloudinaryUpload" | ||
| import { Dropzone } from "./Dropzone" | ||
|
|
||
| export default { | ||
| title: "Forms/Dropzone", | ||
| decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>, withKnobs], | ||
| } | ||
|
|
||
| export const defaultDropzone = () => { | ||
| const [progressValue, setProgressValue] = React.useState(0) | ||
| const [cloudinaryImage, setCloudinaryImage] = React.useState("") | ||
| const cloudName = text("Cloudinary Cloud", "") | ||
| const uploadPreset = text("Upload Preset", "") | ||
|
|
||
| const exampleUploader = (file: File) => { | ||
| CloudinaryUpload({ | ||
| file: file, | ||
| onUploadProgress: (progress) => { | ||
| setProgressValue(progress) | ||
| }, | ||
| cloudName, | ||
| uploadPreset, | ||
| }).then((response) => { | ||
| setProgressValue(100) | ||
| const imgUrl = `https://res.cloudinary.com/${cloudName}/image/upload/w_400,c_limit,q_65/${response.data.public_id}.jpg` | ||
| setCloudinaryImage(imgUrl) | ||
| }) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Dropzone | ||
| id="test-uploading" | ||
| label="Upload File" | ||
| helptext="Select JPEG or PNG files" | ||
| uploader={exampleUploader} | ||
| accept="image/*" | ||
| progress={progressValue} | ||
| /> | ||
| {progressValue == 0 && ( | ||
| <p className="mt-16">(Provide Cloudinary credentials via the Knobs below.)</p> | ||
| )} | ||
| <img src={cloudinaryImage} style={{ width: "200px" }} /> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React, { useCallback } from "react" | ||
| import { useDropzone } from "react-dropzone" | ||
| import { t } from "../helpers/translator" | ||
| import "./Dropzone.scss" | ||
|
|
||
| interface DropzoneProps { | ||
| uploader: (file: File) => void | ||
| id: string | ||
| label: string | ||
| helptext?: string | ||
| accept?: string | string[] | ||
| progress?: number | ||
| className?: string | ||
| } | ||
|
|
||
| const Dropzone = (props: DropzoneProps) => { | ||
| const { uploader } = props | ||
| const classNames = ["field"] | ||
| if (props.className) classNames.push(props.className) | ||
|
|
||
| const onDrop = useCallback( | ||
| (acceptedFiles) => { | ||
| acceptedFiles.forEach((file: File) => uploader(file)) | ||
| }, | ||
| [uploader] | ||
| ) | ||
| const { getRootProps, getInputProps, isDragActive } = useDropzone({ | ||
| onDrop, | ||
| accept: props.accept, | ||
| maxFiles: 1, | ||
| }) | ||
|
|
||
| const dropzoneClasses = ["dropzone", "control"] | ||
| if (isDragActive) dropzoneClasses.push("is-active") | ||
|
|
||
| // Three states: | ||
| // * File dropzone by default | ||
| // * Progress > 0 and < 100 shows a progress bar | ||
| // * Progress 100 doesn't show progress bar or dropzone | ||
| return ( | ||
| <div className={classNames.join(" ")}> | ||
| <label htmlFor={props.id} className="label"> | ||
| {props.label} | ||
| </label> | ||
| {props.helptext && <p className="view-item__label mt-2 mb-4">{props.helptext}</p>} | ||
| {props.progress && props.progress === 100 ? ( | ||
| <></> | ||
| ) : props.progress && props.progress > 0 ? ( | ||
| <progress className="dropzone__progress" max="100" value={props.progress}></progress> | ||
| ) : ( | ||
| <div className={dropzoneClasses.join(" ")} {...getRootProps()}> | ||
| <input id={props.id} {...getInputProps()} /> | ||
| {isDragActive ? ( | ||
| <p>{t("t.dropFilesHere")}</p> | ||
| ) : ( | ||
| <p> | ||
| {t("t.dragFilesHere")} {t("t.or")}{" "} | ||
| <u className="text-primary">{t("t.chooseFromFolder").toLowerCase()}</u> | ||
| </p> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export { Dropzone as default, Dropzone } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters