@amsterdam/bmi-component-library/es/form/FileUpload/hooks.js

A React component library based on ASC and Material-UI aimed at repurposing and sharing components across BMI projects

function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value}catch(error){reject(error);return}if(info.done){resolve(value)}else{Promise.resolve(value).then(_next,_throw)}}function _async_to_generator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(undefined)})}}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}import{useCallback,useEffect,useState}from"react";let tmpId=0;export const useFileUpload=(getPostUrl,getHeaders,httpMethod="POST",storedFiles=[],lastTmpId=0,onFileSuccess)=>{const[files,setFiles]=useState(storedFiles);const[stateXhr,setStateXhr]=useState({});let isMounted=true;useEffect(()=>{tmpId=lastTmpId;return()=>{isMounted=false}},[]);const handleOnDrop=useCallback((acceptedFiles,fileRejections)=>{if(fileRejections.length&&isMounted){setFiles(previousFiles=>[...previousFiles,...fileRejections])}const makeRequest=function(){var _ref=_async_to_generator(function*(rawFile,nextTmpId){const customFile=Object.assign(rawFile,{tmpId:nextTmpId,progress:0});const postUrl=yield getPostUrl(customFile);const headers=yield getHeaders();if(isMounted){setFiles(previousFiles=>[...previousFiles,customFile])}const xhr=new XMLHttpRequest;xhr.upload.onprogress=event=>{const percentage=event.lengthComputable?parseInt(String(event.loaded/event.total*100),10):100;if(percentage===100)return;if(isMounted){setFiles(previousFiles=>[...previousFiles.map(file=>{if(file.tmpId===customFile.tmpId){return Object.assign(file,{progress:percentage})}return file})])}};xhr.onreadystatechange=()=>{if(xhr.readyState!==XMLHttpRequest.DONE)return;const status=xhr.status;const response=xhr.responseText;if(status>=200&&status<400){customFile.progress=100;customFile.response=response;customFile.uploadXhrError=undefined;onFileSuccess&&onFileSuccess(customFile)}else{customFile.progress=100;customFile.response=response;customFile.uploadXhrError=true}if(isMounted){setFiles(previousFiles=>previousFiles.map(file=>file.tmpId===customFile.tmpId?customFile:file))}};xhr.open(httpMethod,postUrl,true);Object.keys(headers).forEach(name=>xhr.setRequestHeader(name,headers[name]));xhr.send(rawFile);if(isMounted){setStateXhr(_object_spread_props(_object_spread({},stateXhr),{[`xhr_${customFile.tmpId}`]:xhr}))}});return function makeRequest(rawFile,nextTmpId){return _ref.apply(this,arguments)}}();for(const file of acceptedFiles){tmpId+=1;makeRequest(file,tmpId)}},[getPostUrl]);const handleOnCancel=useCallback(file=>{var _stateXhr_,_stateXhr;(_stateXhr=stateXhr)===null||_stateXhr===void 0?void 0:(_stateXhr_=_stateXhr[`xhr_${file.tmpId}`])===null||_stateXhr_===void 0?void 0:_stateXhr_.abort();if(isMounted){setFiles(files.filter(f=>f.tmpId!==file.tmpId))}},[files]);const handleOnFileRemove=useCallback(file=>{if(isMounted){setFiles(files.filter(f=>f.tmpId!==file.tmpId))}},[files]);const handleOnRemoveAllFiles=()=>{if(isMounted)setFiles([])};return{handleOnDrop,handleOnCancel,handleOnFileRemove,handleOnRemoveAllFiles,files}};
//# sourceMappingURL=hooks.js.map