WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Added the upload API to user services and changed class to classname

Browse Source
This commit was merged in pull request #131.
This commit is contained in:
victorAnumudu
2023-06-03 12:54:43 +01:00
parent 413e8e0361
commit bb79342762
3 changed files with 71 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyActiveJobs/ActiveJobs.jsx
+54 -6
View File
@@ -29,6 +29,10 @@ function ActiveJobs(props) {
// FUNCTION TO HANDLE FILE UPlOAD CHANGE
const handleFileChange = ({target:{files}}) => {
setRequestStatus({loading: false, status: false, message: ''}) // State to determine error state
if(!files[0]) { // IF NO FILE SELECTED RETURN
return
}
if(files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)){
setRequestStatus({loading: false, status: false, message: 'File must be <= 1mb'})
setTimeout(()=>{
@@ -90,6 +94,44 @@ function ActiveJobs(props) {
})
}
// FUNCTION TO SEND FILES
const sendFile = () => {
setRequestStatus({loading: true, status: false, message: ''})
if(!filesToSend.length){ // checks if file to send is empty
setRequestStatus({loading: false, status: false, message: 'No File(s) selected'})
return setTimeout(()=>{
setRequestStatus({loading: false, status: false, message: ''})
}, 5000)
}
// let reqData = new FormData()
// for(let files of filesToSend){
// reqData.append(files.name, files)
// }
let reqData={file_size: filesToSend[0].size, file_type: 'image/png', file_data: filesToSend[0], msg_type: 'FILE', contract:props.details.contract}
// for(let files of filesToSend){
// reqData[files.name] = files
// }
ApiCall.sendFiles(reqData).then((res)=>{
if(res.status != 200 || res.data.internal_return < 0){
setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
return
}
setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
}).catch(error => {
setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
}).finally(()=>{
setTimeout(()=>{
setRequestStatus({loading: false, status: false, message: ''})
}, 5000)
})
}
return (
<Layout>
@@ -198,7 +240,7 @@ function ActiveJobs(props) {
<div className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300">
<div className="files">
<label htmlFor="file" className="h-20 btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer">Select Files to Upload</label>
<input type="file" id='file' style={{display: 'none'}} onChange={handleFileChange}/>
<input type="file" id='file' accept="image/*" style={{display: 'none'}} onChange={handleFileChange}/>
</div>
<div className="selected_file my-2">
{filesToSend.length > 0 &&
@@ -267,15 +309,21 @@ function ActiveJobs(props) {
{tab == 'files' ?
(
<button
onClick={()=>{console.log('working')}}
onClick={sendFile}
type="button"
className="btn-gradient text-base tracking-wide px-4 py-3 rounded-full flex justify-center items-center"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
</svg>
{requestStatus.loading ?
<LoadingSpinner size='6' color='sky-blue' />
:
<>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
</svg>
<span className="text-white">Upload Files</span>
<span className="text-white">Upload Files</span>
</>
}
</button>
)
: