66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
import * as React from 'react';
|
|
import { useFetchClient } from '@strapi/admin/strapi-admin';
|
|
import { useQueryClient, useMutation } from 'react-query';
|
|
import { pluginId } from '../pluginId.mjs';
|
|
|
|
const endpoint = `/${pluginId}`;
|
|
const uploadAsset = (asset, folderId, signal, onProgress, post)=>{
|
|
const { rawFile, caption, name, alternativeText } = asset;
|
|
const formData = new FormData();
|
|
formData.append('files', rawFile);
|
|
formData.append('fileInfo', JSON.stringify({
|
|
name,
|
|
caption,
|
|
alternativeText,
|
|
folder: folderId
|
|
}));
|
|
/**
|
|
* onProgress is not possible using native fetch
|
|
* need to look into an alternative to make it work
|
|
* perhaps using xhr like Axios does
|
|
*/ return post(endpoint, formData, {
|
|
signal
|
|
}).then((res)=>res.data);
|
|
};
|
|
const useUpload = ()=>{
|
|
const [progress, setProgress] = React.useState(0);
|
|
const queryClient = useQueryClient();
|
|
const abortController = new AbortController();
|
|
const signal = abortController.signal;
|
|
const { post } = useFetchClient();
|
|
const mutation = useMutation(({ asset, folderId })=>{
|
|
return uploadAsset(asset, folderId, signal, setProgress, post);
|
|
}, {
|
|
onSuccess () {
|
|
queryClient.refetchQueries([
|
|
pluginId,
|
|
'assets'
|
|
], {
|
|
active: true
|
|
});
|
|
queryClient.refetchQueries([
|
|
pluginId,
|
|
'asset-count'
|
|
], {
|
|
active: true
|
|
});
|
|
}
|
|
});
|
|
const upload = (asset, folderId)=>mutation.mutateAsync({
|
|
asset,
|
|
folderId
|
|
});
|
|
const cancel = ()=>abortController.abort();
|
|
return {
|
|
upload,
|
|
isLoading: mutation.isLoading,
|
|
cancel,
|
|
error: mutation.error,
|
|
progress,
|
|
status: mutation.status
|
|
};
|
|
};
|
|
|
|
export { useUpload };
|
|
//# sourceMappingURL=useUpload.mjs.map
|