Search code examples
javascriptnode.jsreactjsnext.jsfile-upload

How to process files (e.g, edit images) before uploading to google drive with `rpldy/drive-uploady `?


I am using rpldy/drive-uploady to upload files to google drive. It works fine. However, I want to give a chance to user to edit the images and then upload. How do I do that?

Here is my current code

import DriveUploady from "drive-uploady";
import { UploadButton } from "@rpldy/upload-button";
...
...
        <DriveUploady
          clientId={CLIENT_ID}
          scope="https://www.googleapis.com/auth/drive.file"
          params={{ parents: [IMG_FOLDER_ID] }}
          accept="image/*"
          multiple>
          <UploadButton />
        </DriveUploady>
...
...

Solution

  • Finally, using useUploady hook from @rpldy/uploady worked like a charm.

    export default function MyImgEditor() {
        const { upload } = useUploady();
        // process file and create blob and then
    ...
    ...
        return(
               ...
               <button
                  onClick={() => {
                    if (blob) {
                      upload(new File([blob], fileName));
                    }
                  }}>
                  Upload
                </button>
       );
    }
    

    Make sure this component is wrapped inside DriveUploady like

    <DriveUploady>
       <MyImgEditor />
    </DriveUploady>