Media upload
This commit is contained in:
CHIEFSOFT\ameye
@@ -1,62 +1,183 @@
|
||||
import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import {useState, useRef} from "react";
|
||||
|
||||
export default function MyMedia() {
|
||||
|
||||
export default function MyMedia(){
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
return(
|
||||
// Function to handle file selection
|
||||
const handleFileChange = (event) => {
|
||||
setSelectedFile(event.target.files[0]);
|
||||
setMessage('');
|
||||
};
|
||||
|
||||
// Function to handle the upload to the API
|
||||
const handleUpload = async () => {
|
||||
if (!selectedFile) {
|
||||
setMessage('Please select a file first!');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
// 'file' is the field name that your API endpoint expects
|
||||
formData.append('file', selectedFile);
|
||||
formData.append("member_uid", "YYYYYYYYYYYYYYYYYYYYYYYYYYYY0IIIII000000");
|
||||
formData.append("member_id", "0");
|
||||
|
||||
try {
|
||||
// Replace with your actual API endpoint URL
|
||||
const apiEndpoint = 'https://devapi.mermsemr.com/upload/webfiles';
|
||||
const response = await fetch(apiEndpoint, {
|
||||
method: 'POST',
|
||||
// The browser automatically sets the 'Content-Type' header to
|
||||
// 'multipart/form-data' when you provide a FormData object as the body,
|
||||
// which is required for file uploads.
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
setMessage('File uploaded successfully!');
|
||||
console.log('Success:', result);
|
||||
} else {
|
||||
setMessage('Upload failed.');
|
||||
console.error('Upload failed:', response.statusText);
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage('An error occurred during the upload.');
|
||||
console.error('Error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Files' paths={['Dashboard', 'Files']} />
|
||||
<BreadcrumbComBS title='Files' paths={['Dashboard', 'Files']}/>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-6 col-xxl-4 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0 widget-support-list">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Upload File</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body pl-0 pr-0 scrollbar scroll_dark">
|
||||
<div className="widget-text">
|
||||
|
||||
<div>
|
||||
<input className="form-control form-control-sm" type="file"
|
||||
onChange={handleFileChange}/>
|
||||
|
||||
|
||||
<div>
|
||||
{selectedFile && (
|
||||
<div>
|
||||
<h4>Selected File Details:</h4>
|
||||
<ul>
|
||||
<li>Name: {selectedFile.name}</li>
|
||||
<li>Type: {selectedFile.type}</li>
|
||||
<li>Size: {selectedFile.size} bytes</li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<button onClick={handleUpload} disabled={!selectedFile}>
|
||||
Upload
|
||||
</button>
|
||||
<>
|
||||
{message && <p>{message}</p>}
|
||||
</>
|
||||
</div>
|
||||
|
||||
<div className="card card-statistics" style={{minHeight:'550px'}}>
|
||||
{/*<div className="card-header">*/}
|
||||
{/* <div className="card-heading">*/}
|
||||
{/* <h4 className="card-title"> Tab vertical </h4>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div className="card-body">
|
||||
<div className="tab tab-vertical">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link active show" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true"> Home</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="profile-09-tab" data-toggle="tab" href="#profile-09" role="tab" aria-controls="profile-09" aria-selected="false"> Profile </a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="portfolio-09-tab" data-toggle="tab" href="#portfolio-09" role="tab" aria-controls="portfolio-09" aria-selected="false">Portfolio </a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="contact-09-tab" data-toggle="tab" href="#contact-09" role="tab" aria-controls="contact-09" aria-selected="false"> Contact </a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane fade active show" id="home-09" role="tabpanel" aria-labelledby="home-09-tab">
|
||||
<p>Positive pleasure-oriented goals are much more powerful motivators than negative fear-based ones. Although each is successful separately, the right combination of both is the most powerful motivational force known to humankind.Make a list of your achievements toward your long-term goal and remind yourself that intentions don’t count, only action’s.</p>
|
||||
</div>
|
||||
<div className="tab-pane fade" id="profile-09" role="tabpanel" aria-labelledby="profile-09-tab">
|
||||
<p>Reflect and experiment until you find the right combination of motivators for your personality and your personal goals. Do it today. Remind yourself of someone you know who died suddenly and the fact that there is no guarantee that tomorrow will come.</p>
|
||||
</div>
|
||||
<div className="tab-pane fade" id="portfolio-09" role="tabpanel" aria-labelledby="portfolio-09-tab">
|
||||
<p>Commitment is something that comes from understanding that everything has its price and then having the willingness to pay that price. This is important because nobody wants to put significant effort into something, only to find out after the fact that the price was too high. We all know people who live this truth.Give yourself the power of responsibility.</p>
|
||||
</div>
|
||||
<div className="tab-pane fade" id="contact-09" role="tabpanel" aria-labelledby="contact-09-tab">
|
||||
<p>I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.Give yourself the power of responsibility. Remind yourself the only thing stopping you is yourself.</p>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xxl-4 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0 widget-downloads-list" style={{minHeight: '600px'}}>
|
||||
<div className="card-header d-flex justify-content-between">
|
||||
<div className="card-heading">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Files List</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body scrollbar scroll_dark">
|
||||
<div className="widget-text">
|
||||
<div className="media align-items-center">
|
||||
<img src="assets/img/file-icon/ai.png" className="img-fluid" alt="avi"/>
|
||||
<div className="media-body">
|
||||
<h4 className="mb-0 ml-3">Mentor_demo.avi</h4>
|
||||
</div>
|
||||
<div>
|
||||
<a href="" className="btn btn-icon btn-round btn-outline-success">
|
||||
<i className="ti ti-download"></i>
|
||||
</a>
|
||||
<a href="" className="btn btn-icon btn-round btn-outline-danger ml-2">
|
||||
<i className="ti ti-close"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="widget-text">
|
||||
<div className="media align-items-center">
|
||||
<img src="assets/img/file-icon/dwg.png" className="img-fluid" alt="dwg"/>
|
||||
<div className="media-body">
|
||||
<h4 className="mb-0 ml-3">Mentor_demo.dwg</h4>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0)"
|
||||
className="btn btn-icon btn-round btn-outline-success">
|
||||
<i className="ti ti-download"></i>
|
||||
</a>
|
||||
<a href="javascript:void(0)"
|
||||
className="btn btn-icon btn-round btn-outline-danger ml-2">
|
||||
<i className="ti ti-close"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="widget-text">
|
||||
<div className="media align-items-center">
|
||||
<img src="assets/img/file-icon/exe.png" className="img-fluid" alt="exe"/>
|
||||
<div className="media-body">
|
||||
<h4 className="mb-0 ml-3">Mentor_demo.exe</h4>
|
||||
</div>
|
||||
<div>
|
||||
<a href="javascript:void(0)"
|
||||
className="btn btn-icon btn-round btn-outline-success">
|
||||
<i className="ti ti-download"></i>
|
||||
</a>
|
||||
<a href="javascript:void(0)"
|
||||
className="btn btn-icon btn-round btn-outline-danger ml-2">
|
||||
<i className="ti ti-close"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xxl-4 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0 widget-branches-list">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Preview</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body pl-0 pr-0 scrollbar scroll_dark">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user