@aws-amplify/ui-react-storage 1.1.0 → 1.2.1

package/dist/esm/components/StorageManager/hooks/useUploadFiles/resolveFile.mjs

@@ -0,0 +1 @@
+import{isFunction as e}from"@aws-amplify/ui";const i=({processFile:i,file:o,key:s})=>new Promise(((t,c)=>{const f=e(i)?i({file:o,key:s}):{file:o,key:s};f instanceof Promise?f.then(t).catch(c):t(f)}));export{i as resolveFile};

package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.mjs

@@ -1 +1 @@
-import*as e from"react";import{uploadFile as l}from"../../utils/uploadFile.mjs";import{FileStatus as o}from"../../types.mjs";function s({files:s,accessLevel:a,isResumable:i,setUploadProgress:r,setUploadingFile:t,setUploadSuccess:c,onUploadError:f,onUploadSuccess:p,onUploadStart:n,maxFileCount:d,processFile:m,provider:u,path:k=""}){e.useEffect((()=>{const e=s.filter((e=>e.status===o.QUEUED));if(!(e.length>d))for(const{file:o,key:s,id:d}of e){const e=e=>{null==p||p(e),c({id:d})},b=e=>{const l=0===e.total?100:Math.floor(e.loaded/e.total*100);r({id:d,progress:l})},y=e=>{null==f||f(e,{key:s})};if(o){const r="function"==typeof m?m({file:o,key:s}):{file:o,key:s};if(null==n||n({key:s}),i){const o=l({file:r.file,fileName:k+r.key,isResumable:!0,level:a,completeCallback:e,progressCallback:b,errorCallback:y,provider:u});t({id:d,uploadTask:o})}else l({file:r.file,fileName:k+r.key,isResumable:!1,level:a,completeCallback:e,progressCallback:b,errorCallback:y,provider:u}),t({id:d})}}}),[s,a,i,r,t,f,p,n,d,c,m,u,k])}export{s as useUploadFiles};
+import{__rest as e}from"tslib";import*as o from"react";import{uploadFile as s}from"../../utils/uploadFile.mjs";import{FileStatus as l}from"../../types.mjs";import{resolveFile as t}from"./resolveFile.mjs";function r({files:r,accessLevel:a,isResumable:i,setUploadProgress:p,setUploadingFile:c,setUploadSuccess:n,onUploadError:d,onUploadSuccess:m,onUploadStart:f,maxFileCount:u,processFile:k,provider:b,path:y=""}){o.useEffect((()=>{const o=r.filter((e=>e.status===l.QUEUED));if(!(o.length>u))for(const{file:l,key:r,id:u}of o){const o=e=>{null==m||m(e),n({id:u})},U=e=>{const o=0===e.total?100:Math.floor(e.loaded/e.total*100);p({id:u,progress:o})},g=e=>{null==d||d(e,{key:r})};l&&t({processFile:k,file:l,key:r}).then((l=>{var{key:t}=l,r=e(l,["key"]);null==f||f({key:t});const p=s(Object.assign(Object.assign({},r),{isResumable:i,provider:b,key:y+t,level:a,completeCallback:o,progressCallback:U,errorCallback:g}));c({id:u,uploadTask:i?p:void 0})}))}}),[r,a,i,p,c,d,m,f,u,n,k,b,y])}export{r as useUploadFiles};

package/dist/esm/components/StorageManager/utils/uploadFile.mjs

@@ -1 +1 @@
-import{__rest as e}from"tslib";import{Storage as l}from"aws-amplify";function r(r){var{file:a,fileName:o,level:t="private",progressCallback:s,errorCallback:p,completeCallback:c,isResumable:i=!1,provider:b}=r,m=e(r,["file","fileName","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const n=a.type||"binary/octet-stream";return!0===i?l.put(o,a,Object.assign({level:t,resumable:!0,progressCallback:s,errorCallback:p,completeCallback:c,contentType:n,provider:b},m)):l.put(o,a,Object.assign({level:t,resumable:!1,progressCallback:s,contentType:n,provider:b},m)).then(c,p)}export{r as uploadFile};
+import{__rest as e}from"tslib";import{Storage as l}from"aws-amplify";function r(r){var{file:a,key:o,level:t="private",progressCallback:s,errorCallback:p,completeCallback:c,isResumable:b=!1,provider:i}=r,m=e(r,["file","key","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const k=a.type||"binary/octet-stream";return!0===b?l.put(o,a,Object.assign({level:t,resumable:!0,progressCallback:s,errorCallback:p,completeCallback:c,contentType:k,provider:i},m)):l.put(o,a,Object.assign({level:t,resumable:!1,progressCallback:s,contentType:k,provider:i},m)).then(c,p)}export{r as uploadFile};

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("aws-amplify"),t=require("@aws-amplify/ui-react"),s=require("@aws-amplify/ui"),l=require("tslib"),r=require("classnames"),n=require("@aws-amplify/ui-react/internal");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,Object.freeze(a)}var u,c,d=o(e),p=i(e),m=o(r);function g(e,a){switch(a.type){case c.ADD_FILES:{const{files:t}=a,s=t.map((e=>{const t=a.getFileErrorMessage(e);return{id:e.name,file:e,error:t,key:e.name,status:t?u.ERROR:u.QUEUED,isImage:e.type.startsWith("image/"),progress:-1}})),l=[...e.files,...s];return Object.assign(Object.assign({},e),{files:l})}case c.SET_STATUS_UPLOADING:{const{id:t,uploadTask:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:u.UPLOADING,progress:0,uploadTask:s||void 0})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.SET_UPLOAD_PROGRESS:{const{id:t,progress:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{progress:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.SET_STATUS:{const{id:t,status:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case c.REMOVE_UPLOAD:{const{id:t}=a,{files:s}=e,l=s.reduce(((e,a)=>a.id===t?[...e]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:l})}}}!function(e){e.QUEUED="queued",e.UPLOADING="uploading",e.PAUSED="paused",e.ERROR="error",e.UPLOADED="uploaded"}(u||(u={})),function(e){e.ADD_FILES="ADD_FILES",e.SET_STATUS="SET_STATUS",e.SET_STATUS_UPLOADING="SET_STATUS_UPLOADING",e.SET_UPLOAD_PROGRESS="SET_UPLOAD_PROGRESS",e.REMOVE_UPLOAD="REMOVE_UPLOAD"}(c||(c={}));const f=({id:e,status:a})=>({type:c.SET_STATUS,id:e,status:a}),E=e=>(e=>!(!s.isObject(e)||!e.key))(e)?Object.assign(Object.assign({},e),{id:e.key,status:u.UPLOADED}):void 0;function S(e=[]){const[{files:a},t]=d.default.useReducer(g,{files:Array.isArray(e)?e.map(E).filter((e=>!!e)):[]});return{removeUpload:({id:e})=>{t((({id:e})=>({type:c.REMOVE_UPLOAD,id:e}))({id:e}))},setUploadPaused:({id:e})=>{t(f({id:e,status:u.PAUSED}))},setUploadProgress:({progress:e,id:a})=>{t((({id:e,progress:a})=>({type:c.SET_UPLOAD_PROGRESS,id:e,progress:a}))({id:a,progress:e}))},setUploadResumed:({id:e})=>{t(f({id:e,status:u.UPLOADING}))},setUploadSuccess:({id:e})=>{t(f({id:e,status:u.UPLOADED}))},setUploadingFile:({uploadTask:e,id:a})=>{t((({id:e,uploadTask:a})=>({type:c.SET_STATUS_UPLOADING,id:e,uploadTask:a}))({id:a,uploadTask:e}))},addFiles:({files:e,getFileErrorMessage:a})=>{t((({files:e,getFileErrorMessage:a})=>({type:c.ADD_FILES,files:e,getFileErrorMessage:a}))({files:e,getFileErrorMessage:a}))},files:a}}function T(e){var{file:t,fileName:s,level:r="private",progressCallback:n,errorCallback:o,completeCallback:i,isResumable:u=!1,provider:c}=e,d=l.__rest(e,["file","fileName","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const p=t.type||"binary/octet-stream";return!0===u?a.Storage.put(s,t,Object.assign({level:r,resumable:!0,progressCallback:n,errorCallback:o,completeCallback:i,contentType:p,provider:c},d)):a.Storage.put(s,t,Object.assign({level:r,resumable:!1,progressCallback:n,contentType:p,provider:c},d)).then(i,o)}function U({children:e,className:a}){return d.default.createElement(t.View,{className:a},e)}function C({children:e,displayText:a,inDropZone:l,onDragEnter:r,onDragLeave:o,onDragOver:i,onDragStart:u,onDrop:c,testId:p}){const{dropFilesText:g}=a;return d.default.createElement(t.View,{className:m.default(l&&s.classNameModifier(t.ComponentClassNames.StorageManagerDropZone,"active"),t.ComponentClassNames.StorageManagerDropZone),"data-testid":p,onDragStart:u,onDragEnter:r,onDragLeave:o,onDrop:c,onDragOver:i},d.default.createElement(n.IconUpload,{"aria-hidden":!0,className:t.ComponentClassNames.StorageManagerDropZoneIcon}),d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerDropZoneText},g),e)}const D=({errorMessage:e,getPausedText:a,getUploadingText:l,percentage:r,status:o,uploadSuccessfulText:i})=>{switch(o){case u.UPLOADING:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},l(r));case u.PAUSED:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},a(r));case u.UPLOADED:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,s.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"success"))},d.default.createElement(n.IconCheck,{fontSize:"xl"})," ",i);case u.ERROR:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,s.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"error"))},d.default.createElement(n.IconError,{fontSize:"xl"})," ",e);default:return null}},b=({altText:e,onClick:a})=>d.default.createElement(t.Button,{size:"small",onClick:a},d.default.createElement(t.VisuallyHidden,null,e),d.default.createElement(n.IconClose,{"aria-hidden":!0,fontSize:"medium"})),F=({displayName:e,fileSize:a})=>d.default.createElement(d.default.Fragment,null,d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileMain},d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileName},e)),d.default.createElement(t.Text,{as:"span",className:t.ComponentClassNames.StorageManagerFileSize},a?s.humanFileSize(a,!0):"")),x=({fileName:e,isImage:a,url:s})=>{const l=a?d.default.createElement(t.Image,{alt:e,src:s}):d.default.createElement(n.IconFile,null);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileImage},l)};function O({onPause:e,onResume:a,displayName:s,errorMessage:l,isImage:r,isResumable:n,loaderIsDeterminate:o,onRemove:i,progress:c,showThumbnails:p=!0,size:m,status:g,displayText:f,thumbnailUrl:E}){const{getPausedText:S,getUploadingText:T,uploadSuccessfulText:U,pauseText:C,resumeText:O}=f;return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFile},d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileWrapper},p?d.default.createElement(x,{isImage:r,fileName:s,url:E}):null,d.default.createElement(F,{displayName:s,fileSize:m}),g===u.UPLOADING?d.default.createElement(t.Loader,{className:t.ComponentClassNames.StorageManagerLoader,variation:"linear",percentage:c,isDeterminate:o,isPercentageTextHidden:!0}):null,!n||g!==u.UPLOADING&&g!==u.PAUSED?null:g===u.PAUSED?d.default.createElement(t.Button,{onClick:a,size:"small",variation:"link"},O):d.default.createElement(t.Button,{onClick:e,size:"small",variation:"link"},C),d.default.createElement(b,{altText:`Remove file ${s}`,onClick:i})),d.default.createElement(D,{uploadSuccessfulText:U,getUploadingText:T,getPausedText:S,status:g,errorMessage:l,percentage:c}))}function N({displayText:e,files:a,hasMaxFilesError:s,isResumable:l,onCancelUpload:r,onDeleteUpload:n,onResume:o,onPause:i,showThumbnails:c,maxFileCount:p}){if(a.length<1)return null;const{getMaxFilesErrorText:m}=e,g=m(p);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileList},a.map((a=>{const{file:t,status:s,progress:p,error:m,key:g,isImage:f,id:E,uploadTask:S}=a,T=t&&f?URL.createObjectURL(t):"",U=!l||p>0,C=s===u.UPLOADING;return d.default.createElement(O,{displayName:g,errorMessage:m,displayText:e,isImage:f,isUploading:C,isResumable:l,key:E,loaderIsDeterminate:U,onRemove:()=>{l&&(s===u.UPLOADING||s===u.PAUSED)&&S?r({id:E,uploadTask:S}):n({id:E})},onPause:()=>{S&&i({id:E,uploadTask:S})},onResume:()=>{S&&o({id:E,uploadTask:S})},progress:p,showThumbnails:c,size:null==t?void 0:t.size,status:s,thumbnailUrl:T})})),s&&d.default.createElement(t.Alert,{variation:"error",heading:g}))}function P({fileCount:e,remainingFilesCount:a,displayText:s,allUploadsSuccessful:l}){const{getFilesUploadedText:r,getRemainingFilesText:n}=s;return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerPreviewerText},l?r(e):n(a))}function y(e){var{children:a,className:s=t.ComponentClassNames.StorageManagerFilePicker,size:r="small"}=e,n=l.__rest(e,["children","className","size"]);return d.default.createElement(t.Button,Object.assign({},n,{className:s,size:r}),a)}const k=({file:e,getFileSizeErrorText:a,maxFileSize:t})=>void 0===t?"":e.size>t?a(function(e,a=!1,t=1){const s=a?1e3:1024;if(Math.abs(e)<s)return`${e} B`;const l=a?["kB","MB","GB","TB","PB","EB","ZB","YB"]:["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"];let r=-1;const n=Math.pow(10,t);do{e/=s,++r}while(Math.round(Math.abs(e)*n)/n>=s&&r<l.length-1);return e.toFixed(t)+" "+l[r]}(t,!0)):"",v={getFilesUploadedText:e=>`${e} ${1===e?"file uploaded":"files uploaded"}`,getFileSizeErrorText:e=>`File size must be below ${e}`,getRemainingFilesText:e=>`${e} ${1===e?"file":"files"} uploading`,getUploadingText:e=>"Uploading"+(e>0?`: ${e}%`:""),getUploadButtonText:e=>`Upload ${e} ${1===e?"file":"files"}`,getMaxFilesErrorText:e=>`Cannot choose more than ${e} ${1===e?"file":"files"}. Remove files before updating`,getErrorText:e=>e,doneButtonText:"Done",clearAllButtonText:"Clear all",extensionNotAllowedText:"Extension not allowed",browseFilesText:"Browse files",dropFilesText:"Drop files here or",pauseText:"Pause",resumeText:"Resume",uploadSuccessfulText:"Uploaded",getPausedText:e=>`Paused: ${e}%`},h=new a.Logger("Storage.StorageManager");function M({acceptedFileTypes:a,accessLevel:s,defaultFiles:l,displayText:r,isResumable:n=!1,maxFileCount:o,maxFileSize:i,onUploadError:c,onUploadSuccess:d,onFileRemove:m,onUploadStart:g,showThumbnails:f=!0,processFile:E,components:D,provider:b,path:F}){a&&s&&o||h.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const x=Object.assign({Container:U,DropZone:C,FileList:N,FilePicker:y,FileListHeader:P},D),O=void 0===o||"number"==typeof o&&o>1,M=Object.assign(Object.assign({},v),r),{getFileSizeErrorText:A}=M,L=e=>k({file:e,maxFileSize:i,getFileSizeErrorText:A}),{addFiles:R,files:_,removeUpload:j,setUploadingFile:w,setUploadPaused:I,setUploadProgress:z,setUploadSuccess:B,setUploadResumed:G}=S(l),$=function({onChange:a}){const[t,s]=e.useState(!1);return{onDragStart:e=>{e.dataTransfer.clearData()},onDragEnter:e=>{e.preventDefault(),e.stopPropagation()},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),s(!1)},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="copy",s(!0)},onDrop:e=>{e.preventDefault(),e.stopPropagation(),s(!1),a(e)},inDropZone:t}}({onChange:e=>{const{files:t}=e.dataTransfer;if(!t||0===t.length)return;const s=((e,a)=>e.filter((e=>{const t=e.name||"",s=(e.type||"").toLowerCase(),l=s.replace(/\/.*$/,"");return a.some((e=>{const a=e.trim().toLowerCase();return"."===a.charAt(0)?t.toLowerCase().endsWith(a):a.endsWith("/*")?l===a.replace(/\/.*$/,""):s===a}))})))(Array.from(t),a);R({files:s,getFileErrorMessage:L})}});!function({files:e,accessLevel:a,isResumable:t,setUploadProgress:s,setUploadingFile:l,setUploadSuccess:r,onUploadError:n,onUploadSuccess:o,onUploadStart:i,maxFileCount:c,processFile:d,provider:m,path:g=""}){p.useEffect((()=>{const p=e.filter((e=>e.status===u.QUEUED));if(!(p.length>c))for(const{file:e,key:u,id:c}of p){const p=e=>{null==o||o(e),r({id:c})},f=e=>{const a=0===e.total?100:Math.floor(e.loaded/e.total*100);s({id:c,progress:a})},E=e=>{null==n||n(e,{key:u})};if(e){const s="function"==typeof d?d({file:e,key:u}):{file:e,key:u};if(null==i||i({key:u}),t){const e=T({file:s.file,fileName:g+s.key,isResumable:!0,level:a,completeCallback:p,progressCallback:f,errorCallback:E,provider:m});l({id:c,uploadTask:e})}else T({file:s.file,fileName:g+s.key,isResumable:!1,level:a,completeCallback:p,progressCallback:f,errorCallback:E,provider:m}),l({id:c})}}}),[e,a,t,s,l,n,o,i,c,r,d,m,g])}({accessLevel:s,files:_,isResumable:n,maxFileCount:o,onUploadError:c,onUploadSuccess:d,onUploadStart:g,setUploadingFile:w,setUploadProgress:z,setUploadSuccess:B,processFile:E,provider:b,path:F});const V=0!==_.length&&_.every((e=>(null==e?void 0:e.status)===u.UPLOADED)),Z=_.filter((e=>e.progress<100)).length>o,q=_.filter((e=>(null==e?void 0:e.status)===u.UPLOADED)).length,H=_.length-q,W=_.length>0,Q=p.useRef(null);return p.createElement(x.Container,{className:`${t.ComponentClassNames.StorageManager} ${W?t.ComponentClassNames.StorageManagerPreviewer:""}`},p.createElement(x.DropZone,Object.assign({},$,{displayText:M}),p.createElement(p.Fragment,null,p.createElement(x.FilePicker,{onClick:function(){Q.current&&(Q.current.click(),Q.current.value="")}},M.browseFilesText),p.createElement(t.VisuallyHidden,null,p.createElement("input",{type:"file",tabIndex:-1,ref:Q,onChange:e=>{const{files:a}=e.target;a&&0!==a.length&&R({files:Array.from(a),getFileErrorMessage:L})},multiple:O,accept:a.join(",")})))),W?p.createElement(x.FileListHeader,{allUploadsSuccessful:V,displayText:M,fileCount:_.length,remainingFilesCount:H}):null,p.createElement(x.FileList,{displayText:M,files:_,isResumable:n,onCancelUpload:({id:e,uploadTask:a})=>{a.pause(),j({id:e})},onDeleteUpload:({id:e})=>{if(j({id:e}),"function"==typeof m){const a=_.find((a=>a.id===e));a&&m({key:a.key})}},onResume:({id:e,uploadTask:a})=>{a.resume(),G({id:e})},onPause:({id:e,uploadTask:a})=>{a.pause(),I({id:e})},showThumbnails:f,hasMaxFilesError:Z,maxFileCount:o}))}M.Container=U,M.DropZone=C,M.FileList=N,M.FileListHeader=P,M.FilePicker=y,exports.StorageManager=M;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("aws-amplify"),t=require("@aws-amplify/ui-react"),s=require("@aws-amplify/ui"),l=require("tslib"),r=require("classnames"),n=require("@aws-amplify/ui-react/internal");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,Object.freeze(a)}var c,u,d=o(e),p=i(e),m=o(r);function g(e,a){switch(a.type){case u.ADD_FILES:{const{files:t}=a,s=t.map((e=>{const t=a.getFileErrorMessage(e);return{id:e.name,file:e,error:t,key:e.name,status:t?c.ERROR:c.QUEUED,isImage:e.type.startsWith("image/"),progress:-1}})),l=[...e.files,...s];return Object.assign(Object.assign({},e),{files:l})}case u.SET_STATUS_UPLOADING:{const{id:t,uploadTask:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:c.UPLOADING,progress:0,uploadTask:s||void 0})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case u.SET_UPLOAD_PROGRESS:{const{id:t,progress:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{progress:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case u.SET_STATUS:{const{id:t,status:s}=a,{files:l}=e,r=l.reduce(((e,a)=>a.id===t?[...e,Object.assign(Object.assign({},a),{status:s})]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:r})}case u.REMOVE_UPLOAD:{const{id:t}=a,{files:s}=e,l=s.reduce(((e,a)=>a.id===t?[...e]:[...e,a]),[]);return Object.assign(Object.assign({},e),{files:l})}}}!function(e){e.QUEUED="queued",e.UPLOADING="uploading",e.PAUSED="paused",e.ERROR="error",e.UPLOADED="uploaded"}(c||(c={})),function(e){e.ADD_FILES="ADD_FILES",e.SET_STATUS="SET_STATUS",e.SET_STATUS_UPLOADING="SET_STATUS_UPLOADING",e.SET_UPLOAD_PROGRESS="SET_UPLOAD_PROGRESS",e.REMOVE_UPLOAD="REMOVE_UPLOAD"}(u||(u={}));const f=({files:e,getFileErrorMessage:a})=>({type:u.ADD_FILES,files:e,getFileErrorMessage:a}),E=({id:e,uploadTask:a})=>({type:u.SET_STATUS_UPLOADING,id:e,uploadTask:a}),S=({id:e,progress:a})=>({type:u.SET_UPLOAD_PROGRESS,id:e,progress:a}),T=({id:e,status:a})=>({type:u.SET_STATUS,id:e,status:a}),U=({id:e})=>({type:u.REMOVE_UPLOAD,id:e}),C=e=>(e=>!(!s.isObject(e)||!e.key))(e)?Object.assign(Object.assign({},e),{id:e.key,status:c.UPLOADED}):void 0;function D(e){var{file:t,key:s,level:r="private",progressCallback:n,errorCallback:o,completeCallback:i,isResumable:c=!1,provider:u}=e,d=l.__rest(e,["file","key","level","progressCallback","errorCallback","completeCallback","isResumable","provider"]);const p=t.type||"binary/octet-stream";return!0===c?a.Storage.put(s,t,Object.assign({level:r,resumable:!0,progressCallback:n,errorCallback:o,completeCallback:i,contentType:p,provider:u},d)):a.Storage.put(s,t,Object.assign({level:r,resumable:!1,progressCallback:n,contentType:p,provider:u},d)).then(i,o)}const F=({processFile:e,file:a,key:t})=>new Promise(((l,r)=>{const n=s.isFunction(e)?e({file:a,key:t}):{file:a,key:t};n instanceof Promise?n.then(l).catch(r):l(n)}));function b({children:e,className:a}){return d.default.createElement(t.View,{className:a},e)}function x({children:e,displayText:a,inDropZone:l,onDragEnter:r,onDragLeave:o,onDragOver:i,onDragStart:c,onDrop:u,testId:p}){const{dropFilesText:g}=a;return d.default.createElement(t.View,{className:m.default(l&&s.classNameModifier(t.ComponentClassNames.StorageManagerDropZone,"active"),t.ComponentClassNames.StorageManagerDropZone),"data-testid":p,onDragStart:c,onDragEnter:r,onDragLeave:o,onDrop:u,onDragOver:i},d.default.createElement(n.IconUpload,{"aria-hidden":!0,className:t.ComponentClassNames.StorageManagerDropZoneIcon}),d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerDropZoneText},g),e)}const O=({errorMessage:e,getPausedText:a,getUploadingText:l,percentage:r,status:o,uploadSuccessfulText:i})=>{switch(o){case c.UPLOADING:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},l(r));case c.PAUSED:return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileStatus},a(r));case c.UPLOADED:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,s.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"success"))},d.default.createElement(n.IconCheck,{fontSize:"xl"})," ",i);case c.ERROR:return d.default.createElement(t.Text,{className:m.default(t.ComponentClassNames.StorageManagerFileStatus,s.classNameModifier(t.ComponentClassNames.StorageManagerFileStatus,"error"))},d.default.createElement(n.IconError,{fontSize:"xl"})," ",e);default:return null}},P=({altText:e,onClick:a})=>d.default.createElement(t.Button,{size:"small",onClick:a},d.default.createElement(t.VisuallyHidden,null,e),d.default.createElement(n.IconClose,{"aria-hidden":!0,fontSize:"medium"})),N=({displayName:e,fileSize:a})=>d.default.createElement(d.default.Fragment,null,d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileMain},d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerFileName},e)),d.default.createElement(t.Text,{as:"span",className:t.ComponentClassNames.StorageManagerFileSize},a?s.humanFileSize(a,!0):"")),y=({fileName:e,isImage:a,url:s})=>{const l=a?d.default.createElement(t.Image,{alt:e,src:s}):d.default.createElement(n.IconFile,null);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileImage},l)};function k({onPause:e,onResume:a,displayName:s,errorMessage:l,isImage:r,isResumable:n,loaderIsDeterminate:o,onRemove:i,progress:u,showThumbnails:p=!0,size:m,status:g,displayText:f,thumbnailUrl:E}){const{getPausedText:S,getUploadingText:T,uploadSuccessfulText:U,pauseText:C,resumeText:D}=f;return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFile},d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileWrapper},p?d.default.createElement(y,{isImage:r,fileName:s,url:E}):null,d.default.createElement(N,{displayName:s,fileSize:m}),g===c.UPLOADING?d.default.createElement(t.Loader,{className:t.ComponentClassNames.StorageManagerLoader,variation:"linear",percentage:u,isDeterminate:o,isPercentageTextHidden:!0}):null,!n||g!==c.UPLOADING&&g!==c.PAUSED?null:g===c.PAUSED?d.default.createElement(t.Button,{onClick:a,size:"small",variation:"link"},D):d.default.createElement(t.Button,{onClick:e,size:"small",variation:"link"},C),d.default.createElement(P,{altText:`Remove file ${s}`,onClick:i})),d.default.createElement(O,{uploadSuccessfulText:U,getUploadingText:T,getPausedText:S,status:g,errorMessage:l,percentage:u}))}function h({displayText:e,files:a,hasMaxFilesError:s,isResumable:l,onCancelUpload:r,onDeleteUpload:n,onResume:o,onPause:i,showThumbnails:u,maxFileCount:p}){if(a.length<1)return null;const{getMaxFilesErrorText:m}=e,g=m(p);return d.default.createElement(t.View,{className:t.ComponentClassNames.StorageManagerFileList},a.map((a=>{const{file:t,status:s,progress:p,error:m,key:g,isImage:f,id:E,uploadTask:S}=a,T=t&&f?URL.createObjectURL(t):"",U=!l||p>0,C=s===c.UPLOADING;return d.default.createElement(k,{displayName:g,errorMessage:m,displayText:e,isImage:f,isUploading:C,isResumable:l,key:E,loaderIsDeterminate:U,onRemove:()=>{l&&(s===c.UPLOADING||s===c.PAUSED)&&S?r({id:E,uploadTask:S}):n({id:E})},onPause:()=>{S&&i({id:E,uploadTask:S})},onResume:()=>{S&&o({id:E,uploadTask:S})},progress:p,showThumbnails:u,size:null==t?void 0:t.size,status:s,thumbnailUrl:T})})),s&&d.default.createElement(t.Alert,{variation:"error",heading:g}))}function v({fileCount:e,remainingFilesCount:a,displayText:s,allUploadsSuccessful:l}){const{getFilesUploadedText:r,getRemainingFilesText:n}=s;return d.default.createElement(t.Text,{className:t.ComponentClassNames.StorageManagerPreviewerText},l?r(e):n(a))}function M(e){var{children:a,className:s=t.ComponentClassNames.StorageManagerFilePicker,size:r="small"}=e,n=l.__rest(e,["children","className","size"]);return d.default.createElement(t.Button,Object.assign({},n,{className:s,size:r}),a)}const A=({file:e,getFileSizeErrorText:a,maxFileSize:t})=>void 0===t?"":e.size>t?a(function(e,a=!1,t=1){const s=a?1e3:1024;if(Math.abs(e)<s)return`${e} B`;const l=a?["kB","MB","GB","TB","PB","EB","ZB","YB"]:["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"];let r=-1;const n=Math.pow(10,t);do{e/=s,++r}while(Math.round(Math.abs(e)*n)/n>=s&&r<l.length-1);return e.toFixed(t)+" "+l[r]}(t,!0)):"",L={getFilesUploadedText:e=>`${e} ${1===e?"file uploaded":"files uploaded"}`,getFileSizeErrorText:e=>`File size must be below ${e}`,getRemainingFilesText:e=>`${e} ${1===e?"file":"files"} uploading`,getUploadingText:e=>"Uploading"+(e>0?`: ${e}%`:""),getUploadButtonText:e=>`Upload ${e} ${1===e?"file":"files"}`,getMaxFilesErrorText:e=>`Cannot choose more than ${e} ${1===e?"file":"files"}. Remove files before updating`,getErrorText:e=>e,doneButtonText:"Done",clearAllButtonText:"Clear all",extensionNotAllowedText:"Extension not allowed",browseFilesText:"Browse files",dropFilesText:"Drop files here or",pauseText:"Pause",resumeText:"Resume",uploadSuccessfulText:"Uploaded",getPausedText:e=>`Paused: ${e}%`},R=new a.Logger("Storage.StorageManager");function _({acceptedFileTypes:a,accessLevel:s,defaultFiles:r,displayText:n,isResumable:o=!1,maxFileCount:i,maxFileSize:u,onUploadError:m,onUploadSuccess:O,onFileRemove:P,onUploadStart:N,showThumbnails:y=!0,processFile:k,components:_,provider:j,path:w}){a&&s&&i||R.warn("FileUploader requires accessLevel, acceptedFileTypes and maxFileCount props");const I=Object.assign({Container:b,DropZone:x,FileList:h,FilePicker:M,FileListHeader:v},_),z=void 0===i||"number"==typeof i&&i>1,B=Object.assign(Object.assign({},L),n),{getFileSizeErrorText:G}=B,$=e=>A({file:e,maxFileSize:u,getFileSizeErrorText:G}),{addFiles:V,files:Z,removeUpload:q,setUploadingFile:H,setUploadPaused:W,setUploadProgress:Q,setUploadSuccess:Y,setUploadResumed:K}=function(e=[]){const[{files:a},t]=d.default.useReducer(g,{files:Array.isArray(e)?e.map(C).filter((e=>!!e)):[]});return{removeUpload:({id:e})=>{t(U({id:e}))},setUploadPaused:({id:e})=>{t(T({id:e,status:c.PAUSED}))},setUploadProgress:({progress:e,id:a})=>{t(S({id:a,progress:e}))},setUploadResumed:({id:e})=>{t(T({id:e,status:c.UPLOADING}))},setUploadSuccess:({id:e})=>{t(T({id:e,status:c.UPLOADED}))},setUploadingFile:({uploadTask:e,id:a})=>{t(E({id:a,uploadTask:e}))},addFiles:({files:e,getFileErrorMessage:a})=>{t(f({files:e,getFileErrorMessage:a}))},files:a}}(r),J=function({onChange:a}){const[t,s]=e.useState(!1);return{onDragStart:e=>{e.dataTransfer.clearData()},onDragEnter:e=>{e.preventDefault(),e.stopPropagation()},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),s(!1)},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="copy",s(!0)},onDrop:e=>{e.preventDefault(),e.stopPropagation(),s(!1),a(e)},inDropZone:t}}({onChange:e=>{const{files:t}=e.dataTransfer;if(!t||0===t.length)return;const s=((e,a)=>e.filter((e=>{const t=e.name||"",s=(e.type||"").toLowerCase(),l=s.replace(/\/.*$/,"");return a.some((e=>{const a=e.trim().toLowerCase();return"."===a.charAt(0)?t.toLowerCase().endsWith(a):a.endsWith("/*")?l===a.replace(/\/.*$/,""):s===a}))})))(Array.from(t),a);V({files:s,getFileErrorMessage:$})}});!function({files:e,accessLevel:a,isResumable:t,setUploadProgress:s,setUploadingFile:r,setUploadSuccess:n,onUploadError:o,onUploadSuccess:i,onUploadStart:u,maxFileCount:d,processFile:m,provider:g,path:f=""}){p.useEffect((()=>{const p=e.filter((e=>e.status===c.QUEUED));if(!(p.length>d))for(const{file:e,key:c,id:d}of p){const p=e=>{null==i||i(e),n({id:d})},E=e=>{const a=0===e.total?100:Math.floor(e.loaded/e.total*100);s({id:d,progress:a})},S=e=>{null==o||o(e,{key:c})};e&&F({processFile:m,file:e,key:c}).then((e=>{var{key:s}=e,n=l.__rest(e,["key"]);null==u||u({key:s});const o=D(Object.assign(Object.assign({},n),{isResumable:t,provider:g,key:f+s,level:a,completeCallback:p,progressCallback:E,errorCallback:S}));r({id:d,uploadTask:t?o:void 0})}))}}),[e,a,t,s,r,o,i,u,d,n,m,g,f])}({accessLevel:s,files:Z,isResumable:o,maxFileCount:i,onUploadError:m,onUploadSuccess:O,onUploadStart:N,setUploadingFile:H,setUploadProgress:Q,setUploadSuccess:Y,processFile:k,provider:j,path:w});const X=0!==Z.length&&Z.every((e=>(null==e?void 0:e.status)===c.UPLOADED)),ee=Z.filter((e=>e.progress<100)).length>i,ae=Z.filter((e=>(null==e?void 0:e.status)===c.UPLOADED)).length,te=Z.length-ae,se=Z.length>0,le=p.useRef(null);return p.createElement(I.Container,{className:`${t.ComponentClassNames.StorageManager} ${se?t.ComponentClassNames.StorageManagerPreviewer:""}`},p.createElement(I.DropZone,Object.assign({},J,{displayText:B}),p.createElement(p.Fragment,null,p.createElement(I.FilePicker,{onClick:function(){le.current&&(le.current.click(),le.current.value="")}},B.browseFilesText),p.createElement(t.VisuallyHidden,null,p.createElement("input",{type:"file",tabIndex:-1,ref:le,onChange:e=>{const{files:a}=e.target;a&&0!==a.length&&V({files:Array.from(a),getFileErrorMessage:$})},multiple:z,accept:a.join(",")})))),se?p.createElement(I.FileListHeader,{allUploadsSuccessful:X,displayText:B,fileCount:Z.length,remainingFilesCount:te}):null,p.createElement(I.FileList,{displayText:B,files:Z,isResumable:o,onCancelUpload:({id:e,uploadTask:a})=>{a.pause(),q({id:e})},onDeleteUpload:({id:e})=>{if(q({id:e}),"function"==typeof P){const a=Z.find((a=>a.id===e));a&&P({key:a.key})}},onResume:({id:e,uploadTask:a})=>{a.resume(),K({id:e})},onPause:({id:e,uploadTask:a})=>{a.pause(),W({id:e})},showThumbnails:y,hasMaxFilesError:ee,maxFileCount:i}))}_.Container=b,_.DropZone=x,_.FileList=h,_.FileListHeader=v,_.FilePicker=M,exports.StorageManager=_;

package/dist/styles.css

@@ -1746,7 +1746,7 @@ strong.amplify-text {
   -webkit-user-select: text;
      -moz-user-select: text;
           user-select: text;
-  display: inline-flex;
+  display: inline-block;
 }
 .amplify-input:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);

package/dist/types/components/StorageManager/hooks/useStorageManager/types.d.ts

@@ -10,8 +10,8 @@ export declare enum StorageManagerActionTypes {
     SET_UPLOAD_PROGRESS = "SET_UPLOAD_PROGRESS",
     REMOVE_UPLOAD = "REMOVE_UPLOAD"
 }
-export declare type GetFileErrorMessage = (file: File) => string;
-export declare type Action = {
+export type GetFileErrorMessage = (file: File) => string;
+export type Action = {
     type: StorageManagerActionTypes.ADD_FILES;
     files: File[];
     getFileErrorMessage: GetFileErrorMessage;

package/dist/types/components/StorageManager/hooks/useUploadFiles/resolveFile.d.ts

@@ -0,0 +1,10 @@
+import { ProcessFileParams, StorageManagerProps } from '../../types';
+interface ResolveFileParams extends Pick<StorageManagerProps, 'processFile'>, ProcessFileParams {
+}
+/**
+ * Utility function that takes the processFile prop, along with a file a key
+ * and returns a Promise that resolves to { file, key, ..rest }
+ * regardless if processFile is defined and if it is sync or async
+ */
+export declare const resolveFile: ({ processFile, file, key, }: ResolveFileParams) => Promise<ProcessFileParams>;
+export {};

package/dist/types/components/StorageManager/types.d.ts

@@ -19,8 +19,10 @@ export interface StorageFile {
     error: string;
     isImage: boolean;
 }
-export declare type StorageFiles = StorageFile[];
-export declare type DefaultFile = Pick<StorageFile, 'key'>;
+export type StorageFiles = StorageFile[];
+export type DefaultFile = Pick<StorageFile, 'key'>;
+export type ProcessFileParams = Required<Pick<StorageFile, 'file' | 'key'>> & Record<string, any>;
+export type ProcessFile = (params: ProcessFileParams) => Promise<ProcessFileParams> | ProcessFileParams;
 export interface StorageManagerProps {
     /**
      * List of accepted File types
@@ -89,7 +91,7 @@ export interface StorageManagerProps {
     /**
      * Process file before upload
      */
-    processFile?: (storageFile: Required<Pick<StorageFile, 'file' | 'key'>>) => Required<Pick<StorageFile, 'file' | 'key'>>;
+    processFile?: ProcessFile;
     /**
      * Determines if thumbnails show for image files
      */

package/dist/types/components/StorageManager/ui/FilePicker/FilePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@aws-amplify/ui-react';
-export declare type FilePickerProps = Parameters<typeof Button>[0] & {
+export type FilePickerProps = Parameters<typeof Button>[0] & {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 export declare function FilePicker({ children, className, size, ...props }: FilePickerProps): JSX.Element;

package/dist/types/components/StorageManager/utils/displayText.d.ts

@@ -16,4 +16,4 @@ export declare const defaultStorageManagerDisplayText: {
     uploadSuccessfulText: string;
     getPausedText(percentage: number): string;
 };
-export declare type StorageManagerDisplayText = typeof defaultStorageManagerDisplayText;
+export type StorageManagerDisplayText = typeof defaultStorageManagerDisplayText;

package/dist/types/components/StorageManager/utils/uploadFile.d.ts

@@ -1,7 +1,7 @@
 import type { StorageAccessLevel, UploadTask } from '@aws-amplify/storage';
-interface UploadFileProps {
+export type UploadFileProps = {
     file: File;
-    fileName: string;
+    key: string;
     level: StorageAccessLevel;
     isResumable?: boolean;
     progressCallback: (progress: {
@@ -13,7 +13,7 @@ interface UploadFileProps {
         key: string | undefined;
     }) => void;
     provider?: string;
-}
-declare type UploadFile = Promise<void> | UploadTask;
-export declare function uploadFile({ file, fileName, level, progressCallback, errorCallback, completeCallback, isResumable, provider, ...rest }: UploadFileProps): UploadFile;
+} & Record<string, any>;
+type UploadFile = Promise<void> | UploadTask;
+export declare function uploadFile({ file, key, level, progressCallback, errorCallback, completeCallback, isResumable, provider, ...rest }: UploadFileProps): UploadFile;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-storage",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -40,9 +40,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "5.6.0",
-    "@aws-amplify/ui-react": "4.6.0",
-    "@aws-amplify/ui-react-core": "2.1.19",
+    "@aws-amplify/ui": "5.6.2",
+    "@aws-amplify/ui-react": "4.6.2",
+    "@aws-amplify/ui-react-core": "2.1.21",
     "classnames": "2.3.1",
     "lodash": "4.17.21",
     "tslib": "2.4.1"
@@ -58,6 +58,7 @@
     }
   },
   "devDependencies": {
+    "@aws-amplify/eslint-config-amplify-ui": "0.0.0",
     "@rollup/plugin-typescript": "^8.3.1",
     "@size-limit/preset-big-lib": "^7.0.8",
     "@testing-library/jest-dom": "^5.14.1",
@@ -68,7 +69,6 @@
     "@types/react": "^17.0.2",
     "@types/testing-library__jest-dom": "^5.14.1",
     "eslint": "^8.13.0",
-    "eslint-config-amplify-ui": "0.0.0",
     "jest": "^27.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",