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 <stanislav@assembla.com>
Co-authored-by: hemanth-3 <98961835+hemanth-3@users.noreply.github.com>
Co-authored-by: gary-singh-filestack <gary.singh@filestack.com>

Author: 4 people

README.md

@@ -237,7 +237,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.

src/config.ts

@@ -18,7 +18,7 @@
 /**
  * @private
  */
-const PICKER_VERSION = '1.27.3';
+const PICKER_VERSION = 'beta';
 
 /**
  * @private

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);
   }

src/lib/api/upload/types.ts

@@ -81,6 +81,8 @@ export interface UploadOptions {
    * @memberof UploadOptions
    */
   tags?: UploadTags;
+
+  altText?: string;
 }
 
 export type StoreUploadOptions = StoreBaseParams & {

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<any>}
    * @memberof Upload
    */
-  async upload(input: InputFile): Promise<any> {
+  async upload(input: InputFile, altText?: string): Promise<any> {
 
     const f = await getFile(input, this.sanitizerOptions);
     f.customName = this.overrideFileName;
+    if (altText) {
+      f.alt = altText;
+    }
+
     this.uploader.addFile(f);
 
     this.startProgressInterval();

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,

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 () => {

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);
   }
 
   /**

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.
    */

src/schema/picker.schema.ts

@@ -439,6 +439,9 @@ export const PickerParamsSchema = {
     useSentryBreadcrumbs: {
       type: 'boolean',
     },
+    useNewTransformer: {
+      type: 'boolean',
+    },
     pasteMode: {
       type: 'object',
       additionalProperties: false,