Skip to main content

​
SyncsnapUploadButton

SyncsnapUploadButton is an all-in-one component: a button that opens a dialog with a QR code. When the user clicks the button, a job is created and the QR code is shown; the hook then calls your backend’s wait endpoint (the server polls until the job completes or fails). When done, your onCompleted(job, result) runs with the server’s result.

​
Basic usage

import { SyncsnapUploadButton } from "@syncsnap/react";

<SyncsnapUploadButton buttonText="Scan to upload" />
Clicking the button creates a job, opens the dialog, and shows the QR code. When the user uploads from their phone, the server waits for completion and returns a result; your onCompleted(job, result) receives it (e.g. a custom payload from your server’s onCompleted callback or the presigned download URL).

​
Props

All useSyncsnapJob options are supported (e.g. createJobUrl, getJobUrl, getWaitForCompletionUrl, waitTimeoutMs, waitIntervalMs, onCompleted). In addition:
PropTypeDefaultDescription
buttonTextstring"Start upload"Label of the trigger button.
classNamestring—Applied to the wrapper div.
qrSizenumber240QR code size in pixels.
qrBaseUrlstring—Base URL for the upload page (see createUploadUrl). Overrides default https://upload.syncsnap.xyz/.
errorCorrectionLevel"L" | "M" | "Q" | "H""M"QR code error correction level.

​
Callbacks

Pass the same callbacks as useSyncsnapJob: 
<SyncsnapUploadButton
  buttonText="Generate QR"
  onJobCreated={(job) => console.log("Job created:", job.id)}
  onCompleted={(job, result) => {
    // result is whatever your server onCompleted returned
    if (result && typeof result === "object" && "downloadUrl" in result) {
      window.open((result as { downloadUrl: string }).downloadUrl);
    }
  }}
  onError={(err) => console.error(err)}
/>

​
Custom API paths

If your API is not under /api/syncsnap/job: 
<SyncsnapUploadButton
  createJobUrl="/api/transfer/job"
  getJobUrl={(id) => `/api/transfer/job/${id}`}
  getWaitForCompletionUrl={(id) => `/api/transfer/job/${id}/wait`}
  buttonText="Scan to upload"
/>

​
Wait timeout and interval

Defaults: server waits up to 2 minutes, polling every 2 seconds. Override as needed: 
<SyncsnapUploadButton
  waitTimeoutMs={60000}
  waitIntervalMs={3000}
  buttonText="Scan to upload"
/>

​
Building your own UI

If you prefer not to use the button + dialog, use SyncsnapQrCode and useSyncsnapJob to create jobs and show the QR code in your own layout.