bytescale / bytescale-javascript-sdk Goto Github PK

Version

+     "@bytescale/sdk": "^3.31.1",

I am attempting to upload a small png file with this snippet using TypeScript and Node.js version 20

// upload.ts
import * as Bytescale from "@bytescale/sdk";
import * as fs from 'fs'
import nodeFetch from "node-fetch";

const uploadManager = new Bytescale.UploadManager({
  fetchApi: nodeFetch as any,
  apiKey: 'i have tried using my secret key and public key, both give same error'
});

export const uploadFileFromPath = async (filePath: string): Promise<string> => {
    const data = fs.readFileSync(filePath)
    console.log({ data }) // file does exist is and is a buffer. 

    try {
        const res = await uploadManager.upload({
            data,
            mime: 'image/png',
            originalFileName: filePath,
        })

        return res.fileUrl
    } catch (err) {
        console.error(err)
    }
}

const start = async () => {
    const fileUrl = await uploadFileFromPath('./1707182041670-10.png')
    console.log({ fileUrl })
}
start()

node --loader ts-node/esm ./upload.ts

I am getting the following error:

Error: Failed to upload part (403).
    at file:///Users/zact/Projects/scourz/application/node_modules/@bytescale/sdk/dist/node/esm/main.mjs:2222:19
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I cannot find any documentation about the errors, I am unsure if the 403 means that my API KEY or ACCESS is wrong but the error says 'failed to upload part' so maybe my request body is wrong?

Dear upload-js maintainers,
Thank you for your contribution to the open-source community.

This issue was automatically created to inform you a new version (1.48.18) of upload-js was published without a matching tag in this repo.

As part of our efforts to fight software supply chain attacks, we would like to verify this release is known and intended, and not a result of an unauthorized activity.

If you find this behavior legitimate, kindly close and ignore this issue. Read more

Please can you make content-disposition use inline instead of attachment?

I've noticed my images force-download when accessing them: with inline that won't be the case.

Version

"@bytescale/sdk": "^3.34.0"

Description

I am trying to handle authentication to upload and fetch the files, but the fetching of the file doesn't seem to be working as a I get a 400 bad request when trying to display the image with <img src={url} />

We start by authenticating using the AuthManager

await bytescale.AuthManager.beginAuthSession({
  accountId: "ACCOUNT_ID",
  authUrl: "AUTHENTICATION_URL",
  authHeaders: () => Promise.resolve({}),
});

We then upload an image using the upload manager

const uploadManager = new bytescale.UploadManager({
  apiKey: publicKey,
})

const response = await uploadManager.upload({
  data: file,
  path: {
    folderPath: "/",
    fileName: getFileName(),
  },
});

This response contains the fileUrl, which we directly use to display the image:

function Image({ response }: { response: { fileUrl: string } }) {
  if (!fileUrl) return null;

  return <img src={fileUrl} alt="test" />
}

Current result

The upload works as expected, I can indeed find my image in the Bytescale dashboard. The upload is protected by JWT so I can confirm that the JWT authentication works as expected.

The GET image request does not work, I receive the following response:

Note that we can see the JWT is indeed used to get the image through the cookie.

The response tab displays the following message: "Failed to load response data: No data found for resource with given identifier"

Expected result

The image is displayed after it got uploaded

Am I maybe missing something?

Same as bytescale/bytescale-upload-widget#1

The progress smoothing functionally will actually be implemented by Upload.js (which Uploader uses internally).

Is it possible for Upload.js to crop images?

I've read the documentation but couldn't find anything -- presumably it would start with me prompting the user for some image cropping dimensions, and then associating them with the uploaded image somehow (but I'm just guessing). Does Upload.js / upload.io support it?

Appreciate any help! 🙏

There should be examples in the README.md on how to transform files.

(Even if this is just GIFs recorded from the Upload Dashboard.)

Hello, I am trying to cancel uploads. From what I read in the documentation, I should be using cancellationToken: { isCancelled: false }, but I can't find a way to make this work.

The issue is that I am trying to pass a dynamic value to the isCancelled parameter, which is not being listened to. Here is an example of what I tried, which is not working.

let shouldBeCancelled = false;
setTimeout(() => {
    shouldBeCancelled = true;
}, 2000);

await uploadManager.upload({
    ...otherProperties,
    cancellationToken: {
        isCancelled: shouldBeCancelled,
    },
})

You can find the non working example in this Codepen.

Is there maybe another way to trigger the cancel of an ongoing upload that I missed in the documentation?

Thanks for your help!

It would be good to have an example that doesn't require any DOM elements.

If possible, this example could construct a simple text file in memory, and then call uploadFile.

This would provide something usable on RunKit (which NPM links off to on each package's page).

I'm trying to use the upload-js-full SDK in a Next.js 13 application. ("next": "^13.4.2",)

I'm seeing the following error:

Uncaught TypeError: Object.defineProperty called on non-object
    at Function.defineProperty (<anonymous>)
    at __webpack_require__.r (webpack.js?ts=1686572445609:205:21)
    at eval (main.mjs:1:21)
    at ./node_modules/.pnpm/[email protected]/node_modules/upload-js-full/dist/browser/esm/main.mjs (manage.js?ts=1686572445609:46870:1)
    at options.factory (webpack.js?ts=1686572445609:661:31)
    at __webpack_require__ (webpack.js?ts=1686572445609:37:33)
    at fn (webpack.js?ts=1686572445609:316:21)
    at eval (upload.ts:8:72)
    at ./src/utils/upload.ts (manage.js?ts=1686572445609:46689:1)
    at options.factory (webpack.js?ts=1686572445609:661:31)
    at __webpack_require__ (webpack.js?ts=1686572445609:37:33)
    at fn (webpack.js?ts=1686572445609:316:21)
    at eval (ManageListing.tsx:18:71)
    at ./src/components/pages/owners/listings/ManageListing.tsx (manage.js?ts=1686572445609:46645:1)
    at options.factory (webpack.js?ts=1686572445609:661:31)
    at __webpack_require__ (webpack.js?ts=1686572445609:37:33)
    at fn (webpack.js?ts=1686572445609:316:21)
    at eval (manage.tsx:8:105)
    at ./src/pages/owners/listings/[id]/manage.tsx (manage.js?ts=1686572445609:46678:1)
    at options.factory (webpack.js?ts=1686572445609:661:31)
    at __webpack_require__ (webpack.js?ts=1686572445609:37:33)
    at fn (webpack.js?ts=1686572445609:316:21)
    at eval (?d8e5:5:16)
    at eval (route-loader.js:230:51)

I may be wrong but it appears to be we webpack error that's happening at the point of importing the dependency. This is a complete blocker for using the SDK.

Any ideas what is causing the issue?

For reference, the minimal upload-js SDK does work as expected, however I need the full SDK as I want access to more SDK actions and want use it on both the client and server.

Environment: SvelteKit + Vercel

Method 1

This one is from upload-js documentation. Works in development, doesn't work in production

import { Upload } from "upload-js";

const upload = Upload({ apiKey: * });

Error:

file:///var/task/.svelte-kit/output/server/entries/pages/_page.svelte.js:5
import { Upload } from "upload-js";
         ^^^^^^
SyntaxError: Named export 'Upload' not found. The requested module 'upload-js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'upload-js';
const { Upload } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Method 2

Works in development, doesn't work in production

import * as UploadJS from 'upload-js';
const { Upload } = UploadJS;

const upload = Upload({ apiKey: * });

Error:

TypeError: Upload is not a function
    at file:///var/task/.svelte-kit/output/server/entries/pages/_page.svelte.js:132:3
    at Object.$$render (file:///var/task/.svelte-kit/output/server/chunks/index2.js:187:18)
    at Object.default (file:///var/task/.svelte-kit/output/server/chunks/internal.js:69:98)
    at file:///var/task/.svelte-kit/output/server/entries/pages/_layout.svelte.js:18:33
    at Object.$$render (file:///var/task/.svelte-kit/output/server/chunks/index2.js:187:18)
    at file:///var/task/.svelte-kit/output/server/chunks/internal.js:58:101
    at $$render (file:///var/task/.svelte-kit/output/server/chunks/index2.js:187:18)
    at Object.render (file:///var/task/.svelte-kit/output/server/chunks/index2.js:195:20)
    at render_response (file:///var/task/.svelte-kit/output/server/index.js:1739:34)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Method 3

Works in both production and development.

import UploadJS from 'upload-js';
const { Upload } = UploadJS;

const upload = Upload({ apiKey: * });