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