[javascript] file upload

Viewer

*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.

copy download embed printName: file upload

import React, {useState, useEffect, useContext} from 'react';
import {useHistory} from 'react-router-dom';
import {
Box,
Input,
Form,
layouts,
Text,
Table,
Popover,
Link,
MenuList
} from "@tidbits/react-tidbits";
import DateComponent from '../../../SharedComponents/DateComponent/dateComponent';
import Notes from "../../../SharedComponents/NotesComponent/notesComponent.jsx";
import MultipleFileUpload from "../../../SharedComponents/FileComponent/multipleFileUpload";
import axios from "axios";
import moment from "moment";
import ModalsPDF from "../../../SharedComponents/VisaModalComponent/modal";
import {loggedInDetails} from "../../../../Context/loggedInDetailsContext";
import {GridContext} from '../../../../Context/gridContext';
import {SAMFormContext} from './SAMFormContext';
const SAMFormAdditionalDetailsTab = (props) => {
const history = useHistory();
const {loggedInUser, samAdminMode, appleCsrfToken, setToken} = useContext(loggedInDetails);
const {
spinnerVal, setSpinnerVal, searchValue, gridData, setgridData, bannerMessage,
variant, setBannerVariant, setBannerMessage, gridApiState, globalGridSearch
} = useContext(GridContext);
const {formData, setFormData, metaData} = useContext(SAMFormContext);
const [files, setFiles] = useState([]);
const [files2, setFiles2] = useState([]);
const [filesData, setFilesData] = useState([]);
let temp;
/**************************************
* File Upload
**************************************/
const uploadFile = (arr) => {
temp = [...files];
// testFile = files2;
if(files.length + arr.length > 3){
alert("Maximum of 3 Files can be uploaded.");
// childRef.current.refResetFileData()
}else{
if(arr != null && arr!= undefined && arr.length !=0) {
for(let i=0; i<arr.length; i++){
temp.push(arr[i]);
// testFile.push(arr[i]);
}
}
setFiles(temp);
}
}
function removeFiles(file, index) {
axios.post(`/deletedAttachements`)
.then((response) => {
let filesAfterFilter = '';
let flag = 0;
filesAfterFilter = files.filter((val, i) => {
if(val.name == file && i == index){
flag = 1;
}else{
flag=0;
}
if(flag == 1){
return false;
}else{
return true;
}
});
setFiles(filesAfterFilter);
});
}
return (
<div className="detailed-info-tab">
<div className="row-item">
<Form.Label>
* Software Proposal? <span className="info-icon" />
<Input.TextArea
height="60px"
value={formData.samAdditionalsEntity && formData.samAdditionalsEntity[0].softwarePurpose}
onChange={() => {}}
placeholder="Enter purpose" />
</Form.Label>
</div>
<div className="row-item grid-container">
<div className="grid-item col-3">
<Form.Label>
* Location
<div className="form-value">
<Input.DropdownSelect
selectedValuePlaceholder="Select"
onChange={() => {}}
value={formData.samReqLocDetailsEntity && formData.samReqLocDetailsEntity.locationId}
>
{metaData.locations && metaData.locations.map(location => {
return (
<option key={location.metadatatype} value={location.metadatatype}>
{location.metadatatypesubname}
</option>
)
})}
</Input.DropdownSelect>
</div>
</Form.Label>
</div>
</div>
<div className="row-item grid-container">
<div className="grid-item col-3">
<Form.Label>
* Reason for Request
<div className="form-value">
<Input.DropdownSelect
selectedValuePlaceholder="Select"
onChange={() => {}}
value={formData.samAdditionalsEntity && formData.samAdditionalsEntity[0].reasonForReq}
>
{metaData.reasonForRequest && metaData.reasonForRequest.map(reason => {
return (
<option key={reason.metadatatype} value={reason.metadatatype}>
{reason.metadatatypesubname}
</option>
)
})}
</Input.DropdownSelect>
</div>
</Form.Label>
</div>
</div>
<div>
<Form.Label className="alternatives-evaluated">
<input type="checkbox" onChange={() => {}}/> Alternatives Evaluated
{/*<span className="checkmark"></span>*/}
</Form.Label>
</div>
<div className="row-item grid-container">
<div className="grid-item col-3">
<Form.Label>
<div className="form-value">
<Input.DropdownSelect
value="108"
// selectedValuePlaceholder={Object.keys(vendorName).length === 0 ? 'Select Vendor Name' : vendorName.vendorName}
selectedValuePlaceholder="Select"
onChange={function(){}} //setVendorNameChange
typeahead
// value={vendorName}
>
<option key="ADOBE XD 1" value="97">ADOBE XD 1</option>
<option key="ADOBE XD 2" value="97">ADOBE XD 2</option>
<option key="ADOBE XD 3" value="97">ADOBE XD 3</option>
<option key="ADOBE XD 4" value="97">ADOBE XD 4</option>
</Input.DropdownSelect>
</div>
</Form.Label>
</div>
<div className="grid-item col-3">
<Form.Label>
* Product Title
<div className="form-value">
<Input.DropdownSelect
value="97"
// selectedValuePlaceholder={Object.keys(vendorName).length === 0 ? 'Select Vendor Name' : vendorName.vendorName}
selectedValuePlaceholder="Select"
onChange={function(){}} //setVendorNameChange
// value={vendorName}
>
<option key="ADOBE XD 1" value="97">ADOBE XD 1</option>
<option key="ADOBE XD 2" value="97">ADOBE XD 2</option>
<option key="ADOBE XD 3" value="97">ADOBE XD 3</option>
<option key="ADOBE XD 4" value="97">ADOBE XD 4</option>
</Input.DropdownSelect>
</div>
</Form.Label>
</div>
</div>
<div className="row-item grid-container">
<div className="grid-item col-3">
<Form.Label>
* Approximate / estimated spend
<div className="form-value">
<Input.DropdownSelect
selectedValuePlaceholder="Select"
onChange={() => {}}
value={formData.samAdditionalsEntity && formData.samAdditionalsEntity[0].approxOrEstSpend}
>
{metaData.appxEstimatedSpend && metaData.appxEstimatedSpend.map(spend => {
return (
<option key={spend.metadatatype} value={spend.metadatatype}>
{spend.metadatatypesubname}
</option>
)
})}
</Input.DropdownSelect>
</div>
</Form.Label>
</div>
</div>
<div className="row-item">
<MultipleFileUpload files={files2} setFiles={setFiles2} clbk={uploadFile} showFiles={false}/>
</div>
{files != undefined && files != null && files.length != 0 &&
<layouts.EvenGrid cols={[1,2]} pt="10px" style={{textAlign:'left'}}>
<Box><text> </text></Box>
<Box style={{marginLeft: "32px"}}>
<layouts.EvenGrid cols={[1]} pt="10px" style={{ marginTop: "1%", textAlign:'left'}}>
<Box>
{files != undefined && files.length != null && files.map((val,key) => {
return (
<>
{/* // <Text style={{color:'#0070C9', paddingTop: '5px', textDecoration:'underline'}} onClick={() => {download(val.filename, val.genevaKey)}}>{val.fileName == null ? requestedForId+'_'+index+'.pdf' : val.fileName}</Text> */}
<Text key={key} style={{color:'#333333', paddingTop: '5px', display: 'flex'}}>
{val.name}
<span style={{marginLeft:'5px', cursor:'pointer'}} onClick={()=>removeFiles(val.name, key)}><img style={{width:"20px"}} src={require('../../../../image/clear.svg')} /></span>
</Text>
</>
)
})}
</Box>
</layouts.EvenGrid>
</Box>
</layouts.EvenGrid>
}
{(files == undefined || files == null || files.length == 0) &&
<layouts.EvenGrid cols={[1,2]} pt="10px" style={{textAlign:'left'}}>
<Box><text> </text></Box>
<Box style={{marginLeft: "32px"}}>
<layouts.EvenGrid cols={[1]} pt="10px" style={{ marginTop: "1%", textAlign:'left'}}>
{filesData != null && filesData.length !=0 && filesData != undefined &&
<Box>
{/* <Text> Attachments:</Text> */}
{filesData.map((val,index) => {
let filename = val.filename;
let visaRequestId = val.visaRequestId;
filename = (filename === null || filename === undefined) ? visaRequestId + "_RFE_" + index+1 : filename;
let finalFilename = filename.endsWith('.pdf') ? filename : filename + '.pdf';
return(
<>
<ModalsPDF
isAttachment = {true}
labelName="View"
headerName="View"
gkey={val.genevaKey}
fname={finalFilename}
backGround="#A1BD90">{({hide, show})=>
<span style={{color: '#037A9E', cursor: 'pointer', fontFamily: 'Helvetica Neue',
fontSize: '15px'}} onClick={() => {
show();
}
}>
<span style={{display:'flex', paddingTop:'4px'}}>{val.filename}</span>
</span>
}
</ModalsPDF>
</>
)
})}
</Box>
}
</layouts.EvenGrid>
</Box>
</layouts.EvenGrid>
}
<div className="row-item">
<Form.Label>
Why do you need this software and how will it be used?
<Input.TextArea
height="60px"
value={formData.samAdditionalsEntity && formData.samAdditionalsEntity[0].softwareNeeds}
onChange={(e) => {}}
placeholder="Enter software need" />
</Form.Label>
</div>
<div className="row-item">
<Form.Label>
How was the product and quantity determined?
<Input.TextArea
height="60px"
value={formData.samAdditionalsEntity && formData.samAdditionalsEntity[0].howProdQtyDetermined}
onChange={(e) => {}}
placeholder="Enter software need" />
</Form.Label>
</div>
<div className="row-item">
<Form.Label>
What is the long-term (2-5 year) strategy for this software?
<Input.TextArea
height="60px"
value={formData.samAdditionalsEntity && formData.samAdditionalsEntity[0].howProdQtyDetermined}
onChange={(e) => {}}
placeholder="Enter software need" />
</Form.Label>
</div>
<div className="row-item">
<Form.Label>
What are the factors driving the decision?
<Input.TextArea
height="60px"
value={formData.samAdditionalsEntity && formData.samAdditionalsEntity[0].howProdQtyDetermined}
onChange={(e) => {}}
placeholder="Enter software need" />
</Form.Label>
</div>
<div className="section-header">Notes:</div>
<div className="row-item grid-container">
<div className="grid-item col-3">
<Form.Label>
Show:
<div className="form-value">
<Input.DropdownSelect
selectedValuePlaceholder="Select"
onChange={() => {}}
value={134}
>
{metaData.commentsType && metaData.commentsType.map(commentsType => {
return (
<option key={commentsType.metadatatype} value={commentsType.metadatatype}>
{commentsType.metadatatypesubname}
</option>
)
})}
</Input.DropdownSelect>
</div>
</Form.Label>
</div>
</div>
<div className="row-item">
<div className="form-value">
<Notes
style={{fontSize: '13px', marginTop: '6px'}}
NotesData={[]}
onChange={() => {}}
// tabIndex="23"
moduleName="budgetproposal"/>
</div>
</div>
</div>
);
};
export default SAMFormAdditionalDetailsTab;

Editor

You can edit this paste and save as new:

fullscreen copy clear

Syntax Highlighting

Title / Paste Name

Meta robots tag

reCaptcha

File Description

file upload
Paste Code
10 Aug-2022
17.7 Kb

You can Share it:

Latest Code Pastes

Full list

Tools

[javascript] file upload

Viewer

Editor