diff --git a/packages/storybook/stories/va-file-input-uswds.stories.jsx b/packages/storybook/stories/va-file-input-uswds.stories.jsx index b7b617e17..3ad688dfb 100644 --- a/packages/storybook/stories/va-file-input-uswds.stories.jsx +++ b/packages/storybook/stories/va-file-input-uswds.stories.jsx @@ -1,6 +1,6 @@ /* eslint-disable react/prop-types */ import React, { useState } from 'react'; -import {VaFileInput} from '@department-of-veterans-affairs/web-components/react-bindings'; +import {VaFileInput, VaButton} from '@department-of-veterans-affairs/web-components/react-bindings'; import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers'; const fileInputDocs = getWebComponentDocs('va-file-input'); @@ -16,6 +16,35 @@ export default { }, }; +function loadURLToInputFiled(url){ + getImgURL(url, (imgBlob)=>{ + // Load img blob to input + // WIP: UTF8 character error + let fileName = 'header-logo.png' + let file = new File([imgBlob], fileName,{type:"image/png", lastModified:new Date().getTime()}, 'utf-8'); + let container = new DataTransfer(); + container.items.add(file); + let inputs = document.querySelectorAll('va-file-input') + inputs.forEach((input) =>{ + input.shadowRoot.querySelector('#fileInputField') + input.files = container.files; + let e = new Event("change") + input.dispatchEvent(e) + }) + + }) +} +// xmlHTTP return blob respond +function getImgURL(url, callback){ + var xhr = new XMLHttpRequest(); + xhr.onload = function() { + callback(xhr.response); + }; + xhr.open('GET', url); + xhr.responseType = 'blob'; + xhr.send(); +} + const defaultArgs = { 'label': 'Select a file to upload', 'name': 'my-file-input', @@ -45,6 +74,7 @@ const Template = ({ children }) => { return ( + <> + {loadURLToInputFiled('https://i.imgur.com/xyKcUlt.jpeg')}} + /> + ); };