Skip to content

Commit

Permalink
fixup! Docs(web-react): Add FileUploader demo #DS-896
Browse files Browse the repository at this point in the history
  • Loading branch information
pavelklibani committed Sep 6, 2023
1 parent 270abf3 commit ccf815b
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 4 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { base64ToByteArray, image2Base64Preview } from '../utils';

const base64 = 'SGVsbG8gd29ybGQ=';
const blob = new Uint8Array([72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]);

describe('image2Base64Preview', () => {
it('should convert image file to base64 string', () => {
const file = new File([blob], 'image.jpg', {
type: 'image/jpeg',
});

image2Base64Preview(file, 100, (base64Preview) => {
expect(base64Preview).toBeDefined();
expect(base64Preview).toBe(base64);
});
});
});

describe('base64ToByteArray', () => {
it('should convert a base64 string to a byte array', () => {
const result = base64ToByteArray(base64);

expect(result).toEqual(blob);
});
});
3 changes: 0 additions & 3 deletions packages/web-react/src/components/FileUploader/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,3 @@ export const DEFAULT_ERROR_MESSAGE_UNSUPPORTED_FILE = 'This file type is not sup
export const DEFAULT_ICON_NAME = 'file';
export const DEFAULT_BUTTON_LABEL = 'Remove';
export const DEFAULT_EDIT_BUTTON_LABEL = 'Edit';

export const DEMO_ATTACHMENT_BASE64_IMAGE =
'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';
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { DEMO_ATTACHMENT_BASE64_IMAGE } from '../constants';
import { DEMO_ATTACHMENT_BASE64_IMAGE } from './constants';
import { base64ToByteArray } from '../utils';
import { FileUploaderAttachment as FileUploaderAttachmentComponent, useFileQueue } from '..';

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const DEMO_ATTACHMENT_BASE64_IMAGE =
'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';

0 comments on commit ccf815b

Please sign in to comment.