How to implement Select file & drop zone both like react-dropzone #360
Unanswered
MuttakinHasib
asked this question in
Q&A
Replies: 3 comments
-
@yoavniran help me |
Beta Was this translation helpful? Give feedback.
0 replies
-
Here is an issueScreen.Recording.2022-04-21.at.4.25.45.PM.mov |
Beta Was this translation helpful? Give feedback.
0 replies
-
Hey @MuttakinHasib Using a couple more hooks can help solve the issue quickly: 2022-04-24_12-23-52.mp4Here's the updated code to fix the issue you're seeing (see the TODOs inside): export const ItemPreviewWithCrop = withRequestPreSendUpdate(
({ id, url, requestData, updateRequest }) => {
const cropRef = useRef(null);
const [isCropped, setIsCropped] = useState(false);
const [croppedImg, setCroppedImg] = useState(null);
const [lastBatchId, setBatchId] = useState(null);
useItemFinishListener((item) => {
console.log(item.uploadResponse);
setBatchId(null);
}, id); //TODO - use item id to register only for the relevant finish event
useItemStartListener(({ id, batchId }) => {
setBatchId(batchId);
//TODO - store the item's last batch ID so we can cancel if another one starts
});
useBatchAddListener(({ id }) => {
if (lastBatchId && id !== lastBatchId) {
updateRequest(false);
//TODO - cancel the request in case a new batch starts
}
});
const onCropEnd = () => {
setIsCropped(true);
};
const onUpload = useCallback(() => {
const cropper = cropRef.current.cropper;
cropper.getCroppedCanvas().toBlob(async (blob) => {
blob.name = requestData.items[0].file.name;
requestData.items[0].file = blob;
updateRequest({ items: requestData.items });
setCroppedImg(cropper.getCroppedCanvas().toDataURL());
});
}, [requestData, updateRequest]);
return (
<SingleCropContainer>
{!isCropped ? (
<StyledCropper
initialAspectRatio={16 / 9}
autoCrop={true}
aspectRatio={16 / 9}
background={false}
modal={false}
viewMode={1}
zoomable={false}
src={url}
ref={cropRef}
/>
) : (
croppedImg && <PreviewImage src={croppedImg} />
)}
<button onClick={onCropEnd}>Save</button>
{!croppedImg ? (
<button type="button" onClick={onUpload}>
Upload Selection
</button>
) : null}
</SingleCropContainer>
);
}
); This is the sandbox with the full code example - https://codesandbox.io/s/react-uploady-select-or-drop-to-upload-with-crop-p4u2sr?file=/src/App.js |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I implemented this way.. but not working perfectly
Beta Was this translation helpful? Give feedback.
All reactions