Amplify Storage S3 uploadData function filename issue

0

I added storage to my Amplify React App. Read the AWS Documentation https://docs.amplify.aws/react/build-a-backend/storage/upload-files/ The uploadData function does upload the file for me but the filename is reported in the AWS S3 Console as "undefined". I can tell its the right file based on file size, ie if I upload a different file the filesize updates to match, however again the file is called "undefined"

Here is the code

	import React from 'react';
	import { uploadData } from 'aws-amplify/storage';

	const StorageTest = () => {
	  const [file, setFile] = React.useState();

	  const handleChange = (event) => {
		setFile(event.target.files[0]);
	  };

	  const handleUpload = async () => {
		if (file) {
		  try {
			const result = await uploadData({
			  path: `public/docs/${file.name}`,
			  data: file,
			});

			console.log('File uploaded successfully', result);
		  } catch (error) {
			console.error('Error uploading file', error);
		  }
		} else {
		  console.error('No file selected for upload');
		}
	  };

	  return (
		<div>
		  <input type="file" onChange={handleChange} />
		  <button onClick={handleUpload}>Upload</button>
		</div>
	  );
	}

	export default StorageTest;
3 Respostas
0

The main reason why file name could be undefined is because the action may be asynchronous, meaning at the time you perform the upload the react state doesn’t have the information.

Id suggest to try use a form onSubmit event and see if that helps.

profile picture
ESPECIALISTA
respondido há 2 meses
profile picture
ESPECIALISTA
avaliado há 18 dias
0

Thanks for the reply I updated the code to use a Form's onSubmit but the filename is still "undefined" after the upload. Both versions of the code wait for the asynchronous operation. but I'm obviously missing something. Maybe I need to wait for a specific state ?

Here is the updated code with Form submit

	import React from 'react';
	import { uploadData } from 'aws-amplify/storage';

	const StorageTest = () => {
	  const [file, setFile] = React.useState();

	  const handleChange = (event) => {
		const selectedFile = event.target.files[0];
		console.log('Selected file:', selectedFile);
		setFile(selectedFile);
	  };

	  const handleSubmit = async (event) => {
		event.preventDefault(); // Prevent the default form submission behavior
		if (file) {
		  try {
			console.log('File name:', file.name);
			const result = await uploadData({
			  path: `public/docs/${file.name}`,
			  data: file,
			});
			console.log('File uploaded successfully', result);
		  } catch (error) {
			console.error('Error uploading file', error);
		  }
		} else {
		  console.error('No file selected for upload');
		}
	  };

	  return (
		<form onSubmit={handleSubmit}>
		  <input type="file" onChange={handleChange} />
		  <button type="submit">Upload</button>
		</form>
	  );
	};

	export default StorageTest;
respondido há 2 meses
0

Ok I got it to work at last. I back tracked to the original code from the AWS Documentation Then replaced "path" with "key" in the uploadData function With this change the uploadData function works. The file is placed in a public\docs*.* folder, Here is the revised code.

	import React from 'react';
	import { uploadData } from 'aws-amplify/storage';

	const StorageTest = () => {
	  const [file, setFile] = React.useState();

	  const handleChange = (event) => {
		setFile(event.target.files[0]);
	  };

	  const handleUpload = async () => {
		if (file) {
		  try {
		const filepath = `docs/${file.name}`;
			const result = await uploadData({
			  //path: filepath,
			  key: filepath,
			  data: file
			});

			console.log('File uploaded successfully', result);
		  } catch (error) {
			console.error('Error uploading file', error);
		  }
		} else {
		  console.error('No file selected for upload');
		}
	  };

	  return (
		<div>
		  <input type="file" onChange={handleChange} />
		  <button onClick={handleUpload}>Upload</button>
		</div>
	  );
	}

	export default StorageTest;
respondido há 2 meses
profile picture
ESPECIALISTA
avaliado há 2 meses

Você não está conectado. Fazer login para postar uma resposta.

Uma boa resposta responde claramente à pergunta, dá feedback construtivo e incentiva o crescimento profissional de quem perguntou.

Diretrizes para responder a perguntas