file list refresh and scroll bar added #107
@@ -1,16 +1,21 @@
|
||||
import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import {useState, useRef} from "react";
|
||||
import {useQuery} from "@tanstack/react-query";
|
||||
import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import {getMediaFileList} from "../../services/services";
|
||||
import {getMediaFileList, uploadFile} from "../../services/services";
|
||||
import getImage from "../../utils/getImage";
|
||||
|
||||
|
||||
export default function MyMedia() {
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const basePath = process.env.REACT_APP_MAIN_API
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
const [imageLink, setImageLink] = useState('')
|
||||
console.log('imageLink', imageLink)
|
||||
// Function to handle file selection
|
||||
const handleFileChange = (event) => {
|
||||
setSelectedFile(event.target.files[0]);
|
||||
@@ -18,7 +23,7 @@ export default function MyMedia() {
|
||||
};
|
||||
|
||||
// Function to handle the upload to the API
|
||||
const handleUpload = async () => {
|
||||
const _handleUpload = async () => {
|
||||
if (!selectedFile) {
|
||||
setMessage('Please select a file first!');
|
||||
return;
|
||||
@@ -55,6 +60,41 @@ export default function MyMedia() {
|
||||
}
|
||||
}
|
||||
|
||||
const uploadFileMutation = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
if(!fields.file){
|
||||
throw({message: 'Please select a file first!'})
|
||||
}
|
||||
return uploadFile(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
// console.log('res', res.data)
|
||||
// if(res.data.resultCode != '0' || !res?.data?.pending_uid){
|
||||
// throw({message: res?.data?.resultDescription})
|
||||
// }
|
||||
setSelectedFile(null)
|
||||
queryClient.refetchQueries({
|
||||
queryKey: [...queryKeys.my_files],
|
||||
// type: 'active',
|
||||
// exact: true,
|
||||
})
|
||||
},
|
||||
onSettled: () => {
|
||||
setTimeout(()=>{
|
||||
uploadFileMutation.reset()
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
|
||||
const handleUpload = () => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem("token"), // USER TOKEN
|
||||
member_uid: localStorage.getItem("uid"), // USER UID
|
||||
file: selectedFile
|
||||
};
|
||||
// console.log(reqData)
|
||||
uploadFileMutation.mutate(reqData)
|
||||
}
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.my_files,
|
||||
@@ -101,13 +141,14 @@ export default function MyMedia() {
|
||||
<div style={{width: '100%', textAlign: 'right'}}>
|
||||
<button
|
||||
className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0"
|
||||
onClick={handleUpload} disabled={!selectedFile}>
|
||||
onClick={handleUpload} disabled={!selectedFile || uploadFileMutation.isPending || uploadFileMutation.isSuccess}>
|
||||
Upload
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<>
|
||||
{message && <p>{message}</p>}
|
||||
{/* {message && <p>{message}</p>} */}
|
||||
<p>{uploadFileMutation.isPending ? 'uploading...' : uploadFileMutation.isError ? uploadFileMutation?.error?.message : uploadFileMutation.isSuccess ? 'File Uploaded' : ''}</p>
|
||||
</>
|
||||
</div>
|
||||
|
||||
@@ -120,7 +161,7 @@ export default function MyMedia() {
|
||||
</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 card-statistics h-100 mb-0 widget-downloads-list" style={{}}>
|
||||
<div className="card-header d-flex justify-content-between">
|
||||
<div className="card-heading">
|
||||
<div className="card-heading">
|
||||
@@ -128,36 +169,49 @@ export default function MyMedia() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body scrollbar scroll_dark">
|
||||
{mediaFileList && mediaFileList?.file_list && mediaFileList?.file_list.map((item, index) => {
|
||||
const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
|
||||
const avtarImage =
|
||||
item?.file_type === undefined
|
||||
? "icons/01.png"
|
||||
: "icons/" + item.file_type + ".png";
|
||||
return (<div className="widget-text">
|
||||
<div className="media align-items-center">
|
||||
<img src={getImage(avtarImage)}
|
||||
// src={`assets/img/file-icon/${item.file_type}.png`}
|
||||
className="img-fluid"
|
||||
alt={`${item.file_type}`}/>
|
||||
<div className="media-body">
|
||||
<h4 className="mb-0 ml-3">{item.filename}</h4>
|
||||
{isFetching ?
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-mute'>Loading...</p>
|
||||
</div>
|
||||
</>
|
||||
: isError ?
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{error?.message}</p>
|
||||
</div>
|
||||
:
|
||||
<div className="card-body scrollbar scroll_dark" style={{minHeight: '400px', maxHeight: '500px', overflowY: 'auto'}}>
|
||||
{mediaFileList && mediaFileList?.file_list && mediaFileList?.file_list.map((item, index) => {
|
||||
const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
|
||||
const avtarImage =
|
||||
item?.file_type === undefined
|
||||
? "icons/01.png"
|
||||
: "icons/" + item.file_type + ".png";
|
||||
return (<div key={index} className="widget-text">
|
||||
<div className="media align-items-center" onClick={()=>setImageLink(file_url)} style={{cursor: 'pointer'}}>
|
||||
<img src={getImage(avtarImage)}
|
||||
// src={`assets/img/file-icon/${item.file_type}.png`}
|
||||
className="img-fluid"
|
||||
alt={`${item.file_type}`}/>
|
||||
<div className="media-body">
|
||||
<h4 className="mb-0 ml-3">{item.filename}</h4>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href={`${file_url}`} target='_blank'
|
||||
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>
|
||||
<a href={`${file_url}`} target='_blank'
|
||||
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>
|
||||
</div>)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xxl-4 m-b-30">
|
||||
@@ -167,9 +221,10 @@ export default function MyMedia() {
|
||||
<h4 className="card-title">Preview</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body pl-0 pr-0 scrollbar scroll_dark">
|
||||
|
||||
|
||||
<div className="card-body d-flex justify-content-center align-items-center pl-0 pr-0 scrollbar scroll_dark">
|
||||
{imageLink &&
|
||||
<img src={imageLink} alt='file-image' />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import axios from "axios"
|
||||
|
||||
|
||||
axios.interceptors.request.use(
|
||||
config => {
|
||||
config.headers = {
|
||||
Accept: "application/json",
|
||||
// Accept: "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
// "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
|
||||
// "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
|
||||
@@ -284,6 +283,13 @@ export const getMediaFileList = (reqData) => {
|
||||
return postAuxEnd(`/panel/account/media-files`, postData, false)
|
||||
}
|
||||
|
||||
export const uploadFile = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/upload/webfiles`, postData, true)
|
||||
}
|
||||
|
||||
export const getReportsTopicsList = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
|
||||
Reference in New Issue
Block a user