Je ne suis que récemment traitant avec le SDK AWS et donc s'il vous plaît excuser si mon approche est un non-sens complet.
Je veux télécharger un simple fichier multimédia de mon S3. J'ai suivi ce tutoriel et pour l'instant je suis en mesure de télécharger des fichiers sans problème. Pour userbility une barre de progression serait un plus agréable et donc j'ai été la recherche de moyens pour y parvenir. J'ai rapidement constaté que l' actuelle AWS SDK v3 ne prend pas en charge httpUploadProgress plus mais nous devrions utiliser @aws-sdk/lib-storage au lieu de cela. L'utilisation de cette bibliothèque, je suis encore capable de télécharger des fichiers sur le S3, mais je ne peux pas obtenir la progression tracker pour travailler! Je suppose que cela a quelque chose à voir avec moi, pas la pleine compréhension de la façon de traiter avec async au sein d'une Réagir composant.
Voici donc mon minifiés composant exemple (je suis en utilisant le Chakra de l'INTERFACE utilisateur ici)
const TestAWS: React.FC = () => {
const inputRef = useRef<HTMLInputElement | null>(null);
const [progr, setProgr] = useState<number>();
const region = "eu-west-1";
const bucketname = "upload-test";
const handleClick = async () => {
inputRef.current?.click();
};
const handleChange = (e: any) => {
console.log('Start file upload');
const file = e.target.files[0];
const target = {
Bucket: bucketname,
Key: `jobs/${file.name}`,
Body: file,
};
const s3 = new S3Client({
region: region,
credentials: fromCognitoIdentityPool({
client: new CognitoIdentityClient({ region: region }),
identityPoolId: "---MY ID---",
}),
});
const upload = new Upload({
client: s3,
params: target,
});
const t = upload.on("httpUploadProgress", progress => {
console.log("Progress", progress);
if (progress.loaded && progress.total) {
console.log("loaded/total", progress.loaded, progress.total);
setProgr(Math.round((progress.loaded / progress.total) * 100)); // I was expecting this line to be sufficient for updating my component
}
});
await upload.done().then(r => console.log(r));
};
console.log('Progress', progr);
return (
<InputGroup onClick={handleClick}>
<input ref={inputRef} type={"file"} multiple={false} hidden accept='video/*' onChange={e => handleChange(e)} />
<Flex layerStyle='uploadField'>
<Center w='100%'>
<VStack>
<PlusIcon />
<Text>Choose Video File</Text>
</VStack>
</Center>
</Flex>
{progr && <Progress value={progr} />}
</InputGroup>
);
};
export default TestAWS;
Donc, fondamentalement, je vois l'événement de se faire licencier (start upload de fichier). Puis il prend un certain temps et je vois la Promesse de résultat et de la Progress, 100 dans ma console. Cela signifie pour moi que la variable d'état est mis à jour (au moins une fois), mais de ne pas re-rendu?
Qu'est-ce que je fais de mal ici? Toute aide appréciée!
lib-storagen'a jamais été destiné à être utilisé pour les petits de téléchargement de fichiers. Malheureusement, il semble qu'il n'existe actuellement aucune solution de satisfaction lors de l'utilisation de v3 (puisque c'est à l'aide de l'extraction de l'api sous le capot) et le téléchargement des fichiers de petite taille. Si votre approche est certainement une bonne solution, mais j'espère qu'ils vont mettre en place quelque chose dans le SDK très bientôt.