Click to upload
I am using uploadthing's react dropzone. When I drag and drop on my mac, it works perfectly. When I click on the uploadbutton it never prompts for file selection, but it does do that on mobile.
1 Reply
import React from "react";
import toast from "react-hot-toast";
import { UploadDropzone } from "@uploadthing/react";
import { OurFileRouter } from "~/server/uploadthing";
const UploadComponent = ({
setFiles,
setFileUploadLoading,
}: {
setFiles: React.Dispatch<React.SetStateAction<string[]>>;
setFileUploadLoading: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
return (
<UploadDropzone<OurFileRouter>
className="relative z-50 w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
endpoint="imageUploader"
onClientUploadComplete={(res) => {
// Do something with the response
if (res) {
const filesArr: string[] = [];
res.map((file) => filesArr.push(file.url));
setFiles((prev) => [...filesArr, ...prev]);
}
toast.success("File uploaded!");
setFileUploadLoading(false);
console.log("Files: ", res);
}}
onUploadBegin={() => setFileUploadLoading(true)}
onUploadError={(error: Error) => {
// Do something with the error.
setFileUploadLoading(false);
alert(`ERROR! ${error.message}`);
}}
/>
);
};
export default UploadComponent;
import React from "react";
import toast from "react-hot-toast";
import { UploadDropzone } from "@uploadthing/react";
import { OurFileRouter } from "~/server/uploadthing";
const UploadComponent = ({
setFiles,
setFileUploadLoading,
}: {
setFiles: React.Dispatch<React.SetStateAction<string[]>>;
setFileUploadLoading: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
return (
<UploadDropzone<OurFileRouter>
className="relative z-50 w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
endpoint="imageUploader"
onClientUploadComplete={(res) => {
// Do something with the response
if (res) {
const filesArr: string[] = [];
res.map((file) => filesArr.push(file.url));
setFiles((prev) => [...filesArr, ...prev]);
}
toast.success("File uploaded!");
setFileUploadLoading(false);
console.log("Files: ", res);
}}
onUploadBegin={() => setFileUploadLoading(true)}
onUploadError={(error: Error) => {
// Do something with the error.
setFileUploadLoading(false);
alert(`ERROR! ${error.message}`);
}}
/>
);
};
export default UploadComponent;