From 0b00262f6150cf8b1bb1addd00510cf3417b4b56 Mon Sep 17 00:00:00 2001 From: Stanislav K Date: Fri, 19 Apr 2024 21:38:49 +0300 Subject: [PATCH] FS-8673 Add alt text to images (#550) * FS-8673 Add alt text to images * updated the branch name * Fix failing spec * Switch picker version to beta * update build branch * add log * update picker version * update version to beta * add log * add alt to response interface * cleanup and final commit * clean up * Add useNewTransformer * Update README.md --------- Co-authored-by: Stanislav Kolotinskiy Co-authored-by: hemanth-3 <98961835+hemanth-3@users.noreply.github.com> Co-authored-by: gary-singh-filestack --- .github/workflows/deploy_beta.yml | 2 +- README.md | 1 - src/config.ts | 3 +-- src/lib/api/upload/file.ts | 2 ++ src/lib/api/upload/types.ts | 2 ++ src/lib/api/upload/upload.ts | 7 ++++++- src/lib/api/upload/uploaders/s3.ts | 3 ++- src/lib/client.spec.ts | 27 +++++++++++++++++++++++++-- src/lib/client.ts | 2 +- src/lib/picker.ts | 8 ++++++++ src/schema/picker.schema.ts | 3 +++ src/schema/upload.schema.ts | 4 ++++ 12 files changed, 55 insertions(+), 9 deletions(-) diff --git a/.github/workflows/deploy_beta.yml b/.github/workflows/deploy_beta.yml index aff5a826..f53053ed 100644 --- a/.github/workflows/deploy_beta.yml +++ b/.github/workflows/deploy_beta.yml @@ -1,7 +1,7 @@ name: filestack-js-beta on: push: - branches: [ develop ] + branches: [ sc-add-alt-text ] jobs: build: runs-on: ubuntu-latest diff --git a/README.md b/README.md index 015f7dd9..7d7cd45c 100644 --- a/README.md +++ b/README.md @@ -239,7 +239,6 @@ If you're using [Sentry](https://sentry.io/welcome/) to monitor your application ## Versioning We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags](https://github.com/filestack/filestack-js/tags) on this repository. - ## Contributing We follow the [conventional commits](https://conventionalcommits.org/) specification to ensure consistent commit messages and changelog formatting. diff --git a/src/config.ts b/src/config.ts index 4fb1bdd8..4570b941 100644 --- a/src/config.ts +++ b/src/config.ts @@ -18,8 +18,7 @@ /** * @private */ -const PICKER_VERSION = '1.26.2'; - +const PICKER_VERSION = 'beta'; /** * @private */ diff --git a/src/lib/api/upload/file.ts b/src/lib/api/upload/file.ts index 2e2360d6..7abd6645 100644 --- a/src/lib/api/upload/file.ts +++ b/src/lib/api/upload/file.ts @@ -79,6 +79,8 @@ export class File { public uploadTags: UploadTags; + public alt: string; + constructor(private readonly _file: FileInstance, private readonly _sanitizeOptions?: SanitizeOptions) { this._file.name = sanitizeName(this._file.name, this._sanitizeOptions); } diff --git a/src/lib/api/upload/types.ts b/src/lib/api/upload/types.ts index 1c927303..9414a3d6 100644 --- a/src/lib/api/upload/types.ts +++ b/src/lib/api/upload/types.ts @@ -81,6 +81,8 @@ export interface UploadOptions { * @memberof UploadOptions */ tags?: UploadTags; + + altText?: string; } export type StoreUploadOptions = StoreBaseParams & { diff --git a/src/lib/api/upload/upload.ts b/src/lib/api/upload/upload.ts index 6ae39da9..a91b2cd8 100644 --- a/src/lib/api/upload/upload.ts +++ b/src/lib/api/upload/upload.ts @@ -199,13 +199,18 @@ export class Upload extends EventEmitter { * Upload single file * * @param {(InputFile)} file + * @param {(string)} altText * @returns {Promise} * @memberof Upload */ - async upload(input: InputFile): Promise { + async upload(input: InputFile, altText?: string): Promise { const f = await getFile(input, this.sanitizerOptions); f.customName = this.overrideFileName; + if (altText) { + f.alt = altText; + } + this.uploader.addFile(f); this.startProgressInterval(); diff --git a/src/lib/api/upload/uploaders/s3.ts b/src/lib/api/upload/uploaders/s3.ts index 24c05669..b7a49195 100644 --- a/src/lib/api/upload/uploaders/s3.ts +++ b/src/lib/api/upload/uploaders/s3.ts @@ -212,6 +212,7 @@ export class S3Uploader extends UploaderAbstract { location_url: payload.location_url, upload_id: payload.upload_id, region: payload.region, + alt: payload.file.alt, }; if (this.uploadMode === UploadMode.INTELLIGENT || (this.uploadMode === UploadMode.FALLBACK && fiiFallback)) { @@ -687,7 +688,7 @@ export class S3Uploader extends UploaderAbstract { return FsRequest.post( `${this.getUploadUrl(id)}/multipart/complete`, { - ...this.getDefaultFields(id, ['apikey', 'policy', 'signature', 'uri', 'region', 'upload_id', 'fii'], true), + ...this.getDefaultFields(id, ['apikey', 'policy', 'signature', 'uri', 'region', 'upload_id', 'fii', 'alt'], true), // method specific keys filename: payload.file.name, mimetype: payload.file.type, diff --git a/src/lib/client.spec.ts b/src/lib/client.spec.ts index a85f2125..1ce54591 100644 --- a/src/lib/client.spec.ts +++ b/src/lib/client.spec.ts @@ -210,7 +210,30 @@ describe('client', () => { expect(Upload.prototype.setToken).toHaveBeenCalledWith(token); expect(Upload.prototype.setSecurity).toHaveBeenCalledWith(defaultSecurity); - expect(Upload.prototype.upload).toHaveBeenCalledWith(file); + expect(Upload.prototype.upload).toHaveBeenCalledWith(file, undefined); + }); + + it('should be able to upload file with alt text', async () => { + const client = new Client(defaultApikey); + const file = 'anyFile'; + const uploadOptions = { + altText: 'alt', + }; + const storeOptions = {}; + const token = {}; + + jest.spyOn(Upload.prototype, 'upload').mockImplementation(() => Promise.resolve()); + + await client.upload(file, uploadOptions, storeOptions, token, defaultSecurity); + + expect(Upload.prototype.setSession).toHaveBeenCalledWith({ + apikey: defaultApikey, + urls: sessionURls, + }); + + expect(Upload.prototype.setToken).toHaveBeenCalledWith(token); + expect(Upload.prototype.setSecurity).toHaveBeenCalledWith(defaultSecurity); + expect(Upload.prototype.upload).toHaveBeenCalledWith(file, uploadOptions.altText); }); it('should be able to upload file without token and security', async () => { @@ -228,7 +251,7 @@ describe('client', () => { urls: sessionURls, }); - expect(Upload.prototype.upload).toHaveBeenCalledWith(file); + expect(Upload.prototype.upload).toHaveBeenCalledWith(file, undefined); }); it('should emit error', async () => { diff --git a/src/lib/client.ts b/src/lib/client.ts index d0ae40da..5e3869f6 100644 --- a/src/lib/client.ts +++ b/src/lib/client.ts @@ -475,7 +475,7 @@ export class Client extends EventEmitter { this.emit('upload.error', e); }); - return upload.upload(file); + return upload.upload(file, options.altText); } /** diff --git a/src/lib/picker.ts b/src/lib/picker.ts index 30a87d72..1c2bd962 100644 --- a/src/lib/picker.ts +++ b/src/lib/picker.ts @@ -155,6 +155,10 @@ export interface PickerFileMetadata { * The Filestack CDN URL for the uploaded file. */ url: string; + /** + * Alt text for images + */ + alt: string; } export interface CustomAuthTextOptions { @@ -683,6 +687,10 @@ export interface PickerOptions { * Specify options for images passed to the crop UI. */ transformations?: PickerTransformationOptions; + /** + * Whether to use the new transformations UI. Defaults to `false`. + */ + useNewTransformer?: boolean; /** * Options for local file uploads. */ diff --git a/src/schema/picker.schema.ts b/src/schema/picker.schema.ts index 34dd60bc..1eeb7daa 100644 --- a/src/schema/picker.schema.ts +++ b/src/schema/picker.schema.ts @@ -439,6 +439,9 @@ export const PickerParamsSchema = { useSentryBreadcrumbs: { type: 'boolean', }, + useNewTransformer: { + type: 'boolean', + }, pasteMode: { type: 'object', additionalProperties: false, diff --git a/src/schema/upload.schema.ts b/src/schema/upload.schema.ts index fc964ded..8620fb54 100644 --- a/src/schema/upload.schema.ts +++ b/src/schema/upload.schema.ts @@ -81,5 +81,9 @@ export const UploadParamsSchema = { maxlength: 256, }, }, + altText: { + type: ['string', 'null'], + maxLength: 60, + }, }, };